slider wip

README.md

@@ -11,3 +11,18 @@ The low level RT controller is augmented with a thread that can access the main
 telemetry over MQTT, and subscribe to an "commands" channel.
 
 This repository provides a mock low-level RT controller, formalize the MQTT topics to use, and host the web application.
+
+## Build
+
+```bash
+cmake -B build
+cmake --build build
+yarn install
+```
+
+## launch
+
+```bash
+yarn parce src/index.html
+./build/mock
+```

package.json

 {
   "devDependencies": {
+    "@parcel/transformer-vue": "^2.0.0",
     "parcel": "^2.0.0"
   },
   "dependencies": {
     "@popperjs/core": "^2.10.2",
     "bootstrap": "^5.1.3",
+    "jquery": "^3.6.0",
     "mqtt": "^4.2.8",
     "vue": "^3.2.20"
   },
   "alias": {
-    "vue" : "vue/dist/vue.esm-bundler.js"
+    "vue": "vue/dist/vue.esm-bundler.js"
   }
 }

src/Slider.vue

+<template>
+    <form>
+        <div class="slide-submit">
+            <button type="submit">Stop >></button>
+            <label>Slide to Stop</label>
+        </div>
+    </form>
+</template>
+
+<script>
+export default {
+    setup() {
+        $(".slide-submit button").draggable({cancel: false, containment: "parent", axis: "x", stop: function() {
+            if (($(this).parent().width() / 2) === ($(this).position().left + 8)) {
+                $(this).css({left: "auto", right: 0}).addClass("submitted").text("Stopped").draggable('false');
+                console.log('STOP');
+            } else {
+                $(this).css({left: 0});
+            }
+        }}).on("click", function() {
+            return false;
+        });
+
+        document.addEventListener("touchstart", touchHandler, true);
+        document.addEventListener("touchmove", touchHandler, true);
+        document.addEventListener("touchend", touchHandler, true);
+        document.addEventListener("touchcancel", touchHandler, true);
+        function touchHandler(event) {
+            var touch = event.changedTouches[0];
+
+            var simulatedEvent = document.createEvent("MouseEvent");
+            simulatedEvent.initMouseEvent({
+                touchstart: "mousedown",
+                touchmove: "mousemove",
+                touchend: "mouseup"
+            }[event.type], true, true, window, 1,
+                touch.screenX, touch.screenY,
+                touch.clientX, touch.clientY, false,
+                false, false, false, 0, null);
+
+            touch.target.dispatchEvent(simulatedEvent);
+            event.preventDefault();
+        }
+    }
+};
+</script>
+
+<style>
+
+.slide-submit {
+    position: relative;
+    width: 250px;
+    height: 50px;
+    line-height: 50px;
+    background: white;
+    padding: 4px;
+    border: 1px solid #DDDDDD;
+    border-radius: 25px;
+}
+.slide-submit button {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    z-index: 10;
+    margin: 4px;
+    width: 50%;
+    background: #DD3A3A;
+    font-weight: bold;
+    color: white;
+    border: none;
+    padding: 10px;
+    border-radius: 25px;
+    transition: all 200ms linear;
+    cursor: pointer;
+}
+.slide-submit button.submitted {
+    width: 97%;
+    opacity: 0.8;
+}
+.slide-submit button.submitted + label {
+    display: none;
+}
+.slide-submit label {
+    position: absolute;
+    z-index: 8;
+    top: 0px;
+    right: 0px;
+    width: 50%;
+    font-size: 14px;
+    text-align: center;
+    color: #A7ADB3;
+    font-weight: bold;
+}
+</style>

src/app.js

 var mqtt = require('mqtt')
 var Vue = require('vue')
+var Slider = require('./Slider.vue')
 
 const app = Vue.createApp({
   data() {
@@ -26,11 +27,14 @@ const app = Vue.createApp({
       }
     }
   },
-  mounted() {
+  created() {
     this.client = mqtt.connect('ws://localhost:9001')
     this.client.on('message', this.onMessage);
     this.client.on('connect', this.onConnect);
+  },
+  unmounted() {
+    this.client.end();
   }
 });
 
-app.mount('#app');
+const vm = app.mount('#app');

yarn.lock

@@ -843,6 +843,20 @@
     posthtml-render "^3.0.0"
     semver "^5.4.1"
 
+"@parcel/transformer-vue@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@parcel/transformer-vue/-/transformer-vue-2.0.0.tgz#deb102e177cb4bbcf8069bed5e24bcb02c5e333a"
+  integrity sha512-fltTqRFe6eI3wpUb2ux+GkvsS0bf+XLzAsCL97DqHQnrdmTNZ/msblFE6AJIX2ex0sVup01CW3KQdsZkRShjYA==
+  dependencies:
+    "@parcel/diagnostic" "^2.0.0"
+    "@parcel/plugin" "^2.0.0"
+    "@parcel/source-map" "^2.0.0"
+    "@parcel/utils" "^2.0.0"
+    "@vue/compiler-sfc" "^3.0.0"
+    consolidate "^0.16.0"
+    nullthrows "^1.1.1"
+    semver "^5.4.1"
+
 "@parcel/types@^2.0.0":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@parcel/types/-/types-2.0.0.tgz#31f6eb7c24b2d9ae752ce49adaf01469a9e9067a"
@@ -953,7 +967,7 @@
     "@vue/compiler-core" "3.2.20"
     "@vue/shared" "3.2.20"
 
-"@vue/compiler-sfc@3.2.20":
+"@vue/compiler-sfc@3.2.20", "@vue/compiler-sfc@^3.0.0":
   version "3.2.20"
   resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.20.tgz#2d7668e76f066c566dd7c09c15c9acce4e876e0a"
   integrity sha512-03aZo+6tQKiFLfunHKSPZvdK4Jsn/ftRCyaro8AQIWkuxJbvSosbKK6HTTn+D2c3nPScG155akJoxKENw7rftQ==
@@ -1229,6 +1243,11 @@ bl@^4.0.2, bl@^4.1.0:
     inherits "^2.0.4"
     readable-stream "^3.4.0"
 
+bluebird@^3.7.2:
+  version "3.7.2"
+  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
+  integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
+
 bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.11.9:
   version "4.12.0"
   resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.12.0.tgz#775b3f278efbb9718eec7361f483fb36fbbfea88"
@@ -1564,6 +1583,13 @@ console-browserify@^1.2.0:
   resolved "https://registry.yarnpkg.com/console-browserify/-/console-browserify-1.2.0.tgz#67063cef57ceb6cf4993a2ab3a55840ae8c49336"
   integrity sha512-ZMkYO/LkF17QvCPqM0gxw8yUzigAOZOSWSHg91FH6orS7vcEj5dVZTidN2fQ14yBSdg97RqhSNwLUXInd52OTA==
 
+consolidate@^0.16.0:
+  version "0.16.0"
+  resolved "https://registry.yarnpkg.com/consolidate/-/consolidate-0.16.0.tgz#a11864768930f2f19431660a65906668f5fbdc16"
+  integrity sha512-Nhl1wzCslqXYTJVDyJCu3ODohy9OfBMB5uD2BiBTzd7w+QY0lBzafkR8y8755yMYHAaMD4NuzbAw03/xzfw+eQ==
+  dependencies:
+    bluebird "^3.7.2"
+
 constants-browserify@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
@@ -2843,6 +2869,11 @@ jake@^10.6.1:
     filelist "^1.0.1"
     minimatch "^3.0.4"
 
+jquery@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.6.0.tgz#c72a09f15c1bdce142f49dbf1170bdf8adac2470"
+  integrity sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==
+
 js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"