From 28692cc375970f933d46392dacee73a27dffa6f2 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Mon, 11 Feb 2019 16:57:52 +0000
Subject: [PATCH] Added step size and position-reading boxes

---
 src/components/paneNavigate.vue | 77 ++++++++++++++++++++++++++++++++-
 1 file changed, 75 insertions(+), 2 deletions(-)

diff --git a/src/components/paneNavigate.vue b/src/components/paneNavigate.vue
index ef33da48..9c8b304a 100644
--- a/src/components/paneNavigate.vue
+++ b/src/components/paneNavigate.vue
@@ -1,6 +1,68 @@
 <template>
-<div id="paneNavigate">
-  Navigate
+<div v-if="$store.state.connected" id="paneNavigate">
+
+  <ul uk-accordion>
+    <li>
+      <a class="uk-accordion-title" href="#">Configure</a>
+      <div class="uk-accordion-content">
+
+        <div class="uk-child-width-1-2" uk-grid>
+
+          <div>
+            <label class="uk-form-label" for="form-stacked-text">x-y step size</label>
+            <div class="uk-form-controls">
+              <input v-model="stepXy" class="uk-input uk-form-width-medium uk-form-small" type="number" name="inputStepXy">
+            </div>
+          </div>
+
+          <div>
+            <label class="uk-form-label" for="form-stacked-text">z step size</label>
+            <div class="uk-form-controls">
+              <input v-model="stepZz" class="uk-input uk-form-width-medium uk-form-small" type="number" name="inputStepZz">
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </li>
+
+    <li>
+      <a class="uk-accordion-title" href="#">Move-to</a>
+      <div class="uk-accordion-content">
+
+        <form @submit.prevent="handleSubmit">
+          <div class="uk-child-width-1-3" uk-grid>
+            <div>
+              <label class="uk-form-label" for="form-stacked-text">x</label>
+              <div class="uk-form-controls">
+                <input v-model="$store.state.apiState.stage.position.x" class="uk-input uk-form-small" type="number" name="inputPositionX">
+              </div>
+            </div>
+
+            <div>
+              <label class="uk-form-label" for="form-stacked-text">y</label>
+              <div class="uk-form-controls">
+                <input v-model="$store.state.apiState.stage.position.y" class="uk-input uk-form-small" type="number" name="inputPositionY">
+              </div>
+            </div>
+
+            <div>
+              <label class="uk-form-label" for="form-stacked-text">z</label>
+              <div class="uk-form-controls">
+                <input v-model="$store.state.apiState.stage.position.z" class="uk-input uk-form-small" type="number" name="inputPositionZx">
+              </div>
+            </div>
+          </div>
+
+          <p>
+            <button class="uk-button uk-button-default uk-form-small uk-float-right uk-width-1-1">Move</button>
+          </p>
+        </form>
+
+      </div>
+    </li>
+  </ul>
+
   <p>
   TODO: Basic keyboard control by adding event listeners to this pane (e.g. v-on:keyup.)
   <br>
@@ -18,6 +80,13 @@
 export default {
   name: 'paneNavigate',
 
+  data: function () {
+    return {
+      stepXy: 50,
+      stepZz: 20
+    }
+  },
+
   methods: {
     // Handle global mouse wheel events to be associated with navigation
     wheelmonitor: function(event) {
@@ -41,6 +110,10 @@ export default {
         console.log("A key was pressed:");
         console.log(event.keyCode)
       }
+    },
+
+    handleSubmit: function(event) {
+      console.log("Position form submitted!")
     }
   },