added drag drop support to the Program Selector drop downs

2024-06-03 22:39:05 +10:00
parent 74066cfdc1
commit 1344c4ffd6
4 changed files with 68 additions and 51 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,8 @@
        "get-installed-apps": "^1.1.0",
        "get-startapps": "^1.0.4",
        "node-fetch": "^2.6.1",
-        "serialport": "^12.0.0"
+        "serialport": "^12.0.0",
+        "vuedraggable": "^4.1.0"
      },
      "devDependencies": {
        "@electron-toolkit/eslint-config": "^1.0.1",
@@ -356,7 +357,6 @@
      "version": "7.24.6",
      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.6.tgz",
      "integrity": "sha512-eNZXdfU35nJC2h24RznROuOpO94h6x8sg9ju0tT9biNtLZ2vuP8SduLqqV+/8+cebSLV9SJEAN5Z3zQbJG/M+Q==",
-      "dev": true,
      "bin": {
        "parser": "bin/babel-parser.js"
      },
@@ -1382,8 +1382,7 @@
    "node_modules/@jridgewell/sourcemap-codec": {
      "version": "1.4.15",
      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
-      "dev": true
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
    },
    "node_modules/@jridgewell/trace-mapping": {
      "version": "0.3.25",
@@ -2084,7 +2083,6 @@
      "version": "3.4.27",
      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.27.tgz",
      "integrity": "sha512-E+RyqY24KnyDXsCuQrI+mlcdW3ALND6U7Gqa/+bVwbcpcR3BRRIckFoz7Qyd4TTlnugtwuI7YgjbvsLmxb+yvg==",
-      "dev": true,
      "dependencies": {
        "@babel/parser": "^7.24.4",
        "@vue/shared": "3.4.27",
@@ -2097,7 +2095,6 @@
      "version": "3.4.27",
      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.27.tgz",
      "integrity": "sha512-kUTvochG/oVgE1w5ViSr3KUBh9X7CWirebA3bezTbB5ZKBQZwR2Mwj9uoSKRMFcz4gSMzzLXBPD6KpCLb9nvWw==",
-      "dev": true,
      "dependencies": {
        "@vue/compiler-core": "3.4.27",
        "@vue/shared": "3.4.27"
@@ -2107,7 +2104,6 @@
      "version": "3.4.27",
      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.27.tgz",
      "integrity": "sha512-nDwntUEADssW8e0rrmE0+OrONwmRlegDA1pD6QhVeXxjIytV03yDqTey9SBDiALsvAd5U4ZrEKbMyVXhX6mCGA==",
-      "dev": true,
      "dependencies": {
        "@babel/parser": "^7.24.4",
        "@vue/compiler-core": "3.4.27",
@@ -2124,7 +2120,6 @@
      "version": "3.4.27",
      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.27.tgz",
      "integrity": "sha512-CVRzSJIltzMG5FcidsW0jKNQnNRYC8bT21VegyMMtHmhW3UOI7knmUehzswXLrExDLE6lQCZdrhD4ogI7c+vuw==",
-      "dev": true,
      "dependencies": {
        "@vue/compiler-dom": "3.4.27",
        "@vue/shared": "3.4.27"
@@ -2148,7 +2143,6 @@
      "version": "3.4.27",
      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.27.tgz",
      "integrity": "sha512-kK0g4NknW6JX2yySLpsm2jlunZJl2/RJGZ0H9ddHdfBVHcNzxmQ0sS0b09ipmBoQpY8JM2KmUw+a6sO8Zo+zIA==",
-      "dev": true,
      "dependencies": {
        "@vue/shared": "3.4.27"
      }
@@ -2157,7 +2151,6 @@
      "version": "3.4.27",
      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.27.tgz",
      "integrity": "sha512-7aYA9GEbOOdviqVvcuweTLe5Za4qBZkUY7SvET6vE8kyypxVgaT1ixHLg4urtOlrApdgcdgHoTZCUuTGap/5WA==",
-      "dev": true,
      "dependencies": {
        "@vue/reactivity": "3.4.27",
        "@vue/shared": "3.4.27"
@@ -2167,7 +2160,6 @@
      "version": "3.4.27",
      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.27.tgz",
      "integrity": "sha512-ScOmP70/3NPM+TW9hvVAz6VWWtZJqkbdf7w6ySsws+EsqtHvkhxaWLecrTorFxsawelM5Ys9FnDEMt6BPBDS0Q==",
-      "dev": true,
      "dependencies": {
        "@vue/runtime-core": "3.4.27",
        "@vue/shared": "3.4.27",
@@ -2178,7 +2170,6 @@
      "version": "3.4.27",
      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.27.tgz",
      "integrity": "sha512-dlAMEuvmeA3rJsOMJ2J1kXU7o7pOxgsNHVr9K8hB3ImIkSuBrIdy0vF66h8gf8Tuinf1TK3mPAz2+2sqyf3KzA==",
-      "dev": true,
      "dependencies": {
        "@vue/compiler-ssr": "3.4.27",
        "@vue/shared": "3.4.27"
@@ -2190,8 +2181,7 @@
    "node_modules/@vue/shared": {
      "version": "3.4.27",
      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.27.tgz",
-      "integrity": "sha512-DL3NmY2OFlqmYYrzp39yi3LDkKxa5vZVwxWdQ3rG0ekuWscHraeIbnI8t+aZK7qhYqEqWKTUdijadunb9pnrgA==",
-      "dev": true
+      "integrity": "sha512-DL3NmY2OFlqmYYrzp39yi3LDkKxa5vZVwxWdQ3rG0ekuWscHraeIbnI8t+aZK7qhYqEqWKTUdijadunb9pnrgA=="
    },
    "node_modules/@xmldom/xmldom": {
      "version": "0.8.10",
@@ -3098,8 +3088,7 @@
    "node_modules/csstype": {
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
    },
    "node_modules/debug": {
      "version": "4.3.4",
@@ -3595,7 +3584,6 @@
      "version": "4.5.0",
      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
-      "dev": true,
      "engines": {
        "node": ">=0.12"
      },
@@ -3991,8 +3979,7 @@
    "node_modules/estree-walker": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
-      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
-      "dev": true
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
    },
    "node_modules/esutils": {
      "version": "2.0.3",
@@ -5080,7 +5067,6 @@
      "version": "0.30.10",
      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.10.tgz",
      "integrity": "sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==",
-      "dev": true,
      "dependencies": {
        "@jridgewell/sourcemap-codec": "^1.4.15"
      }
@@ -5220,7 +5206,6 @@
      "version": "3.3.7",
      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
-      "dev": true,
      "funding": [
        {
          "type": "github",
@@ -5448,8 +5433,7 @@
    "node_modules/picocolors": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
-      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==",
-      "dev": true
+      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew=="
    },
    "node_modules/plist": {
      "version": "3.1.0",
@@ -5469,7 +5453,6 @@
      "version": "8.4.38",
      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
      "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
-      "dev": true,
      "funding": [
        {
          "type": "opencollective",
@@ -5985,6 +5968,11 @@
        "npm": ">= 3.0.0"
      }
    },
+    "node_modules/sortablejs": {
+      "version": "1.14.0",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.14.0.tgz",
+      "integrity": "sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w=="
+    },
    "node_modules/source-map": {
      "version": "0.6.1",
      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -5998,7 +5986,6 @@
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
-      "dev": true,
      "engines": {
        "node": ">=0.10.0"
      }
@@ -6304,7 +6291,7 @@
      "version": "5.4.5",
      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.4.5.tgz",
      "integrity": "sha512-vcI4UpRgg81oIRUFwR0WSIHKt11nJ7SAVlYNIu+QpqeyXP+gpQJy/Z4+F0aGxSE4MqwjyXvW/TzgkLAx2AGHwQ==",
-      "dev": true,
+      "devOptional": true,
      "bin": {
        "tsc": "bin/tsc",
        "tsserver": "bin/tsserver"
@@ -6857,7 +6844,6 @@
      "version": "3.4.27",
      "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.27.tgz",
      "integrity": "sha512-8s/56uK6r01r1icG/aEOHqyMVxd1bkYcSe9j8HcKtr/xTOFWvnzIVTehNW+5Yt89f+DLBe4A569pnZLS5HzAMA==",
-      "dev": true,
      "dependencies": {
        "@vue/compiler-dom": "3.4.27",
        "@vue/compiler-sfc": "3.4.27",
@@ -6910,6 +6896,17 @@
        "node": ">=10"
      }
    },
+    "node_modules/vuedraggable": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.1.0.tgz",
+      "integrity": "sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==",
+      "dependencies": {
+        "sortablejs": "1.14.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.1"
+      }
+    },
    "node_modules/which": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
--- a/package.json
+++ b/package.json
@@ -23,7 +23,8 @@
    "get-installed-apps": "^1.1.0",
    "get-startapps": "^1.0.4",
    "node-fetch": "^2.6.1",
-    "serialport": "^12.0.0"
+    "serialport": "^12.0.0",
+    "vuedraggable": "^4.1.0"
  },
  "devDependencies": {
    "@electron-toolkit/eslint-config": "^1.0.1",
--- a/src/renderer/src/App.vue
+++ b/src/renderer/src/App.vue
@@ -4,6 +4,8 @@ import ProgramSelector from './components/ProgramSelector.vue'
 import { onMounted } from 'vue'
 import { ref } from 'vue'
 import * as logTimestamp from 'log-timestamp'
+import draggable from 'vuedraggable'
+// import MovieCard from './components/MovieCard.vue'

 // const movies = ref([])
 // const apiKey = 'a0eb411ca9c81896004dce1d27a7245b'
@@ -26,13 +28,13 @@ const getSerialPorts = async () => {
  console.log(`the returned serial ports are ${serialPorts.value}`)
 }

-const getTrendingMovies = (category) => {
-  return fetch(`https://api.themoviedb.org/3/trending/movie/${category}?api_key=${apiKey}`)
-    .then((response) => response.json())
-    .then((data) => {
-      movies.value = data.results
-    })
-}
+// const getTrendingMovies = (category) => {
+//   return fetch(`https://api.themoviedb.org/3/trending/movie/${category}?api_key=${apiKey}`)
+//     .then((response) => response.json())
+//     .then((data) => {
+//       movies.value = data.results
+//     })
+// }

 async function getInstalledApps() {
  installedApps.value = await window.electron.ipcRenderer.invoke('getInstalledApps')
@@ -75,27 +77,41 @@ onMounted(() => {
    <button type="button" class="col-auto" @click="getSerialPorts">Load config</button>
  </div>
  <div>{{ configuration }}</div>
-  <div>
+  <!-- <div>
    <div v-for="(count, i) in programCounter" :key="i">
      <ProgramSelector
-        v-model="programCounter[i]"
        :installed-apps="installedApps"
+        :selected-app="count"
+        @update-app="programCounter[i] = $event"
        @delete-row="deleteProgramRow(i)"
      />
    </div>
+  </div> -->
+  <draggable v-model="programCounter" >
+    <template #item="{ element, index }">
+      <div>
+        <ProgramSelector
+          :installed-apps="installedApps"
+          :selected-app="element"
+          @update-app="programCounter[index] = $event"
+          @delete-row="deleteProgramRow(index)"
+        />
      </div>
+    </template>
+  </draggable>
+
  <div class="row mt-2">
    <button class="col-auto" @click="addProgram">Add</button>
    <button class="col-auto" click="removeProgram">Remove</button>
  </div>

  <div class="row">
-    <div class="col-auto"> COM Port</div>
-    <div class="col-auto"> {{ serialPortSelection }}</div>
+    <div class="col-auto">COM Port</div>
+    <div class="col-auto">{{ serialPortSelection }}</div>
  </div>
  <div>{{ programCounter }}</div>

-  <!-- 
+<!--   
  <div class="container">
    <div class="text-center">
      <h2 class="text-center mt-5">Trending Movies 🍿</h2>
@@ -109,8 +125,10 @@ onMounted(() => {
  </div>

  <div v-if="movies.length > 0" class="row">
-    <div v-for="(movie, i) in movies.slice(0, 2)" :key="i" class="col-md-4">
-      <MovieCard :movie="movie" />
-    </div>
+    <draggable v-model="movies">
+      <template #item="{ element }">
+      <MovieCard :movie="element" />
+      </template>
+    </draggable>
  </div> -->
 </template>
--- a/src/renderer/src/components/ProgramSelector.vue
+++ b/src/renderer/src/components/ProgramSelector.vue
@@ -1,25 +1,26 @@
 <script setup>
 import { onUnmounted, ref } from 'vue'

-defineEmits(['delete-row'])
+defineEmits(['delete-row', 'update-app'])

-const props = defineProps({ installedApps: Object })
-const model = defineModel()
+const props = defineProps({ installedApps: Object, selectedApp: String })
+// const model = defineModel()
 console.log(props.installedApps)
-console.log(model)
-
+// console.log(model)
 </script>

 <template>
  <div class="row mt-2 d-flex align-items-center">
    <div class="col-auto">Program</div>
    <div class="col-auto">
-      <select v-model="model" class="form-select">
+      <select class="form-select" @change="$emit('update-app', $event.target.value)">
+        <option>select an app</option>
        <option
          v-for="(app, i) in props.installedApps"
          :key="i"
          class="col-auto mt-3"
          :value="app.appid"
+          :selected="app.appid == selectedApp"
        >
          {{ app.name }}
        </option>
@@ -27,5 +28,5 @@ console.log(model)
    </div>
    <div class="col-auto"><i class="fas fa-trash-alt" @click="$emit('delete-row')"></i></div>
  </div>
-  <div>{{ selected }}</div>
+  <!-- <div>{{ selectedApp }}</div> -->
 </template>