✨ Submit video number list

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>