add Vue UI [wip]

unwind-ui/src/App.vue

@@ -0,0 +1,219 @@
+<template>
+  <section class="section">
+    <div class="container">
+      <user-login
+        class="is-justify-content-end mb-6"
+        @login="(login) => (user = login)"
+      />
+
+      <div class="field has-addons">
+        <div class="control is-expanded">
+          <input
+            class="input is-loading"
+            type="text"
+            placeholder="Movie title"
+            v-model="query"
+            @change="search"
+          />
+        </div>
+        <p class="control">
+          <span class="select">
+            <select v-model="media_type" @change="search">
+              <option value="">(any type)</option>
+              <option v-for="t in media_types" :value="t">{{ t }}</option>
+            </select>
+          </span>
+        </p>
+        <div class="control">
+          <a class="button is-info"
+        :disabled="!active"
+          > Search </a>
+        </div>
+      </div>
+
+      <movie-list :items="items" @reachBottom="loadMore" />
+
+      <footer class="footer" v-if="is_end">
+        <p class="subtitle content has-text-centered is-italic">～ fin ～</p>
+      </footer>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue"
+import config from "./config.ts"
+import { is_object } from "./utils.ts"
+
+const media_types = [
+  "Movie",
+  "Radio Episode",
+  "Radio Series",
+  "Short",
+  "TV Episode",
+  "TV Mini Series",
+  "TV Movie",
+  "TV Series",
+  "TV Short",
+  "TV Special",
+  "Video",
+  "Video Game",
+]
+
+function clean_obj(o) {
+  return Object.fromEntries(Object.entries(o).filter(([k, v]) => v))
+}
+
+function api_url(resource, params = []) {
+  const url = new URL(resource, config.api_url)
+
+  if (is_object(params)) {
+    params = clean_obj(params)
+  }
+
+  if (is_object(params) || params.length) {
+    url.search = new URLSearchParams(params)
+  }
+
+  return url
+}
+
+function set_view_params(params) {
+  history.replaceState(null, "", "#" + new URLSearchParams(clean_obj(params)))
+}
+
+function view_params() {
+  const fragment = (window.location.hash || "").replace(/^#/, "")
+  const params = new URLSearchParams(fragment)
+  return {
+    query: params.get("query") || "",
+    type: params.get("type") || "",
+  }
+}
+
+async function req(url, opts = {}, { user_id = "", secret = "" }, data = null) {
+  opts.headers = opts.headers || {}
+
+  if (data !== null) {
+    opts.body = JSON.stringify(data)
+    opts.headers["Content-Type"] = "application/json"
+  }
+
+  if (secret) {
+    opts.headers["Authorization"] = `Bearer ${user_id} ${secret}`
+    opts.mode = "cors"
+    opts.credentials = "include"
+  }
+
+  const resp = await window.fetch(url, opts)
+  return await resp.json()
+}
+
+async function get(resource, params = [], user = {}) {
+  const url = api_url(resource, params)
+  const opts = {}
+  return await req(url, opts, user)
+}
+
+async function patch(resource, params = [], user = {}, data = null) {
+  const url = api_url(resource, params)
+  const opts = { method: "PATCH" }
+  return await req(url, opts, user, data)
+}
+
+function debounce_async(ms, func) {
+  let abort
+
+  return async (...args) => {
+    if (abort) {
+      abort()
+    }
+
+    return new Promise((resolve, reject) => {
+      const timer = setTimeout(() => {
+        resolve(func(...args))
+      }, ms)
+
+      abort = () => {
+        reject("Function call aborted, replaced by a later call.")
+        clearTimeout(timer)
+        abort = null
+      }
+    })
+  }
+}
+
+const debounced_get = debounce_async(100, get)
+
+export default defineComponent({
+  data: () => ({
+    query: "",
+    items: [],
+    user: { user_id: "", secret: "" },
+    page: 1,
+    is_end: false,
+    media_types,
+    media_type: "",
+    active: false,
+  }),
+  mounted() {
+    const { query, type } = view_params()
+    this.query = query
+    this.media_type = media_types.includes(type) ? type : ""
+  },
+  methods: {
+    async search() {
+      this.active = true
+      set_view_params({ query: this.query, type: this.media_type })
+
+      if (!this.query) {
+        return
+      }
+
+      this.page = 1
+      this.is_end = false
+      this.items = []
+      await this.loadMore()
+    },
+    async loadMore() {
+      this.active = false
+
+      if (!this.query || this.is_end) {
+        return
+      }
+
+      const per_page = 100
+      const media_type = this.media_type === "" ? null : this.media_type
+      const more = await debounced_get(
+        "movies",
+        {
+          title: this.query,
+          per_page,
+          include_unrated: true,
+          page: this.page,
+          media_type,
+          user_id: this.user.user_id,
+        },
+        this.user,
+      )
+      this.items = this.items.concat(more)
+
+      if (more.length < per_page) {
+        this.is_end = true
+      } else {
+        this.page += 1
+      }
+    },
+  },
+})
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>