✨ Submit video number list

backend/__init__.py

@@ -1,4 +1,4 @@
-from bottle import request, response, Bottle
+from bottle import request, response, Bottle, HTTPResponse
 from manager import Manager
 from json import dumps
 from pathlib import Path
@@ -9,7 +9,8 @@ app = Bottle()
 
 @app.post("/video")
 def add_videos():
-    manager.add_videos_by_number(request.json)
+    nvlist = request.json["nvlist"].split()
+    manager.add_videos_by_number(nvlist)
     return "OK"
 
 

frontend/package-lock.json

@@ -8,9 +8,11 @@
       "name": "frontend",
       "version": "0.0.0",
       "dependencies": {
+        "axios": "^1.3.4",
         "bootstrap": "^5.3.0-alpha1",
         "bootstrap-icons": "^1.10.3",
-        "vue": "^3.2.45"
+        "vue": "^3.2.45",
+        "vue-axios": "^3.5.2"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^4.0.0",
@@ -505,6 +507,21 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.47.tgz",
       "integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ=="
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
+    "node_modules/axios": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.3.4.tgz",
+      "integrity": "sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ==",
+      "dependencies": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/bootstrap": {
       "version": "5.3.0-alpha1",
       "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.0-alpha1.tgz",
@@ -528,11 +545,30 @@
       "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.10.3.tgz",
       "integrity": "sha512-7Qvj0j0idEm/DdX9Q0CpxAnJYqBCFCiUI6qzSPYfERMcokVuV9Mdm/AJiVZI8+Gawe4h/l6zFcOzvV7oXCZArw=="
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/csstype": {
       "version": "2.6.21",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz",
       "integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w=="
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.16.17",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.16.17.tgz",
@@ -575,6 +611,38 @@
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
+      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
@@ -627,6 +695,25 @@
         "sourcemap-codec": "^1.4.8"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
@@ -672,6 +759,11 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/resolve": {
       "version": "1.22.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
@@ -799,6 +891,15 @@
         "@vue/server-renderer": "3.2.47",
         "@vue/shared": "3.2.47"
       }
+    },
+    "node_modules/vue-axios": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/vue-axios/-/vue-axios-3.5.2.tgz",
+      "integrity": "sha512-GP+dct7UlAWkl1qoP3ppw0z6jcSua5/IrMpjB5O8bh089iIiJ+hdxPYH2NPEpajlYgkW5EVMP95ttXWdas1O0g==",
+      "peerDependencies": {
+        "axios": "*",
+        "vue": "^3.0.0 || ^2.0.0"
+      }
     }
   }
 }

frontend/package.json

@@ -9,9 +9,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.3.4",
     "bootstrap": "^5.3.0-alpha1",
     "bootstrap-icons": "^1.10.3",
-    "vue": "^3.2.45"
+    "vue": "^3.2.45",
+    "vue-axios": "^3.5.2"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.0.0",

frontend/src/App.vue

@@ -1,9 +1,15 @@
 <script setup>
+import { ref } from "vue";
+
 import "bootstrap/dist/css/bootstrap.css";
 import "bootstrap-icons/font/bootstrap-icons.css";
 import AudioDownload from "./views/AudioDownload.vue";
+import InputVideoNumber from "./views/InputVideoNumber.vue";
+
+const stage = ref(0);
 </script>
 
 <template>
-  <AudioDownload></AudioDownload>
+  <InputVideoNumber v-if="stage == 0" @change-stage="stage++" />
+  <AudioDownload v-else />
 </template>

frontend/src/main.js

@@ -1,4 +1,10 @@
 import { createApp } from "vue";
 import App from "./App.vue";
+import axios from "axios";
+import VueAxios from "vue-axios";
 
-createApp(App).mount("#app");
+const app = createApp(App);
+app.use(VueAxios, axios);
+app.provide("axios", app.config.globalProperties.axios);
+
+app.mount("#app");

frontend/src/views/InputVideoNumber.vue

@@ -0,0 +1,33 @@
+<script setup>
+import { ref, onMounted, inject } from "vue";
+
+const emit = defineEmits(["change-stage"]);
+
+const input = ref(null);
+const nvlist = ref("");
+
+const axios = inject("axios");
+
+onMounted(() => {
+  input.value.focus();
+});
+
+function sendNVList() {
+  axios.post("http://localhost:8000/video", { nvlist: nvlist.value });
+  emit("change-stage");
+}
+</script>
+
+<template>
+  <div class="container-fluid vh-100 bg-body-secondary d-flex flex-column p-3">
+    <textarea
+      ref="input"
+      v-model="nvlist"
+      class="form-control form-control-lg flex-grow-1"
+      placeholder="Input AV/BV numbers here."
+    ></textarea>
+    <button @click="sendNVList" type="button" class="btn btn-primary mt-3">
+      OK
+    </button>
+  </div>
+</template>