added plugins/store.ts using "pinia" to define input mode

2023-11-01 23:58:09 +00:00 · 2023-11-01 23:58:09 +00:00 · a0b576e14d
commit a0b576e14d
parent 19411351dd
7 changed files with 103 additions and 24 deletions
--- a/ui/package.json
+++ b/ui/package.json
@ -34,6 +34,7 @@
    "eslint": "^8.49.0",
    "eslint-plugin-vue": "^9.17.0",
    "luxon": "^3.4.3",
+    "pinia": "^2.1.7",
    "sass": "^1.67.0",
    "sass-loader": "^13.3.2",
    "typescript": "~5.2.2",
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@ -1,5 +1,5 @@
 <template>
-  <section class="hero is-small is-primary" style="overflow-x: auto">
+  <section class="hero is-small is-primary">
    <div class="hero-body">
      <h1 class="title is-uppercase">{{ title }}</h1>
      <h2 class="subtitle">{{ subtitle }}</h2>
@ -21,6 +21,7 @@
        <p v-html="footer" />
      </div>
      <div class="level-right">
+        <TouchButton class="level-item tag is-warning" />
        <AdminButton
          class="level-item tag is-link is-outlined"
          v-model="is_admin"
@ -35,12 +36,14 @@ import { Options, Vue } from "vue-class-component";

 import AdminView from "./components/admin/AdminView.vue";
 import AdminButton from "./components/AdminButton.vue";
+import TouchButton from "./components/TouchButton.vue";
 import UserView from "./components/UserView.vue";

@Options({
  components: {
    AdminView,
    AdminButton,
+    TouchButton,
    UserView,
  },
 })
--- a/ui/src/components/Calendar.vue
+++ b/ui/src/components/Calendar.vue
@ -2,27 +2,13 @@
  <MultiModal @handle="modal_handle" />

  <figure>
-    <div class="level">
-      <div class="level-left">
-        <figcaption class="level-item has-text-primary-dark">
+    <figcaption class="has-text-primary-dark">
      {{ figure_caption }}
      <template v-if="next_door !== null">
        <br />
        Zeit zum nächsten Türchen: <CountDown :millis="next_door" />
      </template>
    </figcaption>
-      </div>
-      <div class="level-right">
-        <div class="level-item">
-          <BulmaButton
-            class="tag is-warning is-outlined"
-            text="Türchen anzeigen"
-            :icon="'fa-solid fa-toggle-' + (show_doors ? 'on' : 'off')"
-            @click.left="show_doors = !show_doors"
-          />
-        </div>
-      </div>
-    </div>
    <div class="image is-unselectable">
      <img :src="$advent22.api_url('user/background_image')" />
      <ThouCanvas>
@ -30,7 +16,7 @@
          v-for="(door, index) in doors"
          :key="`door-${index}`"
          :door="door"
-          :visible="show_doors"
+          :visible="store.is_touch_device"
          @click="door_click(door.day)"
          @touch="door_hover(door.day)"
          @mouseover="door_hover(door.day)"
@ -44,6 +30,7 @@

 <script lang="ts">
 import { Door } from "@/lib/door";
+import { advent22Store } from "@/plugins/store";
 import { Options, Vue } from "vue-class-component";

 import CountDown from "./CountDown.vue";
@ -67,8 +54,8 @@ import ThouCanvas from "./calendar/ThouCanvas.vue";
 export default class extends Vue {
  public readonly doors!: Door[];
  private readonly idle_caption = "Finde die Türchen auf dem Adventskalender!";
+  public readonly store = advent22Store();

-  public show_doors = window.matchMedia("(any-hover: none)").matches;
  private multi_modal?: MultiModal;
  public figure_caption = this.idle_caption;
  public next_door: number | null = null;
--- a/ui/src/components/TouchButton.vue
+++ b/ui/src/components/TouchButton.vue
@ -0,0 +1,26 @@
+<template>
+  <BulmaButton
+    :icon="
+      'fa-solid fa-' +
+      (store.is_touch_device ? 'hand-pointer' : 'arrow-pointer')
+    "
+    text="Eingabemodus"
+    @click.left="store.toggle_touch_device"
+  />
+</template>
+
+<script lang="ts">
+import { advent22Store } from "@/plugins/store";
+import { Options, Vue } from "vue-class-component";
+
+import BulmaButton from "./bulma/Button.vue";
+
+@Options({
+  components: {
+    BulmaButton,
+  },
+})
+export default class extends Vue {
+  public readonly store = advent22Store();
+}
+</script>
--- a/ui/src/main.ts
+++ b/ui/src/main.ts
@ -1,5 +1,6 @@
 import { Advent22Plugin } from "@/plugins/advent22";
 import { FontAwesomePlugin } from "@/plugins/fontawesome";
+import { createPinia } from "pinia";
 import { createApp } from "vue";
 import App from "./App.vue";

@ -8,5 +9,6 @@ import "@/main.scss";
 const app = createApp(App);
 app.use(Advent22Plugin);
 app.use(FontAwesomePlugin);
+app.use(createPinia());

 app.mount("#app");
--- a/ui/src/plugins/store.ts
+++ b/ui/src/plugins/store.ts
@ -0,0 +1,42 @@
+// import { Credentials } from "@/lib/api";
+// import { AxiosBasicCredentials } from "axios";
+import { acceptHMRUpdate, defineStore } from "pinia";
+
+const check_touch_device = () => window.matchMedia("(any-hover: none)").matches;
+// const empty_creds = () => ["", ""] as Credentials;
+
+export const advent22Store = defineStore({
+  id: "advent22",
+
+  state: () => ({
+    // api_creds: empty_creds(),
+    is_touch_device: check_touch_device(),
+  }),
+
+  // getters: {
+  //   axios_creds: (state): AxiosBasicCredentials => {
+  //     const [username, password] = state.api_creds;
+  //     return { username: username, password: password };
+  //   },
+  // },
+
+  actions: {
+    // set_api_creds(creds: Credentials = empty_creds()): void {
+    //   this.api_creds = creds;
+    // },
+
+    set_touch_device(state: boolean = check_touch_device()): void {
+      this.is_touch_device = state;
+    },
+
+    toggle_touch_device(): void {
+      this.is_touch_device = !this.is_touch_device;
+    },
+  },
+});
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept(
+    acceptHMRUpdate(advent22Store, import.meta.webpackHot),
+  );
+}
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@ -1854,6 +1854,11 @@
  optionalDependencies:
    prettier "^1.18.2 || ^2.0.0"

+"@vue/devtools-api@^6.5.0":
+  version "6.5.1"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.5.1.tgz#7f71f31e40973eeee65b9a64382b13593fdbd697"
+  integrity sha512-+KpckaAQyfbvshdDW5xQylLni1asvNSGme1JFs8I1+/H5pHEhqUKMEQD/qn3Nx5+/nycBq11qAEi8lk+LXI2dA==
+
 "@vue/eslint-config-typescript@^12.0.0":
  version "12.0.0"
  resolved "https://registry.yarnpkg.com/@vue/eslint-config-typescript/-/eslint-config-typescript-12.0.0.tgz#0ce22d97af5e4155f3f2e7b21a48cfde8a6f3365"
@ -5486,6 +5491,14 @@ picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1:
  resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==

+pinia@^2.1.7:
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/pinia/-/pinia-2.1.7.tgz#4cf5420d9324ca00b7b4984d3fbf693222115bbc"
+  integrity sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==
+  dependencies:
+    "@vue/devtools-api" "^6.5.0"
+    vue-demi ">=0.14.5"
+
 pkg-dir@^4.1.0:
  version "4.2.0"
  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3"
@ -6835,6 +6848,11 @@ vue-component-type-helpers@1.8.4:
  resolved "https://registry.yarnpkg.com/vue-component-type-helpers/-/vue-component-type-helpers-1.8.4.tgz#302d85fac912519cdf0dd2fb51402e5215d85628"
  integrity sha512-6bnLkn8O0JJyiFSIF0EfCogzeqNXpnjJ0vW/SZzNHfe6sPx30lTtTXlE5TFs2qhJlAtDFybStVNpL73cPe3OMQ==

+vue-demi@>=0.14.5:
+  version "0.14.6"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.6.tgz#dc706582851dc1cdc17a0054f4fec2eb6df74c92"
+  integrity sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==
+
 vue-eslint-parser@^9.3.1:
  version "9.3.1"
  resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-9.3.1.tgz#429955e041ae5371df5f9e37ebc29ba046496182"