Commit 75b7cfa3 authored by Guilhem Saurel's avatar Guilhem Saurel
Browse files

remove slider

parent eeefb155
......@@ -6,7 +6,6 @@
"dependencies": {
"@popperjs/core": "^2.10.2",
"bootstrap": "^5.1.3",
"jquery": "^3.6.0",
"mqtt": "^4.2.8",
"vue": "^3.2.20"
},
......
<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>
var mqtt = require('mqtt')
var Vue = require('vue')
var Slider = require('./Slider.vue')
const SLOTS = ['voltage', 'current', 'energy', 'status', 'temperature', 'throttled', 'joystick']
......
......@@ -2869,11 +2869,6 @@ 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"
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment