cleanup and tweaks

console/src/components/AppFooter.vue

@@ -1,7 +1,8 @@
 <template>
     <div class="footer">
         <div class="footer-container">
-            <div class="footer-copyright">Jono did this by blatantly copy-pasting from the docs</div>
+            <div class="footer-copyright">Jono made this by blatantly copy-pasting from the example projects and vibe-coding the rest</div>
+            and by not being stupid
         </div>
     </div>
 </template>

console/src/components/AppTopbar.vue

@@ -9,23 +9,13 @@ const { isDarkMode, toggleDarkMode } = useLayout();
     <div class="topbar">
         <div class="topbar-container">
             <div class="topbar-brand">
-                <svg
+                <!-- Stolen from logoipsum -->
-                    width="35"
+                <svg width="59" height="36" viewBox="0 0 59 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    height="40"
+                    <path d="M20.0898 18C20.0898 19.1046 19.1944 20 18.0898 20C16.9853 20 16.0898 19.1046 16.0898 18C16.0898 16.8954 16.9853 16 18.0898 16C19.1944 16 20.0898 16.8954 20.0898 18Z" class="fill-surface"></path>
-                    viewBox="0 0 35 40"
+                    <path d="M42.0898 18C42.0898 19.1046 41.1944 20 40.0898 20C38.9853 20 38.0898 19.1046 38.0898 18C38.0898 16.8954 38.9853 16 40.0898 16C41.1944 16 42.0898 16.8954 42.0898 18Z" class="fill-surface"></path>
-                    fill="none"
+                    <path class="fill-primary" fill-rule="evenodd" clip-rule="evenodd" d="M40.0899 2.0365e-06C40.7659 2.1547e-06 41.4332 0.0372686 42.0898 0.109859V2.12379C41.4347 2.04209 40.7672 2 40.0899 2C36.5517 2 33.2835 3.14743 30.6345 5.09135C31.1162 5.55951 31.5717 6.0544 31.9988 6.57362C34.2835 4.95312 37.0764 4 40.0899 4C40.7689 4 41.4367 4.04834 42.0898 4.14177V6.16591C41.4394 6.0568 40.7713 6 40.0899 6C37.5171 6 35.1352 6.80868 33.1819 8.18644C33.547 8.74673 33.8817 9.3286 34.1837 9.92973C35.8384 8.71698 37.8811 8 40.0899 8C40.7748 8 41.4436 8.06886 42.0898 8.20003V10.252C41.4506 10.0875 40.7805 10 40.0899 10C38.1572 10 36.386 10.6843 35.0029 11.8253C35.2578 12.5233 35.4707 13.2415 35.6386 13.9768C36.7365 12.7628 38.3241 12 40.0899 12C40.7911 12 41.4643 12.1203 42.0898 12.3414V14.5351C41.5015 14.1948 40.8185 14 40.0899 14C37.8808 14 36.0899 15.7909 36.0899 18C36.0899 20.2091 37.8808 22 40.0899 22C42.299 22 44.0899 20.2091 44.0899 18L44.0898 17.9791V0.446033C52.1058 2.26495 58.0899 9.43365 58.0899 18C58.0899 27.9411 50.031 36 40.0899 36C35.9474 36 32.1317 34.6006 29.0898 32.2488C26.0482 34.6002 22.2313 36 18.0898 36C17.4138 36 16.7465 35.9627 16.0898 35.8901V33.8762C16.745 33.9579 17.4125 34 18.0898 34C21.6281 34 24.8962 32.8525 27.5452 30.9086C27.0636 30.4405 26.6081 29.9456 26.181 29.4264C23.8963 31.0469 21.1033 32 18.0899 32C17.4108 32 16.7431 31.9517 16.0898 31.8582V29.8341C16.7403 29.9432 17.4085 30 18.0899 30C20.6628 30 23.0446 29.1913 24.9979 27.8136C24.6328 27.2533 24.2981 26.6714 23.996 26.0703C22.3414 27.283 20.2987 28 18.0899 28C17.405 28 16.7361 27.9311 16.0898 27.7999V25.7479C16.7291 25.9125 17.3993 26 18.0899 26C20.0226 26 21.7938 25.3157 23.1769 24.1747C22.922 23.4767 22.7091 22.7585 22.5412 22.0232C21.4433 23.2372 19.8557 24 18.0899 24C17.3886 24 16.7154 23.8797 16.0898 23.6586V21.4648C16.6782 21.8052 17.3613 22 18.0899 22C20.299 22 22.0899 20.2091 22.0899 18C22.0899 15.7909 20.299 14 18.0899 14C15.8808 14 14.0899 15.7909 14.0899 18L14.0898 35.554C6.07389 33.7351 0.0898438 26.5663 0.0898438 18C0.0898438 8.05887 8.14877 0 18.0899 0C22.2324 0 26.048 1.39934 29.0899 3.75111C32.1316 1.3998 35.9483 0 40.0899 2.0365e-06ZM46.0898 3.16303V5.34723C50.8198 7.59414 54.0899 12.4152 54.0899 18C54.0899 25.732 47.8219 32 40.0899 32C32.3579 32 26.0899 25.732 26.0899 18C26.0899 13.5817 22.5082 10 18.0899 10C13.6716 10 10.0899 13.5817 10.0899 18C10.0899 20.0289 10.8452 21.8814 12.0899 23.2916V18C12.0899 14.6863 14.7762 12 18.0899 12C21.4036 12 24.0899 14.6863 24.0899 18C24.0899 26.8366 31.2533 34 40.0899 34C48.9265 34 56.0898 26.8366 56.0898 18C56.0898 11.2852 51.9535 5.53658 46.0898 3.16303ZM12.0899 26.0007L12.0898 28.3946C8.50306 26.3197 6.0899 22.4417 6.0899 18C6.0899 11.3726 11.4625 6 18.0899 6C24.7173 6 30.0899 11.3726 30.0899 18C30.0899 23.5228 34.5671 28 40.0899 28C45.6127 28 50.0899 23.5228 50.0899 18C50.0899 14.7284 48.5188 11.8237 46.0899 9.99929V7.60538C49.6767 9.68023 52.0899 13.5583 52.0899 18C52.0899 24.6274 46.7173 30 40.0899 30C33.4625 30 28.0899 24.6274 28.0899 18C28.0899 12.4772 23.6127 8 18.0899 8C12.567 8 8.08992 12.4772 8.08992 18C8.08992 21.2716 9.66101 24.1763 12.0899 26.0007ZM4.0899 18C4.0899 23.5848 7.35998 28.4058 12.0898 30.6527V32.837C6.2262 30.4634 2.08989 24.7148 2.0899 18C2.0899 9.16344 9.25334 2 18.0899 2C26.9265 2 34.0899 9.16344 34.0899 18C34.0899 21.3137 36.7762 24 40.0899 24C43.4036 24 46.0899 21.3137 46.0899 18L46.0899 12.7084C47.3346 14.1186 48.0899 15.9711 48.0899 18C48.0899 22.4183 44.5082 26 40.0899 26C35.6716 26 32.0899 22.4183 32.0899 18C32.0899 10.268 25.8219 4 18.0899 4C10.3579 4 4.0899 10.268 4.0899 18Z"></path>
-                    class="w-8"
-                    xmlns="http://www.w3.org/2000/svg"
-                >
-                    <path
-                        d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
-                        class="fill-primary"
-                    />
-                    <path
-                        d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
-                        class="fill-surface"
-                    />
                 </svg>
+
                 <span class="topbar-brand-text">
                     <span class="topbar-title">Device Management Console</span>
                     <span class="topbar-subtitle">Shitty Edition™</span>
@@ -45,7 +35,7 @@ const { isDarkMode, toggleDarkMode } = useLayout();
                             leaveActiveClass: 'animate-fadeout',
                             hideOnOutsideClick: true,
                         }"
-                        icon="pi pi-cog"
+                        icon="pi pi-palette"
                         text
                         rounded
                         aria-label="Settings"

console/src/components/dashboard/CommandsWidget.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, reactive, watch, onMounted } from 'vue'
+import { ref, reactive, onMounted } from 'vue'
 import MQTTService from '../../services/mqtt.js'
 
 import Accordion from 'primevue/accordion';
@@ -7,9 +7,7 @@ import AccordionPanel from 'primevue/accordionpanel';
 import AccordionHeader from 'primevue/accordionheader';
 import AccordionContent from 'primevue/accordioncontent';
 
-
 import { JsonForms } from "@jsonforms/vue";
-import { defaultStyles, mergeStyles, vanillaRenderers } from "@jsonforms/vue-vanilla";
 import { primeVueRenderers } from 'jsonforms-primevue'
 
 const renderers = Object.freeze([
@@ -17,8 +15,6 @@ const renderers = Object.freeze([
   // here you can add custom renderers
 ]);
 
-const openTabs = ref([])
-
 const props = defineProps({
   deviceId: String
 })
@@ -26,14 +22,9 @@ const props = defineProps({
 const mqtt2 = new MQTTService()
 
 const filters = ref({})
-const filterMode = ref({ label: 'Lenient', value: 'lenient' });
-
 const commands = ref([])
-
 const commandMap = reactive({})
 
-
-
 function rebuildList() {
   commands.value = Object.values(commandMap)
 }
@@ -53,13 +44,8 @@ function updateCommand(device, name, field, value) {
 }
 
 function sendCommand(cmd) {
-
   const topic = `device/${props.deviceId}/command/${cmd.name}`
-
   var payload = JSON.stringify(cmd.input, null, 2)
-
-  console.log("Command input", payload)
-
   mqtt2.publish(topic, payload || '{}')
 }
 
@@ -100,55 +86,14 @@ onMounted(() => {
     }
 
   })
-
-  const observer = new MutationObserver(() => {
-    updateEditorTheme()
-  })
-
 })
 
-const schema = {
-  properties: {
-    measRate: {
-      type: "integer",
-      minimum: 50,
-      maximum: 60000,
-      description: "Measurement period in milliseconds"
-    },
-    navRate: {
-      type: "integer",
-      minimum: 1,
-      maximum: 127,
-      description: "Number of measurement cycles per navigation solution"
-    },
-    timeRef: {
-      type: "integer",
-      enum: [
-        0,
-        1
-      ],
-      description: "Time reference (0=UTC, 1=GPS)"
-    }
-  },
-  required: [
-    "measRate",
-    "navRate",
-    "timeRef"
-  ],
-  additionalProperties: false
-}
-
 const jsonFormsConfig = {
     validationMode: 'ValidateOnTouched',
     showAllErrors: false,
     showErrorsOnTouched: true,
 }
 
-const onChange = (event) => {
-    console.log(event.data)
-    // state.errors = event.errors || []
-}
-
 </script>
 
 <template>
@@ -161,7 +106,7 @@ const onChange = (event) => {
         >
         <pre>{{ schemaDialog.content }}</pre>
     </Dialog>
-  <div class="layout-card">
+  <div class="layout-card col-item-2">
     <DataView :value="commands">
         <template #header>
             <div class="flex products-header">
@@ -244,58 +189,6 @@ const onChange = (event) => {
   font-size: 0.9rem;
 }
 
-.command-body {
-  padding-top: 0.5rem;
-}
-
-.cm-editor {
-  height: auto;
-}
-
-.json-editor {
-  border: 1px solid var(--surface-border);
-  border-radius: var(--border-radius);
-  background: var(--surface-card);
-}
-
-/* editor root */
-.json-editor .cm-editor {
-  font-family: var(--font-family);
-  font-size: 0.9rem;
-}
-
-/* content area */
-.json-editor .cm-content {
-  padding: 0.75rem;
-  caret-color: var(--text-color);
-}
-
-/* background */
-.json-editor .cm-scroller {
-  background: var(--surface-card);
-  color: var(--text-color);
-}
-
-/* cursor */
-.json-editor .cm-cursor {
-  border-left: 2px solid var(--primary-color);
-}
-
-/* selection */
-.json-editor .cm-selectionBackground {
-  background: var(--highlight-bg);
-}
-
-/* gutters if enabled later */
-.json-editor .cm-gutters {
-  background: var(--surface-ground);
-  border-right: 1px solid var(--surface-border);
-}
-
-.json-editor .cm-editor.cm-focused {
-  outline: 1px solid var(--primary-color);
-  outline-offset: 0;
-}
 
 .command-content {
   display: flex;
@@ -311,7 +204,7 @@ const onChange = (event) => {
   display: flex;
   flex-direction: row;
   gap: 0.5rem;
-  justify-content: flex-end; /* aligns buttons to the top */
+  justify-content: flex-end;
 }
 
 </style>

console/src/components/dashboard/PropertiesWidget.vue

@@ -96,7 +96,7 @@ onMounted(() => {
 
 
 <template>
-    <div class="layout-card">
+    <div class="layout-card col-item-2">
         <TreeTable :value="nodes" :filters="filters" :filterMode="filterMode.value">
             <template #header>
                 <div class="flex products-header">