update toggle into a component

packages/frontend/components/Buttons/LargeToggle.vue

@@ -0,0 +1,105 @@
+<!-- LargeToggle.vue -->
+<template>
+  <div class="ms-1 mb-3 toggle-container">
+            <input type="checkbox" id="toggle" class="toggleCheckbox" @change="toggleView">
+            <label for="toggle" class="toggle-label">
+                <div class="toggle-text toggle-left">New Device</div>
+                <div class="toggle-text toggle-right">New Container</div>
+            </label>
+        </div>
+</template>
+
+<script lang="ts">
+export default {
+    methods: {
+        toggleView() {
+            this.$emit('toggle-change');
+        }
+    }
+}
+</script>
+
+
+<style scoped>
+/* Hide the original checkbox */
+.toggleCheckbox {
+    display: none;
+}
+
+/* Container for the toggle switch */
+.toggle-container {
+    display: flex;
+    justify-content: left;
+    margin: 0 auto;
+    padding: 10px;
+    width: 500px;
+    height: 70px;
+    border-radius: 20px 0px 20px 0px;
+}
+
+/* Custom toggle switch */
+.toggle-label {
+    position: relative;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    width: fit-content;
+    border: 2px solid #4a148c;
+    border-radius: 25px;
+    background: white;
+    cursor: pointer;
+    overflow: hidden; /* Ensure no overflow */
+}
+
+/* Create the toggle slider */
+.toggle-label::before {
+    content: '';
+    position: absolute;
+    width: 50%; /* Half of the label width */
+    height: 100%;
+    top: 0;
+    left: 0;
+    background: #4a148c;
+    border-radius: 25px;
+    transition: left 0.3s;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* Add a shadow for better visibility */
+}
+
+/* Text containers */
+.toggle-label div {
+    padding: 10px;
+    text-align: center;
+    z-index: 1;
+    color: white;
+    font-weight: bold;
+}
+
+/* Adjust text colors when checked */
+.toggleCheckbox:checked + .toggle-label::before {
+    left: 50%;
+}
+
+.toggleCheckbox:checked + .toggle-label .toggle-left {
+    color: #4a148c; /* Inactive text color */
+}
+
+.toggleCheckbox:checked + .toggle-label .toggle-right {
+    color: black; /* Active text color */
+}
+
+.toggleCheckbox + .toggle-label .toggle-left {
+    color: white; /* Active text color */
+}
+
+.toggleCheckbox + .toggle-label .toggle-right {
+    color: black; /* Inactive text color */
+}
+
+.ms-1 {
+    margin-left: 0.25rem;
+}
+
+.mb-3 {
+    margin-bottom: 1rem;
+}
+
+</style>

packages/frontend/pages/index.vue

@@ -8,16 +8,8 @@
         <div class="my-4 text-iris fs-1">Global Distributed Tracking</div>
 
         <!-- create toggle for single or container  -->
-
-        <div class="ms-1 mb-3 toggle-container">
-            <input type="checkbox" id="toggle" class="toggleCheckbox" @change="toggleView">
-            <label for="toggle" class="toggle-label">
-                <div class="toggle-text toggle-left">New Device</div>
-                <div class="toggle-text toggle-right">New Container</div>
-            </label>
-        </div>
-
-
+        <ButtonsLargeToggle @toggle-change="toggleView" />
+
         <!-- <div>Create a Single Asset:</div> -->
         <div id="create_device"><CreateDevice/></div>
         <!-- <CreateDevice/> -->
@@ -34,23 +26,24 @@
 </template>
 
 <script lang="ts">
-    export default {
-        methods: {
-            toggleView() {
-                const toggle = document.getElementById("toggle") as HTMLInputElement;
-                const createDevice = document.getElementById("create_device");
-                const createContainer = document.getElementById("create_container");
-
-                if (toggle.checked) {
-                    createDevice.style.display = "none";
-                    createContainer.style.display = "block";
-                } else {
-                    createDevice.style.display = "block";
-                    createContainer.style.display = "none";
-                }
+
+export default {
+    
+    methods: {
+        toggleView() {
+            const toggle = document.getElementById("toggle") as HTMLInputElement;
+            const createDevice = document.getElementById("create_device");
+            const createContainer = document.getElementById("create_container");
+            if (toggle.checked) {
+                createDevice.style.display = "none";
+                createContainer.style.display = "block";
+            } else {
+                createDevice.style.display = "block";
+                createContainer.style.display = "none";
             }
         }
     }
+}
 
 </script>
 
@@ -156,5 +149,4 @@ body {
 }
 
 
-</style>
-
+</style>