measuring-stations/src/App.vue

<template>
  <h1 class="text-center text-2xl py-2 font-bold">Ständeansicht</h1>
  <div class="absolute top-2 right-2 flex flex-row gap-2">
    <span title="Anleitung">
      <BookOpenIcon class="h-8 w-8 text-black cursor-pointer" @click="handbook = !handbook" />
    </span>
    <span title="Ansicht exportieren">
      <DocumentArrowDownIcon class="h-8 w-8 text-black cursor-pointer" @click="exportData" />
    </span>
    <span title="Ansicht importieren">
      <DocumentArrowUpIcon
        class="h-8 w-8 text-black cursor-pointer"
        @click="($refs.fileImport as HTMLInputElement).click()"
      /><input class="!hidden" type="file" ref="fileImport" @change="importData" />
    </span>
    <span title="Einstellungen">
      <Cog6ToothIcon class="h-8 w-8 text-black cursor-pointer" @click="settings = true" />
    </span>
    <span title="neu erstellen">
      <PlusIcon class="h-8 w-8 text-black cursor-pointer" @click="popup = true" />
    </span>
  </div>
  <hr />
  <div class="w-full h-full overflow-y-scroll">
    <handbookPage v-if="handbook" @close="handbook = false" />
    <div
      v-else
      class="w-full grid auto-rows-auto gap-4 p-4"
      :class="colcount == 0 ? 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4' : ''"
      :style="colcount == 0 ? '' : `grid-template-columns: repeat(${colcount}, minmax(0, 1fr));`"
    >
      <statistic v-for="item in items" :key="item.id" :id="item.id" />
    </div>
  </div>

  <div
    v-if="popup"
    @click="popup = false"
    class="absolute h-full w-full bg-black/40 z-20 flex justify-center items-center"
  >
    <form
      ref="form"
      @submit.prevent="submitForm"
      @click.stop
      class="relative w-96 h-auto bg-white flex flex-col gap-2 rounded-md p-4"
    >
      <XMarkIcon class="h-5 w-5 text-black cursor-pointer absolute top-2 right-2" @click="popup = false" />
      <h1 class="text-center text-lg">neuen Eintrag</h1>
      <div class="flex flex-col">
        <label for="title">Titel</label>
        <input id="title" type="text" class="w-full" required />
      </div>
      <div class="flex flex-col">
        <label for="img">Bildlink</label>
        <input id="img" type="text" class="w-full" required />
      </div>
      <button primary>erstellen</button>
    </form>
  </div>

  <div
    v-if="settings"
    @click="settings = false"
    class="absolute h-full w-full bg-black/40 z-20 flex justify-center items-center"
  >
    <form
      ref="formsettings"
      @submit.prevent="submitFormSettings"
      @click.stop
      class="relative w-96 h-auto bg-white flex flex-col gap-2 rounded-md p-4"
    >
      <XMarkIcon class="h-5 w-5 text-black cursor-pointer absolute top-2 right-2" @click="settings = false" />
      <h1 class="text-center text-lg">Einstellungen</h1>
      <div class="flex flex-col">
        <label for="colcount">Spaltenzahl (0 = automatisch)</label>
        <input id="colcount" type="number" class="w-full" min="0" required :value="colcount" />
      </div>
      <button primary>speichern</button>
    </form>
  </div>
</template>

<script setup lang="ts">
import { defineComponent } from "vue";
import { mapState, mapActions } from "pinia";
import statistic from "./components/statistic.vue";
import handbookPage from "./components/handbook.vue";
import { useDataStorage } from "./stores/dataStorage";
import { PlusIcon, Cog6ToothIcon, XMarkIcon } from "@heroicons/vue/24/solid";
import { DocumentArrowDownIcon, DocumentArrowUpIcon, BookOpenIcon } from "@heroicons/vue/24/outline";
</script>

<script lang="ts">
export default defineComponent({
  data() {
    return {
      popup: false,
      settings: false,
      handbook: false,
    };
  },
  computed: {
    ...mapState(useDataStorage, ["items", "colcount"]),
  },
  mounted() {
    this.load();
  },
  methods: {
    ...mapActions(useDataStorage, ["create", "load", "saveSettings", "exportData", "importData"]),
    submitForm(form: any) {
      let data = form.target.elements;
      this.create(data.title.value, data.img.value);
      (this.$refs.form as HTMLFormElement).reset();
      this.popup = false;
    },
    submitFormSettings(form: any) {
      let data = form.target.elements;
      this.saveSettings({ colcount: parseInt(data.colcount.value) });
      (this.$refs.formsettings as HTMLFormElement).reset();
      this.settings = false;
    },
  },
});
</script>