From 98d574db3f032aff3994345936ae437d39f38e59 Mon Sep 17 00:00:00 2001
From: ezpzlmnsqz1337 <mazlixek@seznam.cz>
Date: Sat, 17 Feb 2024 21:15:02 +0100
Subject: [PATCH] feat(Position): allow setting position, before sending a
 command

---
 src/components/Position.vue     |  9 ++++++++-
 src/components/RangeSliders.vue | 36 ++++++++++++++++++++++++---------
 src/components/Sidebar.vue      |  8 +++++++-
 3 files changed, 42 insertions(+), 11 deletions(-)

diff --git a/src/components/Position.vue b/src/components/Position.vue
index 0e96f3b..2c47b6c 100644
--- a/src/components/Position.vue
+++ b/src/components/Position.vue
@@ -4,8 +4,8 @@
       <RangeSliders
         valueName="position"
         valueKey="target"
+        diffKey="value"
         :step="100"
-        @on-change="sendCommand()"
       />
     </div>
     <div>
@@ -22,6 +22,13 @@
           :disabled="!isConnected || !ready"
           ><fa-icon icon="fa-solid fa-house" />&nbsp;Home</b-button
         >
+        <b-button
+          variant="primary"
+          size="large"
+          @click="sendCommand()"
+          :disabled="!isConnected || !ready"
+          ><fa-icon icon="fa-solid fa-play" />&nbsp;Go</b-button
+        >
       </b-form-group>
     </div>
   </div>
diff --git a/src/components/RangeSliders.vue b/src/components/RangeSliders.vue
index 42fc660..259f902 100644
--- a/src/components/RangeSliders.vue
+++ b/src/components/RangeSliders.vue
@@ -4,10 +4,11 @@
       <label :for="j.name">{{ j.name }}</label>
       <b-form-spinbutton
         :value="j[valueName][valueKey]"
-        @change="onChange($event, j)"
+        @input="onChange($event, j)"
         :min="j[valueName].min"
         :max="j[valueName].max"
         :step="step"
+        :class="{ __modified: isModified(j) }"
         :disabled="!isConnected || !ready"
       ></b-form-spinbutton>
       <b-form-input
@@ -15,7 +16,7 @@
         type="range"
         :name="j.name"
         :value="j[valueName][valueKey]"
-        @change="onChange($event, j)"
+        @input="onChange($event, j)"
         :min="j[valueName].min"
         :max="j[valueName].max"
         :step="step"
@@ -26,25 +27,42 @@
 </template>
 
 <script lang="ts">
-import { Joint } from '@/assets/joints'
+import { Joint, NumberRangeData } from '@/assets/joints'
 import ArmMixin from '@/mixins/ArmMixin.vue'
 import { Component, Emit, Prop } from 'vue-property-decorator'
 
 @Component
 export default class RangeSliders extends ArmMixin {
-  @Prop({ required: true }) readonly valueName!:
-    | 'speed'
-    | 'acceleration'
-    | 'position'
-  @Prop({ default: 'value' }) readonly valueKey!: 'value' | 'target'
+  @Prop({ required: true }) readonly valueName!: keyof Pick<
+    Joint,
+    'speed' | 'acceleration' | 'position'
+  >
+  @Prop({ default: 'value' }) readonly valueKey!: keyof Pick<
+    NumberRangeData,
+    'value'
+  >
+  @Prop({ default: 'value' }) readonly diffKey!: keyof Pick<
+    NumberRangeData,
+    'value'
+  >
+
   @Prop({ default: '10' }) readonly step!: string
 
   @Emit('on-change')
   onChange(event: string, joint: Joint) {
     ;(joint[this.valueName] as any)[this.valueKey] = parseInt(event)
   }
+
+  isModified(j: Joint): boolean {
+    return j[this.valueName][this.valueKey] !== j[this.valueName][this.diffKey]
+  }
 }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.__modified {
+  background-color: #0d6dfe3d !important;
+  font-weight: bold;
+}
+</style>
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 21be428..3026860 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -7,7 +7,9 @@
     :class="{ __fullscreen: fullscreen }"
   >
     <template #header="{ hide }">
-      <div @click="toggleFullscreenMenu()">Big Robot Arm UI</div>
+      <div @click="toggleFullscreenMenu()" class="__heading">
+        Big Robot Arm UI
+      </div>
       <fa-icon icon="fa-solid fa-xmark" @click.prevent="hide()" />
       <div class="d-md-none __expand_arrows">
         <fa-icon
@@ -111,6 +113,10 @@ export default class Sidebar extends Vue {
     top: 0;
   }
 
+  .__heading {
+    font-size: 0.8rem;
+  }
+
   .__fullscreen :deep(.b-sidebar) {
     height: calc(100%);
   }