ldc-showroom/components/layout/AppFooter.vue

<template>
  <footer
    v-if="brands.length > 1 || versions.isDebug"
    id="footer"
    ref="footer"
    class="container-fluid flex-grow-0"
    :style="`background-color: ${activeRange && brandWithMultipleRanges ? activeRange.color : activeBrand?.color} !important`"
  >
    <div
      v-if="brands.length > 1"
      class="row"
    >
      <div class="col-12 col-md-4 d-flex justify-content-center align-items-center">
        <span
          class="fw-bold d-block px-5"
          :style="{
            'color': activeRange && brandWithMultipleRanges ? getContrastYIQ(activeRange.color) : (activeBrand ? getContrastYIQ(activeBrand.color) : 'inherit')
          }"
        >
          {{ transField(settings, 'footer_phrase') }}
        </span>
      </div>
      <div class="col col-md-8">
        <Swiper
          class="z-0"
          :scrollbar="{
            hide: true,
          }"
          :modules="modules"
          :space-between="30"
          :breakpoints="{
            '300': {
              slidesPerView: 2,
              spaceBetween: 20,
            },
            '560': {
              slidesPerView: 4,
              spaceBetween: 40,
            },
          }"
        >
          <SwiperSlide v-for="(brand, brandIndex) of brands" :key="brandIndex">
            <NuxtLinkLocale
              class="swiper-slide"
              :to="`/brands/${transField(brand, 'slug')}`"
              data-bs-toggle="tooltip"
              :title="t('view_brand_ranges', {'brand_name': transField(brand, 'name')})"
              @click.prevent="gotoBrand(brand)"
            >
              <img
                class="img-fluid main-logo"
                :src="`/data/${brand.picture}`"
                :alt="`Marque ${transField(brand, 'name')}`"
                :title="t('brands_logo', {'brand_name': transField(brand, 'name')})"
                data-bs-toggle="tooltip"
              >
            </NuxtLinkLocale>
          </SwiperSlide>
        </Swiper>
      </div>
    </div>
    <div
      v-if="versions.isDebug"
      class="row"
      :style="{
        'color': activeRange ? getContrastYIQ(activeRange.color) : (activeBrand ? getContrastYIQ(activeBrand.color) : 'inherit')
      }"
    >
      <div class="col text-center">
        <span>{{ appInfo.licence }}</span>&nbsp;-&nbsp;
        <span>{{ appInfo.name }}</span>&nbsp;-&nbsp;
        <span>{{ appInfo.version }}</span>&nbsp;-&nbsp;
        <span class="fw-bold">UWIL</span>
        © {{ (new Date()).getFullYear() }}
      </div>
    </div>
  </footer>
</template>

<script lang="ts">
import { Scrollbar } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/vue";
import { defineComponent } from "vue";
import { useRoute, type RouteLocationNormalizedLoaded } from "vue-router";
import ToolboxHelper from "~/classes/ToolboxHelper";
import type { appInfo } from "~/electron/main";
import { useAppStore } from "~/stores/useAppStore";
import { Tooltips } from "~/vueModules/bsTooltips";

export default defineComponent({
  name: "AppFooter",
  components: {Swiper, SwiperSlide},
  props: {
    activeBrand: {
      type: Object as PropType<TypeBrand|null>,
      required: false,
      default: null
    },
    activeRange: {
      type: Object as PropType<TypeRange|null>,
      required: false,
      default: null
    },
  },
  data(): {
    locale: string;
    versions: typeof window.versions;
    appInfo: typeof appInfo;
    settings: TypeSettings;
    route: RouteLocationNormalizedLoaded;
    brands: Array<TypeBrand>;
    modules: Array<{
      name: string;
    }>;
    tooltips: Tooltips|null;
  } {
    return {
      locale: "",
      route: useRoute(),
      versions: window.versions,
      appInfo: {
        version: "",
        name: "",
        licence: ""
      },
      settings: {} as TypeSettings,
      brands: [],
      modules: [Scrollbar],
      tooltips: null
    };
  },
  computed: {
    brandWithMultipleRanges(): boolean {
      if(!this.activeBrand) {
        return false;
      }
      return this.activeBrand.ranges.length > 1;
    }
  },
  watch: {
    $route(to: RouteLocationNormalizedLoaded) {
      if(to.name?.toString().startsWith("index")) {
        // * Reset active Brand on main page
        useAppStore().setActiveBrand(null);
        useAppStore().setActiveRange(null);
      }
    },
  },
  beforeMount() {
    this.settings = useAppStore().data.settings();
    window.ipcRendererObject.getAppInfo().then((appInfo) => {this.appInfo = appInfo;});
    this.brands = useAppStore().data.brands();
    const { locale } = useAppStore().getI18n();
    this.locale = locale;
  },
  mounted() {
    this.$nextTick(() => {this.tooltips = Tooltips.make({type:"parent", parentSelector: "#footer"});});
  },
  beforeUnmount() {
    this.tooltips?.closeBootstrapTooltip();
  },
  methods: {
    t(text: string, params: Record<string,string> = {}, localeToUse: string|null = null): string {
      return ToolboxHelper.trans(text, params, localeToUse);
    },
    transField(model: Typei18nModel, field: Typei18nFieldList) {
      return ToolboxHelper.getTranslatableField(model, field);
    },
    getContrastYIQ(hexcolor: string): string {
      return ToolboxHelper.getContrastYIQ(hexcolor);
    },
    gotoBrand(brand: TypeBrand) {
      useAppStore().setActiveBrand(null);
      useAppStore().setActiveRange(null);
      useAppStore().setActiveBrand(brand);
      navigateTo(useLocaleRoute()({"name": "brands-slug", "params": {"slug": this.transField(brand, "slug")}}));
    }
  }
});
</script>

<style lang="scss">
@import "swiper/scss";
@import "swiper/scss/scrollbar";
</style>