RegionalSuccess.vue

<script setup>
import { watch, ref } from "vue";

import COLORS from "../../colors";
import PEOPLE from "../../people";
import TEMPLATES from "../../templates";
import DEFAULT_CONTRACTOR from "../../contractors";
import {
  loadFonts,
  loadCanvasStorage,
  setCanvasStorage,
  updateAutoRedrawStorage,
  toRawDeep,
} from "../../utils";
import {
  generateDefaultLogos,
  LOGO_POSITIONS,
  generateLogoPositions,
} from "../../logos";

import Canvas from "../../components/canvas/Canvas.vue";
import redraw from "./canvas";

import Navbar from "../../components/Navbar.vue";
import MainContainer from "../../components/MainContainer.vue";
import ImageInput from "../../components/inputs/ImageInput.vue";
import LongTextInput from "../../components/inputs/text/LongTextInput.vue";
import ShortTextInput from "../../components/inputs/text/ShortTextInput.vue";
import EmojiInput from "../../components/inputs/EmojiInput.vue";
import InputSeparator from "../../components/inputs/InputSeparator.vue";
import SelectInput from "../../components/inputs/SelectInput.vue";
import MultipleColorPicker from "../../components/inputs/colors/MultipleColorPicker.vue";
import ReloadButton from "../../components/reload/ReloadButton.vue";
import AutoReloadCheckbox from "../../components/reload/AutoReloadCheckbox.vue";
</script>

<script>
await loadFonts([
  "12px Bebas Neue",
  "12px Roboto Condensed",
  "bold 12px Roboto Condensed",
]);

export default {
  components: {
    Canvas,
    Navbar,
    MainContainer,
    ImageInput,
    LongTextInput,
    ShortTextInput,
    EmojiInput,
    SelectInput,
    InputSeparator,
    MultipleColorPicker,
  },
  data() {
    const predefinedColors = {
      base: {
        name: "Základní barvy",
        colors: {
          background: COLORS.white,
          baseText: COLORS.black,
          highlight: COLORS.yellow1,
          highlightedText: COLORS.black,
          contractedByText: COLORS.gray1,
          arrow: COLORS.yellow1,
        },
      },
    };

    return {
      mainText: null,

      mainImage: null,

      firstRow: null,
      firstEmoji: null,
      secondRow: null,
      secondEmoji: null,
      thirdRow: null,
      thirdEmoji: null,
      fourthRow: null,
      fourthEmoji: null,

      contractedBy: DEFAULT_CONTRACTOR,

      logoImage: null,
      logoPosition: LOGO_POSITIONS.top_right,
      logoOptions: generateLogoPositions(["top_right", "top_left"]),
      predefinedLogoImages: generateDefaultLogos("defaultLight"),

      nameText: null,
      nameTextDesc: null,

      colorLabels: {
        background: "Pozadí",
        baseText: "Text",
        highlight: "Pozadí zvýrazněného textu",
        highlightedText: "Zvýrazněný text",
        arrow: "Šipka",
      },

      predefinedColors: predefinedColors,
      colors: predefinedColors.base.colors,
      autoRedraw: false,
    };
  },
  async created() {
    await loadCanvasStorage(this);
  },
  methods: {
    async reloadCanvasProperties() {
      const canvasProperties = {
        mainImage: this.mainImage,
        mainText: this.mainText,
        firstRow: this.firstRow,
        firstEmoji: this.firstEmoji,
        secondRow: this.secondRow,
        secondEmoji: this.secondEmoji,
        thirdRow: this.thirdRow,
        thirdEmoji: this.thirdEmoji,
        fourthRow: this.fourthRow,
        fourthEmoji: this.fourthEmoji,
        logoPosition: this.logoPosition,
        logoImage: this.logoImage,
        nameText: this.nameText,
        nameTextDesc: this.nameTextDesc,
        contractedBy: this.contractedBy,
        colors: this.colors,
      };

      if (canvasProperties.mainText) {
        window.fileName = canvasProperties.mainText;
      }

      await this.$refs.canvas.redraw(canvasProperties);

      let canvasPropertiesToSave = structuredClone(toRawDeep(canvasProperties));
      delete canvasPropertiesToSave.colors;

      setCanvasStorage(canvasPropertiesToSave);
    },
  },
  mounted() {
    this.$watch(
      (vm) => [
        vm.mainText,
        vm.mainImage,
        vm.firstRow,
        vm.firstEmoji,
        vm.secondRow,
        vm.secondEmoji,
        vm.thirdRow,
        vm.thirdEmoji,
        vm.fourthRow,
        vm.fourthEmoji,
        vm.logoPosition,
        vm.logoImage,
        vm.nameText,
        vm.nameTextDesc,
        vm.contractedBy,
        vm.colors,
      ],
      async (value) => {
        if (this.autoRedraw) {
          await this.reloadCanvasProperties();
        }
      },
      {
        immediate: true,
        deep: true,
      },
    );

    this.$watch(
      (vm) => [vm.autoRedraw],
      async (value) => {
        updateAutoRedrawStorage(this.autoRedraw);

        if (this.autoRedraw) {
          await this.reloadCanvasProperties();
        }
      },
    );
  },
};
</script>

<template>
  <header>
    <Navbar :defaultTemplate="TEMPLATES.regional_success"></Navbar>
  </header>
  <main>
    <MainContainer>
      <template v-slot:left>
        <Canvas
          ref="canvas"
          :redrawFunction="redraw"
          width="1080"
          height="1350"
        />
      </template>

      <template v-slot:right>
        <ReloadButton :parentRefs="$refs" @click="reloadCanvasProperties" />
        <AutoReloadCheckbox v-model="autoRedraw" />

        <ImageInput
          name="Obrázek"
          v-model="mainImage"
          :important="true"
          zIndex="11"
        />

        <LongTextInput
          name="Nadpis"
          v-model="mainText"
          :highlightable="true"
          :important="true"
          zIndex="10"
        />

        <LongTextInput
          name="Řádek 1"
          v-model="firstRow"
          :important="true"
          zIndex="7"
        />
        <EmojiInput
          name="Emoji 1"
          v-model="firstEmoji"
          :important="true"
          zIndex="10"
        />

        <LongTextInput
          name="Řádek 2"
          v-model="secondRow"
          :important="true"
          zIndex="6"
        />
        <EmojiInput
          name="Emoji 2"
          v-model="secondEmoji"
          :important="true"
          zIndex="9"
        />

        <LongTextInput
          name="Řádek 3"
          v-model="thirdRow"
          :important="true"
          zIndex="6"
        />
        <EmojiInput
          name="Emoji 3"
          v-model="thirdEmoji"
          :important="true"
          zIndex="8"
        />

        <LongTextInput
          name="Řádek 4"
          v-model="fourthRow"
          :important="true"
          zIndex="6"
        />
        <EmojiInput
          name="Emoji 4"
          v-model="fourthEmoji"
          :important="true"
          zIndex="7"
        />

        <InputSeparator />

        <LongTextInput
          name="Jméno / název"
          v-model="nameText"
          :highlightable="true"
          zIndex="6"
        />

        <LongTextInput name="Popis" v-model="nameTextDesc" zIndex="6" />

        <InputSeparator />

        <ImageInput
          name="Obrázek loga"
          v-model="logoImage"
          :important="false"
          :predefinedImages="predefinedLogoImages"
          :mustSelectPredefinedImage="true"
          :disableImageInput="true"
          zIndex="7"
        />

        <SelectInput
          name="Pozice loga"
          :options="logoOptions"
          v-model="logoPosition"
          zIndex="6"
        />

        <ShortTextInput
          name="Zadavatel a zpracovatel"
          v-model="contractedBy"
          :defaultValue="DEFAULT_CONTRACTOR"
          :important="false"
          zIndex="5"
        />
      </template>
    </MainContainer>
  </main>
</template>

<style>
@import "vue-select/dist/vue-select.css";
</style>