add interface

src/App.vue

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

src/components/Components.vue → src/components/ComponentsComponent.vue

@@ -3,7 +3,7 @@
     <div v-if="component.bg === true" class="component component-bg-top"> </div>
     <div :class="`component ${component.type}`">
         <h3>{{component.label}}</h3>
-        <Content :jsonContent="component.content" />
+        <ContentComponent :jsonContent="component.content" />
     </div>
     <div v-if="component.bg === true" class="component component-bg-bottom"> </div>
   </div>
@@ -12,10 +12,10 @@
 <script lang="ts">
  import { useComponentStore } from '@/stores/component'
  import { useI18n } from 'vue-i18n'
- import Content from '@/components/Content.vue'
+ import ContentComponent from '@/components/ContentComponent.vue'
 
   export default {
-      components:{Content},
+      components:{ContentComponent},
       setup(){
         const { t, locale } = useI18n({
           inheritLocale: true

src/components/Content.vue → src/components/ContentComponent.vue

@@ -1,10 +1,11 @@
 <script lang="ts">
+import type { Content } from '../stores/content'
     export default {
         props:['jsonContent'],
         data: () => {
             const rawHtml: string = ""
             return{
-               rawHtml
+              rawHtml
             }
         },
         setup(props){
@@ -14,13 +15,16 @@
 
         },
         methods: {
-            reloadContent(el: any, jsonContent : Array<any>){
+            reloadContent(el: HTMLElement, jsonContent : Array<Content>){
                 if(jsonContent && jsonContent.length > 0){
                     for(const contentItem of jsonContent){
-                        let itemEl = null
+                        let itemEl:HTMLElement | null = null
                         switch(contentItem?.type){
                             case "text":
                                 let contentText = contentItem?.text
+                                if(!contentText){
+                                    contentText = ""
+                                }
                                 contentText = contentText.replace(/\n/g, "<br />");
                                 if(contentItem.bold){
                                     const bold =  document.createElement("b")
@@ -50,14 +54,14 @@
                                 break
                             case "link":
                                 itemEl = document.createElement("a")
-                                itemEl.href = contentItem.url
-                                el.append(itemEl)
+                                itemEl.setAttribute("href", contentItem.url || "#")
+                                el.append(itemEl!)
                                 break
 
 
                         }
                         if(contentItem.children && contentItem.children.length > 0){
-                           this.reloadContent(itemEl, contentItem.children)
+                          this.reloadContent(itemEl!, contentItem.children)
                         }
                     }
                 }

src/components/Footer.vue → src/components/FooterComponent.vue

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

src/components/Timeline.vue → src/components/TimelineComponent.vue

@@ -15,7 +15,7 @@
    import { useTimelineStore } from '@/stores/timeline'
    import { useI18n } from 'vue-i18n'
    import moment from 'moment'
-   import Map from './Map.vue'
+   import Map from './MapComponent.vue'
 
     export default {
       components:{Map},

src/stores/component.ts

@@ -1,10 +1,24 @@
 import { defineStore } from 'pinia'
 import axios from 'axios'
+import type { Content } from './content'
+
+
+export interface Component {
+  id: string;
+  documentId: string;
+  label: string;
+  content: Array<Content>;
+  bg: boolean
+  type: "component-dark" | "component-light";
+  locale: string;
+
+}
+
 
 
 export const useComponentStore = defineStore('components',{
   state: () => ({
-    components: [] as Array<any>,
+    components: [] as Array<Component>,
     locale: (localStorage.getItem('lang') || 'de')
   }),
   actions: {

src/stores/content.ts

@@ -0,0 +1,9 @@
+export interface Content {
+  type: string;
+  level?: number;
+  text?: string;
+  bold?: boolean;
+  italic?: boolean;
+  url?: string;
+  children?: Array<Content>
+}

src/stores/footer-content-pages.ts

@@ -1,21 +1,29 @@
 import { defineStore } from 'pinia'
 import axios from 'axios'
 
+export interface FooterLink {
+  id: string;
+  Label: string;
+  page: {
+    path: string;
+  };
+}
+
 
 export const useFooterLinksStore = defineStore('footerLinks',{
   state: () => ({
                 locale:  (localStorage.getItem('lang') || 'de'),
-                links: []
+                links: [] as Array<FooterLink>
               }),
 
-   actions: {
+  actions: {
     async getLinks(locale:string){
       await this.setLocale(locale)
       return this.links
 
     },
     getLinkByLabel(oldLabel:string){
-      return this.links.find((link:any) => (link.Label as string) == oldLabel)
+      return this.links.find((link:FooterLink) => (link.Label as string) == oldLabel)
 
     },
 

src/stores/pages.ts

@@ -1,11 +1,17 @@
 import { defineStore } from 'pinia'
 import axios from 'axios'
 
+import type { Content } from './content'
+
+interface Page {
+  Title: string;
+  Content: Array<Content>;
+}
 
 export const usePageStore = defineStore('pages',{
   state: () => ({
     locale: (localStorage.getItem('lang') || 'de'),
-    pages: [] as Array<any>
+    pages: [] as Array<Page>
   }),
 
    actions: {

src/stores/timeline.ts

@@ -1,10 +1,22 @@
 import { defineStore } from 'pinia'
 import axios from 'axios'
 
+import type { Content } from './content'
+
+interface Timeline {
+  id: string;
+  label: string;
+  discription: string;
+  date: string;
+  content: Array<Content>;
+  posittion: "left" | "right";
+  mapQuery?: string;
+}
+
 
 export const useTimelineStore = defineStore('timelines',{
   state: () => ({
-    timelines: [] as Array<any>,
+    timelines: [] as Array<Timeline>,
     locale: (localStorage.getItem('lang') || 'de')
   }),
   actions: {

src/views/HomeView.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
   import logo from '../assets/images/logo-blue.svg'
-  import Countdown from '@/components/Countdown.vue';
-  import Timeline from '@/components/Timeline.vue';
-  import Components from '@/components/Components.vue';
-  import Map from '@/components/Map.vue';
+  import Countdown from '@/components/CountdownComponent.vue';
+  import Timeline from '@/components/TimelineComponent.vue';
+  import Components from '@/components/ComponentsComponent.vue';
   import { useI18n } from 'vue-i18n'
   const { t } = useI18n({
             inheritLocale: true
@@ -29,9 +28,6 @@
       <div class="component component-bg-top"> </div>
       <div class="component component-padding"><Timeline/></div>
       <div class="component component-bg-bottom"> </div>
-      <!--<div class="component component-dark component-padding">
-        <Map q="Abendkamp%2017,%2029646%20Bispingen"/>
-      </div>-->
     </div>
   </main>
 </template>

src/views/PageView.vue

@@ -1,6 +1,6 @@
 <script lang="ts">
    import { usePageStore } from '../stores/pages'
-   import Content from '@/components/Content.vue'
+   import Content from '@/components/ContentComponent.vue'
    import { useRoute } from 'vue-router'
     export default {
         name: 'PageView',