new data heandling and fix loca change bug on main page

Dockerfile

@@ -1,6 +1,6 @@
-FROM node:lts-alpine
+FROM node:stable-alpine
 # build stage
-FROM node:lts-alpine as build-stage
+FROM node:stable-alpine as build-stage
 WORKDIR /app
 COPY package*.json ./
 RUN npm install

package-lock.json

@@ -13,6 +13,7 @@
         "dotenv": "^16.4.7",
         "dotenv-expand": "^12.0.1",
         "magic-string": "^0.30.17",
+        "moment": "^2.30.1",
         "pinia": "^3.0.1",
         "vue": "^3.5.13",
         "vue-i18n": "^10.0.6",
@@ -3976,6 +3977,15 @@
       "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==",
       "license": "MIT"
     },
+    "node_modules/moment": {
+      "version": "2.30.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/mrmime": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz",

package.json

@@ -17,6 +17,7 @@
     "dotenv": "^16.4.7",
     "dotenv-expand": "^12.0.1",
     "magic-string": "^0.30.17",
+    "moment": "^2.30.1",
     "pinia": "^3.0.1",
     "vue": "^3.5.13",
     "vue-i18n": "^10.0.6",

src/App.vue

@@ -1,18 +1,18 @@
 <script lang="ts">
   import { RouterView } from 'vue-router'
-  import Footer from '@/components/Footer.vue'
+  import FooterView from '@/components/Footer.vue'
   export default {
       name: 'App',
       components:{
         RouterView,
-        Footer
+        FooterView
       },
     }
 </script>
 
 <template>
   <RouterView />
-  <Footer />
+  <FooterView />
 </template>
 
 <style>

src/components/Components.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-for="component in components">
+  <div v-for="component in this.componentStore.components">
     <div v-if="component.bg === true" class="component component-bg-top"> </div>
     <div :class="`component ${component.type}`">
         <h3>{{component.label}}</h3>
@@ -15,35 +15,19 @@
  import Content from '@/components/Content.vue'
 
   export default {
-      name: 'Components',
       components:{Content},
-      data () {
-          return {
-            components: [] as Array<any>,
-            componentStore: null as any
-          }
-      },
       setup(){
-        const { t } = useI18n({
+        const { t, locale } = useI18n({
           inheritLocale: true
         })
+        const componentStore = useComponentStore()
+
         return{
-          t
-        }
-      },
-      async mounted () {
-        if(!this.componentStore){
-          this.componentStore = useComponentStore()
+          t,
+          locale,
+          componentStore
         }
-        this.components = await this.componentStore.getComponents(this.$i18n.locale)
-      },
-      async update () {
-        if(!this.componentStore){
-          this.componentStore = useComponentStore()
-        }
-        this.components = await this.componentStore.getComponents(this.$i18n.locale)
       }
-
   }
 </script>
 

src/components/Content.vue

@@ -1,10 +1,8 @@
 <script lang="ts">
-    import { ref, useTemplateRef } from 'vue'
     export default {
-        name: 'Content',
         props:['jsonContent'],
         data: () => {
-            let rawHtml: String = ""
+            const rawHtml: string = ""
             return{
                rawHtml
             }
@@ -13,7 +11,7 @@
             return{
                 props
             }
-            
+
         },
         methods: {
             reloadContent(el: any, jsonContent : Array<any>){
@@ -25,27 +23,27 @@
                                 let contentText = contentItem?.text
                                 contentText = contentText.replace(/\n/g, "<br />");
                                 if(contentItem.bold){
-                                    let bold =  document.createElement("b")
+                                    const bold =  document.createElement("b")
                                     bold.insertAdjacentHTML("beforeend", contentText)
                                     el.append(bold)
                                 }else{
                                     el.insertAdjacentHTML("beforeend", contentText)
                                 }
-                              
+
                                 break
-                            case "paragraph": 
+                            case "paragraph":
                                 itemEl = document.createElement("p")
                                 el.append(itemEl)
-                                
+
                                 break
-                            case "heading": 
+                            case "heading":
                                 itemEl = document.createElement("h"+contentItem.level)
                                 el.append(itemEl)
                                 break
                             case "list":
                                 itemEl = document.createElement("ul")
                                 el.append(itemEl)
-                                break   
+                                break
                             case "list-item":
                                 itemEl = document.createElement("li")
                                 el.append(itemEl)
@@ -65,8 +63,8 @@
                 }
             },
             updateContent(){
-                let div =  document.createElement("div")
-                this.reloadContent(div, this.props.jsonContent) 
+                const div =  document.createElement("div")
+                this.reloadContent(div, this.props.jsonContent)
                 this.rawHtml = div.innerHTML
             }
         },
@@ -77,9 +75,9 @@
             this.updateContent()
         }
     }
-        
+
 </script>
 
 <template >
   <div v-html="rawHtml"></div>
-</template>
+</template>

src/components/Countdown.vue

@@ -2,7 +2,7 @@
     <vue-countdown tag="div" :time="time" :interval="1000" v-slot="{ days, hours, minutes, seconds }">
     <div class="time-box">
 
-    
+
        <div class="time">
         <div class="time-number">{{ days }}</div>
         <div class="time-label">{{ t('Tage') }}</div>
@@ -10,20 +10,20 @@
        <div class="time">
         <div class="time-number">{{ hours }}</div>
         <div class="time-label">{{ t('Stunden') }}</div>
-       </div> 
+       </div>
        <div class="time">
         <div class="time-number">{{ minutes }}</div>
         <div class="time-label">{{ t('Minuten') }}</div>
-       </div> 
+       </div>
        <div class="time">
         <div class="time-number">{{ seconds }}</div>
         <div class="time-label">{{ t('Sekunden') }}</div>
-       </div> 
-       
+       </div>
+
      </div>
-       
-       
-       
+
+
+
     </vue-countdown>
 </template>
 
@@ -78,14 +78,14 @@
 
 
 </style>
-  
+
   <script lang="ts">
   import { useI18n } from 'vue-i18n'
   export default {
     data() {
       const now = new Date();
       const newYear = new Date(2025, 6, 11, 14, 30);
-      
+
       return {
         time: newYear.getTime() - now.getTime(),
       }
@@ -99,4 +99,4 @@
           }
     }
   };
-  </script>
+  </script>

src/components/Footer.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
   import Navigation from '@/components/Navigation.vue'
   export default {
-      name: 'Footer',
+      name: 'FooterView',
       components:{
         Navigation
       },

src/components/Navigation.vue

@@ -69,18 +69,16 @@ nav a:first-of-type {
     import { useFooterLinksStore } from '@/stores/footer-content-pages'
     import { useTimelineStore } from '@/stores/timeline'
     import { useComponentStore } from '@/stores/component'
+    import { usePageStore } from '@/stores/pages'
     import {loadDynamicPages} from '@/router'
     import { useI18n } from 'vue-i18n'
     import { useRoute } from 'vue-router'
 
     export default {
-        name: 'Navigation',
         data () {
             return {
             links: [] as Array<any>,
             error: null as any,
-            footerLinksStroe: null as any,
-
             }
         },
         setup(){
@@ -88,38 +86,31 @@ nav a:first-of-type {
             inheritLocale: true
           })
           const route = useRoute()
-
+          const footerLinksStroe = useFooterLinksStore()
           return{
             t,
-            route
+            route,
+            footerLinksStroe
           }
         },
         async mounted () {
-          if(!this.footerLinksStroe){
-            this.footerLinksStroe = useFooterLinksStore()
-          }
-
             this.links = await this.footerLinksStroe.getLinks(this.$i18n.locale)
         },
         methods:{
           async changeLocale(){
             const locale = this.$i18n.locale
-            loadDynamicPages(locale)
             localStorage.setItem('lang', locale)
-            if(!this.footerLinksStroe){
-              this.footerLinksStroe = useFooterLinksStore()
-            }
-            useTimelineStore().setLocale(locale)
-            useComponentStore().setLocale(locale)
+            const pageStore = usePageStore()
+            await pageStore.setLocale(locale)
+            await useTimelineStore().setLocale(locale)
+            await useComponentStore().setLocale(locale)
+            loadDynamicPages(pageStore.pages)
             const oldLink = this.footerLinksStroe.getLinkByLabel(this.route.name)
             this.links = await this.footerLinksStroe.getLinks(locale)
-            const newLink = this.footerLinksStroe.getLinkByLabel(oldLink.localizations[0].Label)
-            if(newLink){
+            if(oldLink){
+              const newLink = this.footerLinksStroe.getLinkByLabel(oldLink.localizations[0].Label)
               setTimeout(() => {this.$router.push(newLink.page.path)}, 100)
-            }else{
-              setTimeout(() => {this.$router.push("/")}, 100)
             }
-
           }
         }
 

src/components/Timeline.vue

@@ -1,9 +1,10 @@
 <template>
     <div class="timeline">
-        <div v-for="timeline in timelines" :class="`container ${timeline.posittion}`">
+        <div v-for="timeline in this.timelineStore.timelines" :class="`container ${timeline.posittion}`">
             <div class="content">
-            <h2>{{timeline.label}}</h2>
-            <p>{{timeline.description}}</p>
+              <p :class="`text-${timeline.posittion}`">{{moment(timeline.date).format("DD.MMM.YYYY HH:mm")}}</p>
+              <h2>{{timeline.label}}</h2>
+              <p>{{timeline.discription}}</p>
             </div>
         </div>
     </div>
@@ -12,38 +13,20 @@
 <script lang="ts">
    import { useTimelineStore } from '@/stores/timeline'
    import { useI18n } from 'vue-i18n'
+   import moment from 'moment'
 
     export default {
-        name: 'Timeline',
-        data () {
-            return {
-              timelines: [] as Array<any>,
-              timelineStore: null as any
-            }
-        },
         setup(){
+          const timelineStore = useTimelineStore()
           const { t } = useI18n({
             inheritLocale: true
           })
           return{
-            t
-          }
-        },
-        async mounted () {
-          if(!this.timelineStore){
-            this.timelineStore = useTimelineStore()
+            t,
+            timelineStore,
+            moment
           }
-          this.timelines = await this.timelineStore.getTimelines(this.$i18n.locale)
-          console.log(this.timelines)
         },
-        async update () {
-          if(!this.timelineStore){
-            this.timelineStore = useTimelineStore()
-          }
-          this.timelines = await this.timelineStore.getTimelines(this.$i18n.locale)
-          console.log(this.timelines)
-        }
-
     }
 </script>
 
@@ -55,6 +38,15 @@
 h2{
     color: white;
 }
+p{
+    color: white;
+}
+.text-left{
+  text-align: right;
+}
+.text-left, .text-right{
+  font-weight: bold;
+}
 
 /* Set a background color */
 body {

src/main.ts

@@ -9,8 +9,8 @@ import { i18n } from "./i18n";
 import VueCountdown from '@chenfengyuan/vue-countdown';
 import { useFooterLinksStore } from '@/stores/footer-content-pages'
 import { useTimelineStore } from '@/stores/timeline'
-
-
+import { useComponentStore } from '@/stores/component'
+import { usePageStore } from '@/stores/pages'
 
 
 const pinia = createPinia()
@@ -25,9 +25,12 @@ app.use(pinia)
      i18n.global.locale = i18n.global.availableLocales.find((value)=>value ==lang )!
      await setTimeout(()=>{localStorage.setItem('lang', lang!)}, 1000)
    }
+const pageStroe = usePageStore()
+await pageStroe.setLocale(lang)
 await useFooterLinksStore().setLocale(lang)
 await useTimelineStore().setLocale(lang)
-await loadDynamicPages(lang)
+await useComponentStore().setLocale(lang)
+loadDynamicPages(pageStroe.pages)
 app.use(router)
 app.component(VueCountdown.name!, VueCountdown)
 

src/router/index.ts

@@ -1,33 +1,20 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import HomeView from '@/views/HomeView.vue'
 import PageView from '@/views/PageView.vue'
-import { usePageStore } from '@/stores/pages'
-import axios from 'axios'
 
-let locale:string = (localStorage.getItem('lang') || 'de')
-let pages = [] as Array<any>
 const addPages = [] as Array<any>
 
 
-export async function loadDynamicPages(newLocale:string){
-  locale = newLocale
-  const response = await axios.get('https://strapi.kornblum.one/api/pages?locale='+locale, {
-    headers: {
-      Authorization: "Bearer " + import.meta.env.VITE_STRAPI_TOKEN,
-    },
-  })
-  pages = response.data.data
+export function loadDynamicPages(pages:Array<any>){
+
   for (const page of addPages){
-    router.removeRoute(page.Title)
+    router.removeRoute(page.Title!)
   }
   for (const page of pages){
     addPages.push(page)
     router.addRoute({path: page.path, name: page.Title, sensitive: false, component: PageView})
 
   }
-
-   const pageStore = await usePageStore()
-   pageStore.pages = pages
 }
 
 const router = createRouter({
@@ -41,10 +28,5 @@ const router = createRouter({
   ],
 })
 
-router.beforeResolve( o => {
-    const pageStore = usePageStore()
-    pageStore.pages = pages
-})
-
 
 export default router

src/stores/pages.ts

@@ -1,18 +1,30 @@
 import { defineStore } from 'pinia'
-
+import axios from 'axios'
 
 
 export const usePageStore = defineStore('pages',{
-  state: () => ({ pages: [] as Array<any> }),
+  state: () => ({
+    locale: (localStorage.getItem('lang') || 'de'),
+    pages: [] as Array<any>
+  }),
 
    actions: {
-    getPages(){
-      return this.pages
-
-    },
     getPageByTitle (title: string) {
       return this.pages.find((page) => page.Title === title)
     },
-
+    async setLocale(locale: string){
+      if(this.pages.length == 0 || this.locale != locale ){
+        this.locale = locale
+        await this.fetchPages()
+      }
+    },
+    async fetchPages(){
+        const response = await axios.get('https://strapi.kornblum.one/api/pages?locale='+this.locale, {
+          headers: {
+            Authorization: "Bearer " + import.meta.env.VITE_STRAPI_TOKEN,
+          },
+        })
+        this.pages = response.data.data
+    }
    }
  })

src/stores/timeline.ts

@@ -22,7 +22,7 @@ export const useTimelineStore = defineStore('timelines',{
     },
 
     async fetchTimelines(){
-      const response = await axios.get('https://strapi.kornblum.one/api/timelines?locale='+this.locale, {
+      const response = await axios.get('https://strapi.kornblum.one/api/timelines?sort=date&locale='+this.locale, {
       headers: {
           Authorization: "Bearer "+ import.meta.env.VITE_STRAPI_TOKEN,
       },

src/views/PageView.vue

@@ -7,24 +7,24 @@
         components:{
             Content
         },
-        setup() {
-            const route = useRoute()
+        data () {
             return {
-                route
+              page: null as any,
             }
         },
-        data () {
+        setup() {
+            const route = useRoute()
+            const pageStore = usePageStore()
             return {
-                page: null as any
+                route,
+                pageStore
             }
         },
-        async mounted () {
-            const pageStore = await usePageStore()
-            this.page = await pageStore.getPageByTitle(this.route.name as string)
+        mounted () {
+            this.page = this.pageStore.getPageByTitle(this.route.name as string)
         },
-        async updated(){
-            const pageStore = await usePageStore()
-            this.page = await pageStore.getPageByTitle(this.route.name as string)
+        updated(){
+            this.page = this.pageStore.getPageByTitle(this.route.name as string)
         }
     }
 </script>