feat: ✨ update project for sial 2024
This commit is contained in:
Alexis Gousseau
parent
abb1600c94
commit
4e7696d23c
25 changed files with 796 additions and 151 deletions
4
.vscode/settings.json
vendored
4
.vscode/settings.json
vendored
|
|
@ -1,4 +1,5 @@
|
|||
{
|
||||
"peacock.remoteColor": "#1fee8e",
|
||||
"workbench.colorCustomizations": {
|
||||
"activityBar.activeBackground": "#4ef2a6",
|
||||
"activityBar.background": "#4ef2a6",
|
||||
|
|
@ -17,6 +18,5 @@
|
|||
"titleBar.activeForeground": "#15202b",
|
||||
"titleBar.inactiveBackground": "#1fee8e99",
|
||||
"titleBar.inactiveForeground": "#15202b99"
|
||||
},
|
||||
"peacock.remoteColor": "#1fee8e"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
2
app.vue
2
app.vue
|
|
@ -11,7 +11,7 @@
|
|||
>
|
||||
<template v-if="!loading">
|
||||
<AppHeader :active-brand="activeBrand" :active-range="activeRange" />
|
||||
<div class="container-fluid overflow-y-scroll p-0">
|
||||
<div class="container-fluid overflow-auto p-0">
|
||||
<NuxtPage :page-key="(route: RouteLocation) => route.fullPath" />
|
||||
</div>
|
||||
<NavigationMenu v-if="showNavigation" />
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
body {
|
||||
@include font-size(1rem);
|
||||
|
||||
min-height: 100vh;
|
||||
max-height: 100vh;
|
||||
// * Use BS var to set BG as on home page
|
||||
// background-color: unset;
|
||||
|
||||
|
|
@ -49,7 +49,8 @@ body {
|
|||
@include font-size(4rem);
|
||||
}
|
||||
|
||||
&::before,&::after {
|
||||
&::before,
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<div class="container border-top border-3 border-secondary">
|
||||
<div class="row py-4">
|
||||
<div class="col arrow pe-3 d-flex align-items-center justify-content-end">
|
||||
<button
|
||||
class="rounded-pill btn btn-primary px-4 py-1"
|
||||
class="rounded-pill btn btn-secondary px-4 py-1"
|
||||
:disabled="previousRange === null"
|
||||
:title="previousRange ? t('view_range_products', {'range_name': transField(previousRange, 'name')}) : ''"
|
||||
data-bs-toggle="tooltip"
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
</div>
|
||||
<div class="col home text-center px-3">
|
||||
<button
|
||||
class="rounded-pill btn btn-primary px-4 py-1"
|
||||
class="rounded-pill btn btn-secondary px-4 py-1"
|
||||
:title="activeBrand ? t('view_brand_ranges', {'brand_name': transField(activeBrand, 'name')}) : ''"
|
||||
data-bs-toggle="tooltip"
|
||||
@click="gotoBrand(activeBrand)"
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
</div>
|
||||
<div class="col arrow ps-3 d-flex align-items-center justify-content-start">
|
||||
<button
|
||||
class="rounded-pill btn btn-primary px-4 py-1"
|
||||
class="rounded-pill btn btn-secondary px-4 py-1"
|
||||
:disabled="nextRange === null"
|
||||
:title="nextRange ? t('view_range_products', {'range_name': transField(nextRange, 'name')}) : ''"
|
||||
data-bs-toggle="tooltip"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div id="product-modal" ref="modal" class="modal fade" tabindex="-1">
|
||||
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xxl modal-fullscreen-md-down">
|
||||
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl modal-fullscreen-md-down">
|
||||
<div class="modal-content bg-white">
|
||||
<div class="modal-header position-relative">
|
||||
<h5
|
||||
|
|
|
|||
|
|
@ -1,11 +1,15 @@
|
|||
<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 class="row">
|
||||
<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"
|
||||
|
|
@ -35,10 +39,10 @@
|
|||
},
|
||||
}"
|
||||
>
|
||||
<SwiperSlide v-for="(brand,brandIndex) of brands" :key="brandIndex">
|
||||
<SwiperSlide v-for="(brand, brandIndex) of brands" :key="brandIndex">
|
||||
<NuxtLinkLocale
|
||||
class="swiper-slide"
|
||||
:to="`/brands/${brand.slug}`"
|
||||
:to="`/brands/${transField(brand, 'slug')}`"
|
||||
data-bs-toggle="tooltip"
|
||||
:title="t('view_brand_ranges', {'brand_name': transField(brand, 'name')})"
|
||||
@click.prevent="gotoBrand(brand)"
|
||||
|
|
|
|||
284
components/layout/AppHeader-ldcgroup.vue
Normal file
284
components/layout/AppHeader-ldcgroup.vue
Normal file
|
|
@ -0,0 +1,284 @@
|
|||
|
||||
<template>
|
||||
<nav
|
||||
id="top-navbar"
|
||||
class="navbar navbar-expand-lg position-relative p-0"
|
||||
:style="`background-color: ${activeRange && brandWithMultipleRanges ? activeRange.color : activeBrand?.color} !important`"
|
||||
>
|
||||
<div class="container-fluid">
|
||||
<!-- UNE MARQUE EST SELECTIONNEE -->
|
||||
<div
|
||||
v-if="activeBrand"
|
||||
:class="{
|
||||
'd-flex flex-row flex-grow-1 justify-content-center align-items-center': true,
|
||||
'mx-auto': !activeRange,
|
||||
}"
|
||||
>
|
||||
<NuxtLinkLocale
|
||||
:to="`/brands/${transField(activeBrand, 'slug')}`"
|
||||
:class="{
|
||||
'd-inline-block py-3 px-2 text-center': true,
|
||||
'flex-grow-1': !activeRange
|
||||
}"
|
||||
data-bs-toggle="tooltip"
|
||||
:title="t('view_brand_ranges', {'brand_name': transField(activeBrand, 'name')})"
|
||||
>
|
||||
<img
|
||||
class="img-fluid main-logo"
|
||||
:src="`/data/${activeBrand.picture}`"
|
||||
:alt="`Marque ${transField(activeBrand, 'name')}`"
|
||||
:title="t('brands_logo', {'brand_name': transField(activeBrand, 'name')})"
|
||||
data-bs-toggle="tooltip"
|
||||
>
|
||||
</NuxtLinkLocale>
|
||||
<div v-if="activeRange && brandWithMultipleRanges" class="flex-grow-1 text-center">
|
||||
<span
|
||||
:class="{...{
|
||||
'title': true,
|
||||
'ps-md-5 d-inline-block px-5 py-3 rounded text-capitalize': true,
|
||||
'text-dark': getContrastYIQ(activeRange.color) === '#000000',
|
||||
'text-light': getContrastYIQ(activeRange.color) === '#FFFFFF',
|
||||
}, ...rangeFont(activeRange.font_id)}"
|
||||
:style="{
|
||||
'text-shadow': `0 0 0.2rem ${toRGBA(getContrastYIQ(activeRange.color), 0.8)}`
|
||||
}"
|
||||
>
|
||||
{{ transField(activeRange, 'name') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- HOME (PAS DE MARQUE) -->
|
||||
<div v-else class="row text-bg-light">
|
||||
<div class="col-12 g-0 pb-5">
|
||||
<img
|
||||
src="assets/pictures/layout/top-hr.png"
|
||||
alt="Top bar"
|
||||
class="img-fluid d-block"
|
||||
>
|
||||
</div>
|
||||
<div class="col-12 mx-auto text-center mb-3 mt-3 pb-5">
|
||||
<div class="d-inline-block bg-white p-4 rounded">
|
||||
<img :src="`/data/${settings.logo}`" alt="Logo" class="img-fluid main-logo d-inline-block">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbar-menu"
|
||||
type="button"
|
||||
aria-controls="navbar-menu"
|
||||
aria-expanded="false"
|
||||
:aria-label="t('show_hide_languages')"
|
||||
>
|
||||
<span class="navbar-toggler-icon" />
|
||||
</button>
|
||||
|
||||
<div id="navbar-menu" class="lang-bar navbar-collapse collapse flex-grow-0">
|
||||
<div class="btn-group z-1">
|
||||
<button
|
||||
v-for="(localeObject,localeIndex) of locales"
|
||||
:key="localeIndex"
|
||||
:class="{
|
||||
'btn ms-3 px-4 mx-0 shadow fw-bold': true,
|
||||
'btn-white bg-white': locale !== localeObject.iso,
|
||||
'btn-secondary': locale === localeObject.iso,
|
||||
}"
|
||||
:title="localeObject.label"
|
||||
data-bs-toggle="tooltip"
|
||||
@click.prevent="switchLocale(localeObject)"
|
||||
>
|
||||
<span class="text-uppercase fs-5">{{ localeObject.flag }}</span>
|
||||
<!-- <span :class="`fi fi-${localeObject.flag}`" /> -->
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import log from "electron-log";
|
||||
import { defineComponent } from "vue";
|
||||
import type { RouteLocationNormalizedLoaded } from "vue-router";
|
||||
import ToolboxHelper from "~/classes/ToolboxHelper";
|
||||
import { useAppStore } from "~/stores/useAppStore";
|
||||
import { Tooltips } from "~/vueModules/bsTooltips";
|
||||
|
||||
type LocaleParams = {
|
||||
iso: string,
|
||||
flag: string,
|
||||
label: string,
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
name: "AppHeader",
|
||||
props: {
|
||||
activeBrand: {
|
||||
type: Object as PropType<TypeBrand|null>,
|
||||
required: false,
|
||||
default: null
|
||||
},
|
||||
activeRange: {
|
||||
type: Object as PropType<TypeRange|null>,
|
||||
required: false,
|
||||
default: null
|
||||
},
|
||||
},
|
||||
data(): {
|
||||
versions: typeof window.versions;
|
||||
settings: TypeSettings;
|
||||
locales: Array<LocaleParams>,
|
||||
locale: string;
|
||||
route: RouteLocationNormalizedLoaded;
|
||||
tooltips: Tooltips|null;
|
||||
} {
|
||||
return {
|
||||
versions: window.versions,
|
||||
settings: {} as TypeSettings,
|
||||
locales: [],
|
||||
locale: "",
|
||||
route: useRoute(),
|
||||
tooltips: null
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
brandWithMultipleRanges(): boolean {
|
||||
if(!this.activeBrand) {
|
||||
return false;
|
||||
}
|
||||
return this.activeBrand.ranges.length > 1;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$route(to: RouteLocationNormalizedLoaded) {
|
||||
log.debug(`Swithing to route ${String(to.name)}`);
|
||||
if(to.name?.toString().startsWith("index")) {
|
||||
// * Reset active Brand on main page
|
||||
useAppStore().setActiveBrand(null);
|
||||
}
|
||||
const { locale } = useAppStore().getI18n();
|
||||
this.locale = locale;
|
||||
},
|
||||
},
|
||||
beforeMount() {
|
||||
this.settings = useAppStore().data.settings();
|
||||
const { locale, availableLocales } = useI18n({ useScope: "global"});
|
||||
this.locale = locale.value;
|
||||
const localeSortArr = ["fr", "nl"];
|
||||
this.locales = availableLocales.sort((LocA, LocB) => localeSortArr.indexOf(LocA) - localeSortArr.indexOf(LocB)).map(localeStr => {
|
||||
return {
|
||||
iso: localeStr,
|
||||
flag: this.t("_flag", {}, localeStr),
|
||||
label: this.t("_lang", {}, localeStr),
|
||||
};
|
||||
});
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {this.tooltips = Tooltips.make({type:"parent", parentSelector: "#top-navbar"});});
|
||||
},
|
||||
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);
|
||||
},
|
||||
switchLocale(localeToSwitch:LocaleParams) {
|
||||
const switchLocalePath = useSwitchLocalePath();
|
||||
// Toast.toast(localeToSwitch.label, ToastTypeEnum.default);
|
||||
useAppStore().switchLocale(localeToSwitch.iso);
|
||||
navigateTo(switchLocalePath(localeToSwitch.iso));
|
||||
},
|
||||
rangeFont(fontId: number) {
|
||||
const font = useAppStore().getFont(fontId);
|
||||
const out: Map<string, boolean> = new Map<string, boolean>();
|
||||
if(font) {
|
||||
out.set(`f-${font.font_name}`, true);
|
||||
}
|
||||
return Object.fromEntries(out.entries());
|
||||
},
|
||||
getContrastYIQ(hexcolor: string): string {
|
||||
return ToolboxHelper.getContrastYIQ(hexcolor);
|
||||
},
|
||||
toRGBA(hexcolor: string, alpha: number = 1): string {
|
||||
return ToolboxHelper.toRGBA(hexcolor, alpha);
|
||||
},
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
@import "flag-icons/sass/flag-icons.scss";
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "bootstrap/scss/functions";
|
||||
@import "bootstrap/scss/variables";
|
||||
@import "bootstrap/scss/variables-dark";
|
||||
@import "bootstrap/scss/maps";
|
||||
@import "bootstrap/scss/mixins";
|
||||
@import "bootstrap/scss/vendor/rfs";
|
||||
#top-navbar {
|
||||
.title {
|
||||
@include rfs(2rem, font-size);
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
@include rfs(3rem, font-size);
|
||||
}
|
||||
@include media-breakpoint-up(xxl) {
|
||||
@include rfs(5rem, font-size);
|
||||
}
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
@include rfs(1.2rem, font-size);
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
@include rfs(1.8rem, font-size);
|
||||
}
|
||||
@include media-breakpoint-up(xxl) {
|
||||
@include rfs(3.2rem, font-size);
|
||||
}
|
||||
}
|
||||
|
||||
.main-logo {
|
||||
@include rfs(7rem, max-height);
|
||||
height: 20vh;
|
||||
@include media-breakpoint-up(md) {
|
||||
@include rfs(15rem, max-height);
|
||||
}
|
||||
@include media-breakpoint-up(xxl) {
|
||||
@include rfs(30rem, max-height);
|
||||
}
|
||||
}
|
||||
.fi {
|
||||
@include media-breakpoint-up(md) {
|
||||
@include rfs(2em, line-height);
|
||||
@include rfs(4em, width);
|
||||
}
|
||||
@include media-breakpoint-up(xxl) {
|
||||
@include rfs(3em, line-height);
|
||||
@include rfs(5em, width);
|
||||
}
|
||||
}
|
||||
.lang-bar {
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
top: 0;
|
||||
}
|
||||
.lang-bar .btn-group {
|
||||
border-radius: 0;
|
||||
}
|
||||
.lang-bar .btn-group button {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -47,21 +47,6 @@
|
|||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- HOME (PAS DE MARQUE) -->
|
||||
<div v-else class="row text-bg-light">
|
||||
<div class="col-12 g-0 pb-5">
|
||||
<img
|
||||
src="assets/pictures/layout/top-hr.png"
|
||||
alt="Top bar"
|
||||
class="img-fluid d-block"
|
||||
>
|
||||
</div>
|
||||
<div class="col-12 mx-auto text-center mb-3 mt-3 pb-5">
|
||||
<div class="d-inline-block bg-white p-4 rounded">
|
||||
<img :src="`/data/${settings.logo}`" alt="Logo" class="img-fluid main-logo d-inline-block">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
|
|
@ -75,21 +60,23 @@
|
|||
<span class="navbar-toggler-icon" />
|
||||
</button>
|
||||
|
||||
<div id="navbar-menu" class="lang-bar navbar-collapse collapse flex-grow-0">
|
||||
<div class="btn-group me-4 z-1">
|
||||
<div v-if="activeBrand" id="navbar-menu" class="lang-bar navbar-collapse collapse flex-grow-0">
|
||||
<div class="btn-group z-1">
|
||||
<button
|
||||
v-for="(localeObject,localeIndex) of locales"
|
||||
v-for="(localeObject, localeIndex) of locales"
|
||||
:key="localeIndex"
|
||||
:class="{
|
||||
'btn px-4 mx-3 shadow fw-bold': true,
|
||||
'btn-white bg-white': locale !== localeObject.iso,
|
||||
'btn-secondary': locale === localeObject.iso,
|
||||
'btn ms-3 px-2 mx-0 shadow fw-bold': true,
|
||||
'btn-secondary': locale !== localeObject.iso,
|
||||
'btn-white bg-white': locale === localeObject.iso,
|
||||
'd-none': localeObject.show !== true,
|
||||
}"
|
||||
:title="localeObject.label"
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-placement="bottom"
|
||||
@click.prevent="switchLocale(localeObject)"
|
||||
>
|
||||
<span class="text-uppercase fs-1">{{ localeObject.flag }}</span>
|
||||
<span class="text-uppercase fs-5">{{ localeObject.flag }}</span>
|
||||
<!-- <span :class="`fi fi-${localeObject.flag}`" /> -->
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -110,6 +97,7 @@ type LocaleParams = {
|
|||
iso: string,
|
||||
flag: string,
|
||||
label: string,
|
||||
show: boolean,
|
||||
};
|
||||
|
||||
export default defineComponent({
|
||||
|
|
@ -166,12 +154,13 @@ export default defineComponent({
|
|||
this.settings = useAppStore().data.settings();
|
||||
const { locale, availableLocales } = useI18n({ useScope: "global"});
|
||||
this.locale = locale.value;
|
||||
const localeSortArr = ["fr", "nl"];
|
||||
const localeSortArr = ["fr", "en", "de", "es", "nl"];
|
||||
this.locales = availableLocales.sort((LocA, LocB) => localeSortArr.indexOf(LocA) - localeSortArr.indexOf(LocB)).map(localeStr => {
|
||||
return {
|
||||
iso: localeStr,
|
||||
flag: this.t("_flag", {}, localeStr),
|
||||
label: this.t("_lang", {}, localeStr),
|
||||
show: this.t("_show", {}, localeStr) === "true",
|
||||
};
|
||||
});
|
||||
},
|
||||
|
|
@ -189,10 +178,11 @@ export default defineComponent({
|
|||
return ToolboxHelper.getTranslatableField(model, field);
|
||||
},
|
||||
switchLocale(localeToSwitch:LocaleParams) {
|
||||
const switchLocalePath = useSwitchLocalePath();
|
||||
// const switchLocalePath = useSwitchLocalePath();
|
||||
// Toast.toast(localeToSwitch.label, ToastTypeEnum.default);
|
||||
useAppStore().switchLocale(localeToSwitch.iso);
|
||||
navigateTo(switchLocalePath(localeToSwitch.iso));
|
||||
this.locale = localeToSwitch.iso;
|
||||
// navigateTo(switchLocalePath(localeToSwitch.iso));
|
||||
},
|
||||
rangeFont(fontId: number) {
|
||||
const font = useAppStore().getFont(fontId);
|
||||
|
|
@ -266,11 +256,19 @@ export default defineComponent({
|
|||
@include rfs(5em, width);
|
||||
}
|
||||
}
|
||||
|
||||
.lang-bar {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 5rem;
|
||||
right: 1rem;
|
||||
top: 0;
|
||||
}
|
||||
.lang-bar .btn-group {
|
||||
border-radius: 0;
|
||||
}
|
||||
.lang-bar .btn-group button {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-left-radius: 1rem;
|
||||
border-bottom-right-radius: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
*/
|
||||
{
|
||||
appId: "com.ldc.app-kiosk",
|
||||
productName: "App Kiosk",
|
||||
productName: "App UWIL Expo",
|
||||
asar: false,
|
||||
directories: {
|
||||
output: "release/${version}",
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
mac: {
|
||||
artifactName: "${productName}_${version}.${ext}",
|
||||
target: ["dmg"],
|
||||
icon: "ldc-intl.png",
|
||||
icon: "uwil-expo-icon.png",
|
||||
},
|
||||
win: {
|
||||
target: [
|
||||
|
|
@ -22,8 +22,8 @@
|
|||
},
|
||||
],
|
||||
artifactName: "${productName}_${version}.${ext}",
|
||||
icon: "ldc-intl.png",
|
||||
publisherName: "LDC Service Web",
|
||||
icon: "uwil-expo-icon.png",
|
||||
publisherName: "LDC DIGITAL Groupe",
|
||||
},
|
||||
linux: {
|
||||
category: "Utility",
|
||||
|
|
|
|||
|
|
@ -1,4 +0,0 @@
|
|||
|
||||
|
||||
// console.log("versions.chrome()");
|
||||
// console.log(app.chrome());
|
||||
|
|
@ -1,14 +1,19 @@
|
|||
// import en from "./locales/en";
|
||||
import de from "./locales/de";
|
||||
import en from "./locales/en";
|
||||
import es from "./locales/es";
|
||||
import fr from "./locales/fr";
|
||||
import nl from "./locales/nl";
|
||||
|
||||
export default defineI18nConfig(() => ({
|
||||
legacy: false,
|
||||
globalInjection: true,
|
||||
locale: "nl",
|
||||
locale: "fr",
|
||||
fallbackLocale: "fr",
|
||||
messages: {
|
||||
fr,
|
||||
nl
|
||||
de,
|
||||
en,
|
||||
nl,
|
||||
es
|
||||
}
|
||||
}));
|
||||
|
|
|
|||
BIN
ldc-intl.png
BIN
ldc-intl.png
Binary file not shown.
|
Before Width: | Height: | Size: 94 KiB |
20
locales/de.ts
Normal file
20
locales/de.ts
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
export default {
|
||||
"_flag": "de",
|
||||
"_lang": "Deutsch",
|
||||
"_show": "true",
|
||||
"error_occured": "An error has occured",
|
||||
"loading": "Loading",
|
||||
"show_hide_languages": "Show / Hide languages",
|
||||
"view_brand_ranges": "View ranges of the brand {brand_name}",
|
||||
"brands_logo": "Logo for the brand {brand_name}",
|
||||
"no_brands_available": "No brands available",
|
||||
"view_range_products": "View products of the range {range_name}",
|
||||
"ranges_logo": "Logo for the range {range_name}",
|
||||
"no_ranges_available": "No ranges available",
|
||||
"more_about_this_product": "More about this product",
|
||||
"close_products_modal": "Close products description",
|
||||
"products_logo": "Logo for the product {product_name}",
|
||||
"no_products_available": "No products available",
|
||||
"welcome_to_ldc": "welcome to LDC",
|
||||
"discover_our_brands": "Discover our brands"
|
||||
};
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
export default {
|
||||
"_flag": "gb",
|
||||
"_flag": "en",
|
||||
"_lang": "English",
|
||||
"_show": "true",
|
||||
"error_occured": "An error has occured",
|
||||
"loading": "Loading",
|
||||
"show_hide_languages": "Show / Hide languages",
|
||||
|
|
|
|||
20
locales/es.ts
Normal file
20
locales/es.ts
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
export default {
|
||||
"_flag": "es",
|
||||
"_lang": "Español",
|
||||
"_show": "true",
|
||||
"error_occured": "Se ha producido un error",
|
||||
"loading": "Loading",
|
||||
"show_hide_languages": "Mostrar / Ocultar idiomas",
|
||||
"view_brand_ranges": "Ver las gamas de la marca {brand_name}",
|
||||
"brands_logo": "Logotipo de la marca {brand_name}",
|
||||
"no_brands_available": "No hay marcas disponibles",
|
||||
"view_range_products": "Ver los productos de la gama {range_name}",
|
||||
"ranges_logo": "Logotipo de la gama {range_name}",
|
||||
"no_ranges_available": "No hay gamas disponibles",
|
||||
"more_about_this_product": "Más información sobre este producto",
|
||||
"close_products_modal": "Cerrar descripción de productos",
|
||||
"products_logo": "Logotipo del producto {product_name}",
|
||||
"no_products_available": "No hay productos disponibles",
|
||||
"welcome_to_ldc": "bienvenido a LDC",
|
||||
"discover_our_brands": "Descubra nuestras marcas"
|
||||
};
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
export default {
|
||||
"_flag": "fr",
|
||||
"_lang": "Francais",
|
||||
"_show": "true",
|
||||
"error_occured": "Une erreur est survenue",
|
||||
"loading": "Chargement",
|
||||
"show_hide_languages": "Afficher / Masquer les langues",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
export default {
|
||||
"_flag": "nl",
|
||||
"_lang": "Nederlands",
|
||||
"_show": "true",
|
||||
"error_occured": "Er is een fout opgetreden",
|
||||
"loading": "Bezig met laden",
|
||||
"show_hide_languages": "Talen tonen/verbergen",
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import { resolve } from "path";
|
||||
import UnzipData from "./electron/UnzipData";
|
||||
|
||||
|
||||
// https://nuxt.com/docs/api/configuration/nuxt-config
|
||||
export default defineNuxtConfig({
|
||||
hooks: {
|
||||
|
|
@ -45,7 +44,7 @@ export default defineNuxtConfig({
|
|||
pageTransition: { name: "page", mode: "out-in" },
|
||||
// Global page headers: https://go.nuxtjs.dev/config-head
|
||||
head: {
|
||||
title: "showroom",
|
||||
title: "UWIL Expo by LDC",
|
||||
meta: [
|
||||
{ charset: "utf-8" },
|
||||
{ name: "viewport", content: "width=device-width, initial-scale=1" },
|
||||
|
|
@ -58,7 +57,6 @@ export default defineNuxtConfig({
|
|||
}
|
||||
},
|
||||
},
|
||||
|
||||
plugins: [
|
||||
{ src: "~/plugins/toolboxhelper.ts", mode: "client" },
|
||||
{ src: "~/plugins/boostrap.ts", mode: "client" },
|
||||
|
|
@ -66,15 +64,13 @@ export default defineNuxtConfig({
|
|||
{ src: "~/plugins/localStorage.ts", mode: "client" },
|
||||
{ src: "~/plugins/emitter.ts", mode: "client" },
|
||||
],
|
||||
|
||||
alias: {
|
||||
// images: resolve(__dirname, "./static/assets/images"),
|
||||
data: resolve(__dirname, "./static/data"),
|
||||
pinia: "/node_modules/@pinia/nuxt/node_modules/pinia/dist/pinia.mjs"
|
||||
},
|
||||
|
||||
i18n: {
|
||||
locales: ["fr", "nl"],
|
||||
locales: ["fr", "en", "de", "es", "nl"],
|
||||
defaultLocale: "fr",
|
||||
// * Ajouter aussi la locale dans ce fichier
|
||||
vueI18n: "./i18n.config.ts"
|
||||
|
|
|
|||
231
package-lock.json
generated
Normal file → Executable file
231
package-lock.json
generated
Normal file → Executable file
|
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"name": "app-kiosk",
|
||||
"version": "1.1.0",
|
||||
"name": "uwil-expo",
|
||||
"version": "2.3.3",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "app-kiosk",
|
||||
"version": "1.1.0",
|
||||
"name": "uwil-expo",
|
||||
"version": "2.3.3",
|
||||
"hasInstallScript": true,
|
||||
"devDependencies": {
|
||||
"@fortawesome/fontawesome-svg-core": "^6.5.1",
|
||||
|
|
@ -63,7 +63,8 @@
|
|||
"vite-plugin-electron": "^0.15.5",
|
||||
"vite-plugin-electron-renderer": "^0.14.5",
|
||||
"vue": "^3.3.4",
|
||||
"vue-router": "^4.2.5"
|
||||
"vue-router": "^4.2.5",
|
||||
"vue-tsc": "^2.2.10"
|
||||
}
|
||||
},
|
||||
"node_modules/@aashutoshrathi/word-wrap": {
|
||||
|
|
@ -480,19 +481,21 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@babel/helper-string-parser": {
|
||||
"version": "7.23.4",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz",
|
||||
"integrity": "sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==",
|
||||
"version": "7.27.1",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
|
||||
"integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/helper-validator-identifier": {
|
||||
"version": "7.22.20",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz",
|
||||
"integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==",
|
||||
"version": "7.27.1",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz",
|
||||
"integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6.9.0"
|
||||
}
|
||||
|
|
@ -606,10 +609,14 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@babel/parser": {
|
||||
"version": "7.23.9",
|
||||
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.9.tgz",
|
||||
"integrity": "sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA==",
|
||||
"version": "7.27.5",
|
||||
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.27.5.tgz",
|
||||
"integrity": "sha512-OsQd175SxWkGlzbny8J3K8TnnDD0N3lrIUtB92xwyRpzaenGZhxDvxN/JgU00U3CDZNj9tPuDJ5H0WS4Nt3vKg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/types": "^7.27.3"
|
||||
},
|
||||
"bin": {
|
||||
"parser": "bin/babel-parser.js"
|
||||
},
|
||||
|
|
@ -913,14 +920,14 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@babel/types": {
|
||||
"version": "7.23.9",
|
||||
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.9.tgz",
|
||||
"integrity": "sha512-dQjSq/7HaSjRM43FFGnv5keM2HsxpmyV1PfaSVm0nzzjwwTmjOe6J4bC8e3+pTEIgHaHj+1ZlLThRJ2auc/w1Q==",
|
||||
"version": "7.27.6",
|
||||
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.27.6.tgz",
|
||||
"integrity": "sha512-ETyHEk2VHHvl9b9jZP5IHPavHYk57EhanlRRuae9XCpb/j5bDCbPPMOBfCWhnl/7EDJz0jEMCi/RhccCE8r1+Q==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/helper-string-parser": "^7.23.4",
|
||||
"@babel/helper-validator-identifier": "^7.22.20",
|
||||
"to-fast-properties": "^2.0.0"
|
||||
"@babel/helper-string-parser": "^7.27.1",
|
||||
"@babel/helper-validator-identifier": "^7.27.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6.9.0"
|
||||
|
|
@ -5725,6 +5732,35 @@
|
|||
"vue": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@volar/language-core": {
|
||||
"version": "2.4.15",
|
||||
"resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.15.tgz",
|
||||
"integrity": "sha512-3VHw+QZU0ZG9IuQmzT68IyN4hZNd9GchGPhbD9+pa8CVv7rnoOZwo7T8weIbrRmihqy3ATpdfXFnqRrfPVK6CA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@volar/source-map": "2.4.15"
|
||||
}
|
||||
},
|
||||
"node_modules/@volar/source-map": {
|
||||
"version": "2.4.15",
|
||||
"resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.15.tgz",
|
||||
"integrity": "sha512-CPbMWlUN6hVZJYGcU/GSoHu4EnCHiLaXI9n8c9la6RaI9W5JHX+NqG+GSQcB0JdC2FIBLdZJwGsfKyBB71VlTg==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@volar/typescript": {
|
||||
"version": "2.4.15",
|
||||
"resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.4.15.tgz",
|
||||
"integrity": "sha512-2aZ8i0cqPGjXb4BhkMsPYDkkuc2ZQ6yOpqwAuNwUoncELqoy5fRgOQtLR9gB0g902iS0NAkvpIzs27geVyVdPg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@volar/language-core": "2.4.15",
|
||||
"path-browserify": "^1.0.1",
|
||||
"vscode-uri": "^3.0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/@vue-macros/common": {
|
||||
"version": "1.10.1",
|
||||
"resolved": "https://registry.npmjs.org/@vue-macros/common/-/common-1.10.1.tgz",
|
||||
|
|
@ -5873,6 +5909,17 @@
|
|||
"@vue/shared": "3.4.15"
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/compiler-vue2": {
|
||||
"version": "2.7.16",
|
||||
"resolved": "https://registry.npmjs.org/@vue/compiler-vue2/-/compiler-vue2-2.7.16.tgz",
|
||||
"integrity": "sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"de-indent": "^1.0.2",
|
||||
"he": "^1.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/devtools-api": {
|
||||
"version": "6.5.1",
|
||||
"resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.5.1.tgz",
|
||||
|
|
@ -5903,6 +5950,70 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/language-core": {
|
||||
"version": "2.2.10",
|
||||
"resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.2.10.tgz",
|
||||
"integrity": "sha512-+yNoYx6XIKuAO8Mqh1vGytu8jkFEOH5C8iOv3i8Z/65A7x9iAOXA97Q+PqZ3nlm2lxf5rOJuIGI/wDtx/riNYw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@volar/language-core": "~2.4.11",
|
||||
"@vue/compiler-dom": "^3.5.0",
|
||||
"@vue/compiler-vue2": "^2.7.16",
|
||||
"@vue/shared": "^3.5.0",
|
||||
"alien-signals": "^1.0.3",
|
||||
"minimatch": "^9.0.3",
|
||||
"muggle-string": "^0.4.1",
|
||||
"path-browserify": "^1.0.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"typescript": "*"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"typescript": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/language-core/node_modules/@vue/compiler-core": {
|
||||
"version": "3.5.17",
|
||||
"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.17.tgz",
|
||||
"integrity": "sha512-Xe+AittLbAyV0pabcN7cP7/BenRBNcteM4aSDCtRvGw0d9OL+HG1u/XHLY/kt1q4fyMeZYXyIYrsHuPSiDPosA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/parser": "^7.27.5",
|
||||
"@vue/shared": "3.5.17",
|
||||
"entities": "^4.5.0",
|
||||
"estree-walker": "^2.0.2",
|
||||
"source-map-js": "^1.2.1"
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/language-core/node_modules/@vue/compiler-dom": {
|
||||
"version": "3.5.17",
|
||||
"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.17.tgz",
|
||||
"integrity": "sha512-+2UgfLKoaNLhgfhV5Ihnk6wB4ljyW1/7wUIog2puUqajiC29Lp5R/IKDdkebh9jTbTogTbsgB+OY9cEWzG95JQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@vue/compiler-core": "3.5.17",
|
||||
"@vue/shared": "3.5.17"
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/language-core/node_modules/@vue/shared": {
|
||||
"version": "3.5.17",
|
||||
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.17.tgz",
|
||||
"integrity": "sha512-CabR+UN630VnsJO/jHWYBC1YVXyMq94KKp6iF5MQgZJs5I8cmjw6oVMO1oDbtBkENSHSSn/UadWlW/OAgdmKrg==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@vue/language-core/node_modules/estree-walker": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
|
||||
"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@vue/reactivity": {
|
||||
"version": "3.4.15",
|
||||
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.15.tgz",
|
||||
|
|
@ -6061,6 +6172,13 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"node_modules/alien-signals": {
|
||||
"version": "1.0.13",
|
||||
"resolved": "https://registry.npmjs.org/alien-signals/-/alien-signals-1.0.13.tgz",
|
||||
"integrity": "sha512-OGj9yyTnJEttvzhTUWuscOvtqxq5vrhF7vL9oS0xJ2mK0ItPYP1/y+vCFebfxoEyAz0++1AIwJ5CMr+Fk3nDmg==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/animate.css": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz",
|
||||
|
|
@ -7252,9 +7370,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/caniuse-lite": {
|
||||
"version": "1.0.30001583",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001583.tgz",
|
||||
"integrity": "sha512-acWTYaha8xfhA/Du/z4sNZjHUWjkiuoAi2LM+T/aL+kemKQgPT1xBb/YKjlQ0Qo8gvbHsGNplrEJ+9G3gL7i4Q==",
|
||||
"version": "1.0.30001726",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001726.tgz",
|
||||
"integrity": "sha512-VQAUIUzBiZ/UnlM28fSp2CRF3ivUn1BWEvxMcVTNwpw91Py1pGbPIyIKtd+tzct9C3ouceCVdGAXxZOpZAsgdw==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
|
|
@ -7269,7 +7387,8 @@
|
|||
"type": "github",
|
||||
"url": "https://github.com/sponsors/ai"
|
||||
}
|
||||
]
|
||||
],
|
||||
"license": "CC-BY-4.0"
|
||||
},
|
||||
"node_modules/chalk": {
|
||||
"version": "4.1.2",
|
||||
|
|
@ -8042,6 +8161,13 @@
|
|||
"integrity": "sha512-d4ZVpCW31eWwCMe1YT3ur7mUDnTXbgwyzaL320DrcRT45rfjYxkt5QWLrmOJ+/UEAI2+fQgKe/fCjR8l4TpRgw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/de-indent": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
|
||||
"integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/debug": {
|
||||
"version": "4.3.4",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
|
||||
|
|
@ -10770,6 +10896,16 @@
|
|||
"node": ">= 0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/he": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
|
||||
"integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"he": "bin/he"
|
||||
}
|
||||
},
|
||||
"node_modules/hookable": {
|
||||
"version": "5.5.3",
|
||||
"resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
|
||||
|
|
@ -13469,6 +13605,13 @@
|
|||
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/muggle-string": {
|
||||
"version": "0.4.1",
|
||||
"resolved": "https://registry.npmjs.org/muggle-string/-/muggle-string-0.4.1.tgz",
|
||||
"integrity": "sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/mz": {
|
||||
"version": "2.7.0",
|
||||
"resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
|
||||
|
|
@ -15320,6 +15463,13 @@
|
|||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/path-browserify": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
|
||||
"integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/path-exists": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
|
||||
|
|
@ -17591,10 +17741,11 @@
|
|||
}
|
||||
},
|
||||
"node_modules/source-map-js": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
|
||||
"integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
|
||||
"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
|
||||
"dev": true,
|
||||
"license": "BSD-3-Clause",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
|
|
@ -18870,15 +19021,6 @@
|
|||
"integrity": "sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/to-fast-properties": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
|
||||
"integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/to-regex-range": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
|
||||
|
|
@ -20974,6 +21116,23 @@
|
|||
"vue": "^3.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vue-tsc": {
|
||||
"version": "2.2.10",
|
||||
"resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.2.10.tgz",
|
||||
"integrity": "sha512-jWZ1xSaNbabEV3whpIDMbjVSVawjAyW+x1n3JeGQo7S0uv2n9F/JMgWW90tGWNFRKya4YwKMZgCtr0vRAM7DeQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@volar/typescript": "~2.4.11",
|
||||
"@vue/language-core": "2.2.10"
|
||||
},
|
||||
"bin": {
|
||||
"vue-tsc": "bin/vue-tsc.js"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"typescript": ">=5.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/walker": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmjs.org/walker/-/walker-1.0.8.tgz",
|
||||
|
|
|
|||
17
package.json
17
package.json
|
|
@ -1,11 +1,11 @@
|
|||
{
|
||||
"author": {
|
||||
"name": "LDC Service Web",
|
||||
"email": "equipe.web@ldc.fr"
|
||||
"name": "LDC DIGITAL Groupe",
|
||||
"email": "digitalb@ldc.fr"
|
||||
},
|
||||
"description": "Application Kiosk",
|
||||
"version": "1.1.0",
|
||||
"name": "app-kiosk",
|
||||
"description": "UWIL Expo",
|
||||
"version": "2.3.3",
|
||||
"name": "uwil-expo",
|
||||
"private": true,
|
||||
"type": "commonjs",
|
||||
"main": "dist-electron/main.js",
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
"static/**/*"
|
||||
],
|
||||
"scripts": {
|
||||
"build": "nuxi build --prerender && electron-builder",
|
||||
"build": "nuxi build --prerender && electron-builder -w",
|
||||
"dev": "nuxt dev",
|
||||
"generate": "nuxt generate",
|
||||
"preview": "nuxt preview",
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
"lint:ts": "npm run typecheck",
|
||||
"lint:js": "eslint --ext \".js,.ts,.vue\" --ignore-path .gitignore .",
|
||||
"lint:style": "node ./node_modules/.bin/stylelint --config './.stylelintrc.json' --max-warnings 0 \"assets/**/*.{css,scss,sass,html,vue}\" --ignore-path .gitignore",
|
||||
"lint": "npm run lint:js && npm run lint:style && lint:ts",
|
||||
"lint": "npm run lint:js && npm run lint:style && npm run lint:ts",
|
||||
"lint:fix": "npm run lint:js --fix && npm run lint:style --fix",
|
||||
"validate": "npm-run-all --parallel lint:js lint:style lint:ts",
|
||||
"prepare": "husky install"
|
||||
|
|
@ -84,6 +84,7 @@
|
|||
"vite-plugin-electron": "^0.15.5",
|
||||
"vite-plugin-electron-renderer": "^0.14.5",
|
||||
"vue": "^3.3.4",
|
||||
"vue-router": "^4.2.5"
|
||||
"vue-router": "^4.2.5",
|
||||
"vue-tsc": "^2.2.10"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
189
pages/index-ldcgroup.vue
Normal file
189
pages/index-ldcgroup.vue
Normal file
|
|
@ -0,0 +1,189 @@
|
|||
<template>
|
||||
<div class="page-home d-flex text-bg-light">
|
||||
<div class="container-fluid justify-content-center d-flex flex-column">
|
||||
<div class="row">
|
||||
<div class="col-12 text-center overflow-hidden pb-5">
|
||||
<div class="home-title">
|
||||
{{ t('welcome_to_ldc') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 text-center pb-5">
|
||||
<video
|
||||
class="object-fit-contain w-100"
|
||||
playsinline
|
||||
autoplay
|
||||
muted
|
||||
loop
|
||||
controls
|
||||
controlsList="nodownload noremoteplayback nofullscreen"
|
||||
>
|
||||
<source src="assets/videos/groupe-ldc-presentation-groupe-V7.webm" type="video/webm">
|
||||
<!-- <source src="assets/videos/groupe-ldc-presentation-groupe-V7.mp4" type="video/mp4"> -->
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="appState.brands" class="row">
|
||||
<div class="col-12 text-center overflow-hidden pb-5">
|
||||
<div class="home-title">
|
||||
{{ t('discover_our_brands') }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-for="(brand, brandIndex) of appState.brands()"
|
||||
:key="brandIndex"
|
||||
:class="{
|
||||
'col-12 col-md-6 px-5 my-3': true,
|
||||
}"
|
||||
>
|
||||
<div
|
||||
:class="{
|
||||
'd-flex align-items-center h-100 my-2': true,
|
||||
'justify-content-start': brandIndex %2 !== 0,
|
||||
'justify-content-end': brandIndex %2 === 0,
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class="d-inline-block text-center"
|
||||
role="button"
|
||||
:title="t('view_brand_ranges', {'brand_name': transField(brand, 'name')})"
|
||||
data-bs-toggle="tooltip"
|
||||
@click="gotoBrand(brand)"
|
||||
>
|
||||
<div class="d-inline-block brand-picture-wrapper">
|
||||
<img
|
||||
class="img-fluid"
|
||||
:src="`/data/${brand.picture}`"
|
||||
:alt="t('brands_logo', {'brand_name': transField(brand, 'name')})"
|
||||
:title="t('brands_logo', {'brand_name': transField(brand, 'name')})"
|
||||
>
|
||||
</div>
|
||||
<!-- :class="{...{'brand-title fw-bold text-capitalize fs-1 animate__animated p-3 mt-5 d-inline-block': true}, ...titleAnimations(brandIndex)}" -->
|
||||
<span
|
||||
class="d-none"
|
||||
:style="{
|
||||
'color': getContrastYIQ(brand.color),
|
||||
'background-color': brand.color
|
||||
}"
|
||||
>
|
||||
{{ transField(brand, 'name') }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="row">
|
||||
<div class="col">
|
||||
<span class="h4">{{ t('no_brands_available') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-5 pb-5">
|
||||
<div class="col py-5 my-5 pb-5">
|
||||
<img
|
||||
src="assets/pictures/layout/home-bottom-banner.png"
|
||||
alt="Bottom Banner"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import type AppState from "~/classes/AppState";
|
||||
import ToolboxHelper from "~/classes/ToolboxHelper";
|
||||
import { useAppStore } from "~/stores/useAppStore";
|
||||
import { Tooltips } from "~/vueModules/bsTooltips";
|
||||
|
||||
export default defineComponent({
|
||||
name: "HomePage",
|
||||
data() : {
|
||||
appState: AppState;
|
||||
animateTimeout: NodeJS.Timeout|undefined;
|
||||
animateIndex: number|null;
|
||||
animations: Array<string>;
|
||||
tooltips: Tooltips|null;
|
||||
} {
|
||||
return {
|
||||
appState: {} as AppState,
|
||||
animateTimeout: undefined,
|
||||
animateIndex: null,
|
||||
animations: ["heartBeat", "tada", "shakeX", "rubberBand"],
|
||||
tooltips: null
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {this.tooltips = Tooltips.make({type:"parent", parentSelector: ".page-home"});});
|
||||
this.appState = useAppStore().data;
|
||||
|
||||
// * ANIMATIONS
|
||||
clearTimeout(this.animateTimeout);
|
||||
this.$nextTick(() => {
|
||||
[...document.getElementsByClassName("brand-title")].forEach(el => {
|
||||
el.classList.add("animate__bounce");
|
||||
});
|
||||
this.animateTimeout = setTimeout(() => {
|
||||
[...document.getElementsByClassName("brand-title")].forEach(el => {
|
||||
el.classList.remove("animate__bounce");
|
||||
});
|
||||
this.setBrandToAnimate();
|
||||
}, ToolboxHelper.randomInteger(4000, 8000));
|
||||
});
|
||||
},
|
||||
beforeUnmount() {
|
||||
this.tooltips?.closeBootstrapTooltip();
|
||||
clearTimeout(this.animateTimeout);
|
||||
},
|
||||
methods: {
|
||||
getContrastYIQ(hexcolor: string): string {
|
||||
return ToolboxHelper.getContrastYIQ(hexcolor);
|
||||
},
|
||||
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);
|
||||
},
|
||||
setBrandToAnimate(): void {
|
||||
clearTimeout(this.animateTimeout);
|
||||
this.animateIndex = ToolboxHelper.randomInteger(0, this.appState.brands().length -1);
|
||||
this.animateTimeout = setTimeout(this.setBrandToAnimate, ToolboxHelper.randomInteger(2000, 6000));
|
||||
},
|
||||
titleAnimations(brandIndex: number) {
|
||||
const animation = this.animations.at(ToolboxHelper.randomInteger(0, this.animations.length -1));
|
||||
const out: Map<string, boolean> = new Map<string, boolean>();
|
||||
out.set(`animate__${animation}`, this.animateIndex === brandIndex);
|
||||
return Object.fromEntries(out.entries());
|
||||
},
|
||||
gotoBrand(brand: TypeBrand) {
|
||||
useAppStore().setActiveBrand(brand);
|
||||
navigateTo(useLocaleRoute()({"name": "brands-slug", "params": {"slug": this.transField(brand, "slug")}}));
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../assets/scss/variables";
|
||||
@import "bootstrap/scss/functions";
|
||||
@import "bootstrap/scss/variables";
|
||||
@import "bootstrap/scss/variables-dark";
|
||||
@import "bootstrap/scss/maps";
|
||||
@import "bootstrap/scss/mixins";
|
||||
@import "bootstrap/scss/vendor/rfs";
|
||||
|
||||
.page-home, .page-home>div {
|
||||
min-height: 100%;
|
||||
|
||||
.brand-picture-wrapper {
|
||||
@include rfs(5rem, border-radius);
|
||||
|
||||
background-color: $color-white;
|
||||
@include rfs(3rem, padding-top);
|
||||
@include rfs(3rem, padding-bottom);
|
||||
@include rfs(8rem, padding-right);
|
||||
@include rfs(8rem, padding-left);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,49 +1,26 @@
|
|||
<template>
|
||||
<div class="page-home d-flex text-bg-light">
|
||||
<div class="container-fluid justify-content-center d-flex flex-column">
|
||||
<div class="row">
|
||||
<div class="col-12 text-center overflow-hidden pb-5">
|
||||
<div class="home-title">
|
||||
{{ t('welcome_to_ldc') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 text-center pb-5">
|
||||
<video
|
||||
class="object-fit-contain w-100"
|
||||
playsinline
|
||||
autoplay
|
||||
muted
|
||||
loop
|
||||
controls
|
||||
controlsList="nodownload noremoteplayback nofullscreen"
|
||||
>
|
||||
<source src="assets/videos/groupe-ldc-presentation-groupe-V7.webm" type="video/webm">
|
||||
<!-- <source src="assets/videos/groupe-ldc-presentation-groupe-V7.mp4" type="video/mp4"> -->
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="appState.brands" class="row">
|
||||
<div class="col-12 text-center overflow-hidden pb-5">
|
||||
<div class="home-title">
|
||||
{{ t('discover_our_brands') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-home d-flex">
|
||||
<div class="container-fluid">
|
||||
<div v-if="appState.brands" class="row h-100 align-items-center">
|
||||
<div
|
||||
v-for="(brand, brandIndex) of appState.brands()"
|
||||
:key="brandIndex"
|
||||
:class="{
|
||||
'col-12 col-md-6 px-5 my-3': true,
|
||||
'align-items-center': true,
|
||||
'col-12': appState.brands().length == 1,
|
||||
'col-12 col-md-6 px-5 my-3': appState.brands().length > 1,
|
||||
}"
|
||||
>
|
||||
<div
|
||||
:class="{
|
||||
'd-flex align-items-center h-100 my-5': true,
|
||||
'justify-content-start': brandIndex %2 !== 0,
|
||||
'justify-content-end': brandIndex %2 === 0,
|
||||
'd-flex h-100 my-2': true,
|
||||
'justify-content-start': brandIndex %2 !== 0 && appState.brands().length > 1,
|
||||
'justify-content-end': brandIndex %2 === 0 && appState.brands().length > 1,
|
||||
'justify-content-center': appState.brands().length === 1,
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class="d-inline-block text-center"
|
||||
class="brand d-inline-block text-center shadow"
|
||||
role="button"
|
||||
:title="t('view_brand_ranges', {'brand_name': transField(brand, 'name')})"
|
||||
data-bs-toggle="tooltip"
|
||||
|
|
@ -76,15 +53,6 @@
|
|||
<span class="h4">{{ t('no_brands_available') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-5 pb-5">
|
||||
<div class="col py-5 my-5 pb-5">
|
||||
<img
|
||||
src="assets/pictures/layout/home-bottom-banner.png"
|
||||
alt="Bottom Banner"
|
||||
class="img-fluid"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -175,7 +143,6 @@ export default defineComponent({
|
|||
|
||||
.page-home, .page-home>div {
|
||||
min-height: 100%;
|
||||
|
||||
.brand-picture-wrapper {
|
||||
@include rfs(5rem, border-radius);
|
||||
|
||||
|
|
@ -185,5 +152,8 @@ export default defineComponent({
|
|||
@include rfs(8rem, padding-right);
|
||||
@include rfs(8rem, padding-left);
|
||||
}
|
||||
.brand {
|
||||
border-radius: 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ type Events = {
|
|||
|
||||
const emitter = mitt<Events>();
|
||||
|
||||
|
||||
const $bus = {
|
||||
$on: emitter.on,
|
||||
$emit: emitter.emit,
|
||||
|
|
|
|||
BIN
uwil-expo-icon.png
Normal file
BIN
uwil-expo-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Loading…
Add table
Reference in a new issue