Device monitoring/v2

public/plugins/vue/tt-components/css/tt-switch.css

@@ -0,0 +1,103 @@
+.tt-switch {
+    position: relative;
+    display: inline-block;
+    width: 44px;
+    height: 24px;
+}
+
+.tt-switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    transition: background-color .4s;
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 18px;
+    width: 18px;
+    left: 3px;
+    bottom: 3px;
+    background-color: white;
+    transition: transform .4s, opacity .4s; /* Added opacity transition */
+    opacity: 1;
+}
+
+input:checked + .slider {
+    background-color: #28a745;
+}
+
+input:focus + .slider {
+    box-shadow: 0 0 1px #28a745;
+}
+
+input:checked + .slider:before {
+    transform: translateX(20px);
+}
+
+.slider.round {
+    border-radius: 24px;
+}
+
+.slider.round:before {
+    border-radius: 50%;
+}
+
+/* --- Loading State --- */
+
+input:disabled + .slider {
+    cursor: not-allowed;
+    opacity: 0.7;
+}
+
+/* Fade out the handle when loading/disabled */
+input[type="checkbox"]:disabled + .slider:before {
+    opacity: 0;
+}
+
+/* Wrapper for the spinner to handle translation */
+.spinner-wrapper {
+    display: block;
+    position: absolute;
+    height: 18px;
+    width: 18px;
+    left: 3px;
+    bottom: 3px;
+    transition: transform .4s;
+}
+
+/* Move wrapper when switch is checked */
+input:checked + .slider .spinner-wrapper {
+    transform: translateX(20px);
+}
+input:checked:disabled + .slider .spinner-wrapper {
+    transform: translateX(20px);
+}
+
+/* The actual spinner for rotation */
+.spinner {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border: 3px solid rgba(255, 255, 255, 0.3);
+    border-top-color: #fff;
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}

public/plugins/vue/tt-components/tt-switch.js

@@ -0,0 +1,14 @@
+Vue.component('tt-switch', {
+    template: `
+      <label class="tt-switch">
+        <input type="checkbox" :checked="value" @change="$emit('input', $event.target.checked)" :disabled="loading">
+        <span class="slider round">
+                <span v-if="loading" class="spinner-wrapper"><span class="spinner"></span></span>
+            </span>
+      </label>
+    `,
+    props: {
+        value: { type: Boolean, default: false },
+        loading: { type: Boolean, default: false }
+    }
+});