Merge pull request #304 from yileifeng/lang-landing-page

Add new lang selector landing page
ramp4-pcar4 · Jun 5, 2024 · 35b4caf · 35b4caf
2 parents 3ec2b09 + 968192c
commit 35b4caf
Show file tree

Hide file tree

Showing 28 changed files with 95 additions and 28 deletions.
diff --git a/.github/workflows/pages.yml b/.github/workflows/pages.yml
@@ -33,5 +33,5 @@ jobs:
                         issue_number: context.issue.number,
                         owner: context.repo.owner,
                         repo: context.repo.repo,
-                        body: `Your demo site is ready! 🚀 Visit it here: https://${{github.repository_owner}}.github.io/storylines-editor/${{github.head_ref}}/#/en/editor`
+                        body: `Your demo site is ready! 🚀 Visit it here: https://${{github.repository_owner}}.github.io/storylines-editor/${{github.head_ref}}`
                       })
diff --git a/public/index-ca-en.html b/public/index-ca-en.html
@@ -5,7 +5,7 @@
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
         <meta content="width=device-width,initial-scale=1" name="viewport" />
 
-        <title>RAMP Storylines</title>
+        <title>RAMP Storylines Editor</title>
 
         <script src="https://code.highcharts.com/highcharts.js" type="text/javascript" charset="utf-8"></script>
         <script src="https://code.highcharts.com/modules/data.js" type="text/javascript" charset="utf-8"></script>

diff --git a/public/index-ca-fr.html b/public/index-ca-fr.html
@@ -5,7 +5,7 @@
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
         <meta content="width=device-width,initial-scale=1" name="viewport" />
 
-        <title>Scénarios de PCAR</title>
+        <title>Éditeur de scénarios de la PCAR</title>
 
         <script src="https://code.highcharts.com/highcharts.js" type="text/javascript" charset="utf-8"></script>
         <script src="https://code.highcharts.com/modules/data.js" type="text/javascript" charset="utf-8"></script>

diff --git a/public/index.html b/public/index.html
@@ -12,7 +12,7 @@
         <link rel="stylesheet" href="scripts/highcharts-editor/highcharts-editor.min.css" />
         <link rel="stylesheet" href="scripts/ramp4/ramp.css" />
 
-        <title><%= htmlWebpackPlugin.options.title %></title>
+        <title>RAMP Storylines Editor</title>
     </head>
     <body>
         <div id="app"></div>

diff --git a/src/components/editor/chart-editor.vue → src/components/chart-editor.vue b/src/components/editor/chart-editor.vue → src/components/chart-editor.vue
@@ -74,8 +74,8 @@ import {
     SlideshowPanel,
     SourceCounts
 } from '@/definitions';
-import ChartPreviewV from '@/components/editor/helpers/chart-preview.vue';
-import ConfirmationModalV from '@/components/editor/helpers/confirmation-modal.vue';
+import ChartPreviewV from './helpers/chart-preview.vue';
+import ConfirmationModalV from './helpers/confirmation-modal.vue';
 import draggable from 'vuedraggable';
 
 @Options({

diff --git a/src/components/editor/dynamic-editor.vue → src/components/dynamic-editor.vue b/src/components/editor/dynamic-editor.vue → src/components/dynamic-editor.vue
diff --git a/src/components/editor/editor.vue → src/components/editor.vue b/src/components/editor/editor.vue → src/components/editor.vue
@@ -149,8 +149,8 @@
 <script lang="ts">
 import { Options, Prop, Vue, Watch } from 'vue-property-decorator';
 import { ConfigFileStructure, MetadataContent, Slide, SourceCounts, StoryRampConfig } from '@/definitions';
-
 import { VueSpinnerOval } from 'vue3-spinners';
+
 import SlideEditorV from './slide-editor.vue';
 import SlideTocV from './slide-toc.vue';
 import MetadataContentV from './helpers/metadata-content.vue';

diff --git a/...mponents/editor/helpers/chart-preview.vue → src/components/helpers/chart-preview.vue b/...mponents/editor/helpers/chart-preview.vue → src/components/helpers/chart-preview.vue
diff --git a/...nts/editor/helpers/confirmation-modal.vue → ...components/helpers/confirmation-modal.vue b/...nts/editor/helpers/confirmation-modal.vue → ...components/helpers/confirmation-modal.vue
diff --git a/...mponents/editor/helpers/custom-editor.vue → src/components/helpers/custom-editor.vue b/...mponents/editor/helpers/custom-editor.vue → src/components/helpers/custom-editor.vue
diff --git a/...mponents/editor/helpers/image-preview.vue → src/components/helpers/image-preview.vue b/...mponents/editor/helpers/image-preview.vue → src/components/helpers/image-preview.vue
diff --git a/...omponents/editor/helpers/loading-page.vue → src/components/helpers/loading-page.vue b/...omponents/editor/helpers/loading-page.vue → src/components/helpers/loading-page.vue
diff --git a/...nents/editor/helpers/metadata-content.vue → src/components/helpers/metadata-content.vue b/...nents/editor/helpers/metadata-content.vue → src/components/helpers/metadata-content.vue
diff --git a/...nts/editor/helpers/time-slider-editor.vue → ...components/helpers/time-slider-editor.vue b/...nts/editor/helpers/time-slider-editor.vue → ...components/helpers/time-slider-editor.vue
@@ -6,14 +6,14 @@
                 class="editor-input"
                 type="number"
                 :value="config.range[0]"
-                @input="$emit('time-slider-changed', 'range', 0, $event.target.value)"
+                @input="$emit('time-slider-changed', 'range', 0, ($event.target as HTMLInputElement).value)"
             />
             <span class="mx-3"> {{ $t('editor.map.timeslider.to') }} </span>
             <input
                 class="editor-input"
                 type="number"
                 :value="config.range[1]"
-                @input="$emit('time-slider-changed', 'range', 1, $event.target.value)"
+                @input="$emit('time-slider-changed', 'range', 1, ($event.target as HTMLInputElement).value)"
             />
         </div>
         <br />
@@ -23,14 +23,14 @@
                 class="editor-input ml-3"
                 type="number"
                 :value="config.start[0]"
-                @input="$emit('time-slider-changed', 'start', 0, $event.target.value)"
+                @input="$emit('time-slider-changed', 'start', 0, ($event.target as HTMLInputElement).value)"
             />
             <span class="mx-3"> {{ $t('editor.map.timeslider.to') }} </span>
             <input
                 class="editor-input"
                 type="number"
                 :value="config.start[1]"
-                @input="$emit('time-slider-changed', 'start', 1, $event.target.value)"
+                @input="$emit('time-slider-changed', 'start', 1, ($event.target as HTMLInputElement).value)"
             />
         </div>
         <br />
@@ -49,7 +49,7 @@
             <input
                 class="editor-input"
                 :value="config.attribute"
-                @input="$emit('time-slider-changed', 'attribute', undefined, $event.target.value)"
+                @input="$emit('time-slider-changed', 'attribute', undefined, ($event.target as HTMLInputElement).value)"
             />
         </div>
         <br />
@@ -59,7 +59,7 @@
             <input
                 class="editor-input w-full"
                 :value="config.layers || ''"
-                @input="$emit('time-slider-changed', 'layers', undefined, $event.target.value)"
+                @input="$emit('time-slider-changed', 'layers', undefined, ($event.target as HTMLInputElement).value)"
             />
         </div>
         <br /><br />

diff --git a/...mponents/editor/helpers/video-preview.vue → src/components/helpers/video-preview.vue b/...mponents/editor/helpers/video-preview.vue → src/components/helpers/video-preview.vue
diff --git a/src/components/editor/landing.vue → src/components/home.vue b/src/components/editor/landing.vue → src/components/home.vue
@@ -20,10 +20,10 @@
 
 <script lang="ts">
 import { Vue } from 'vue-property-decorator';
-import { useUserStore } from '../../stores/userStore';
+import { useUserStore } from '../stores/userStore';
 
-export default class LandingV extends Vue {
-    get userName() {
+export default class HomeV extends Vue {
+    get userName(): string {
         const userStore = useUserStore();
         return userStore.userProfile.userName || 'Guest';
     }

diff --git a/src/components/editor/image-editor.vue → src/components/image-editor.vue b/src/components/editor/image-editor.vue → src/components/image-editor.vue
@@ -83,7 +83,7 @@
 import { Options, Prop, Vue } from 'vue-property-decorator';
 import { ConfigFileStructure, ImageFile, ImagePanel, PanelType, SlideshowPanel, SourceCounts } from '@/definitions';
 import draggable from 'vuedraggable';
-import ImagePreviewV from '@/components/editor/helpers/image-preview.vue';
+import ImagePreviewV from './helpers/image-preview.vue';
 
 @Options({
     components: {

diff --git a/src/components/landing.vue b/src/components/landing.vue
@@ -0,0 +1,55 @@
+<template>
+    <div class="relative">
+        <div class="absolute top-0 right-0 bg-white text-black p-2">
+            {{ $t('editor.landing.greeting') }} {{ userName }}!
+        </div>
+        <div class="flex flex-col items-center">
+            <h1 class="text-2xl font-bold mt-4">{{ title }}</h1>
+            <div class="flex justify-center mt-12 mb-32">
+                <div class="lang-selector border-4 border-gray-400 border-solid mx-8">
+                    <router-link
+                        :to="{ name: 'home', params: { lang: 'en' } }"
+                        class="flex justify-center h-full w-full"
+                        target
+                    >
+                        <button class="text-2xl text-white font-bold">English</button>
+                    </router-link>
+                </div>
+                <div class="lang-selector border-4 border-gray-400 border-solid mx-8">
+                    <router-link
+                        :to="{ name: 'home', params: { lang: 'fr' } }"
+                        class="flex justify-center h-full w-full"
+                        target
+                    >
+                        <button class="text-2xl text-white font-bold">Français</button>
+                    </router-link>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Vue } from 'vue-property-decorator';
+import { useUserStore } from '../stores/userStore';
+
+export default class LandingV extends Vue {
+    title = document.title;
+
+    get userName(): string {
+        const userStore = useUserStore();
+        return userStore.userProfile.userName || 'Guest';
+    }
+}
+</script>
+
+<style lang="scss">
+.lang-selector {
+    height: 18vh;
+    width: 32vh;
+    background-color: #26374a;
+}
+.lang-selector:hover {
+    background-color: #2572b4;
+}
+</style>
diff --git a/src/components/editor/map-editor.vue → src/components/map-editor.vue b/src/components/editor/map-editor.vue → src/components/map-editor.vue
@@ -49,7 +49,7 @@
 import { Options, Prop, Vue } from 'vue-property-decorator';
 import { ConfigFileStructure, MapPanel, SourceCounts, TimeSliderConfig } from '@/definitions';
 import { VueFinalModal } from 'vue-final-modal';
-import defaultConfig from '../../../public/ramp-default.json';
+import defaultConfig from '../../public/ramp-default.json';
 import TimeSliderEditorV from './helpers/time-slider-editor.vue';
 import { createInstance } from 'ramp-config-editor_editeur-config-pcar';
 import 'ramp-config-editor_editeur-config-pcar/dist/style.css';
@@ -246,12 +246,12 @@ select {
     }
 }
 .edit-map {
-    content: url('../../assets/edit-icon.svg');
+    content: url('../assets/edit-icon.svg');
     margin: 0 auto;
     margin-bottom: 20px;
 }
 .add-map {
-    content: url('../../assets/add.svg');
+    content: url('../assets/add.svg');
     margin: 0 auto;
     margin-bottom: 20px;
 }

diff --git a/src/components/editor/metadata-editor.vue → src/components/metadata-editor.vue b/src/components/editor/metadata-editor.vue → src/components/metadata-editor.vue
@@ -317,7 +317,7 @@ import {
 } from '@/definitions';
 import { VueSpinnerOval } from 'vue3-spinners';
 import { VueFinalModal } from 'vue-final-modal';
-import { useUserStore } from '../../stores/userStore';
+import { useUserStore } from '../stores/userStore';
 
 const JSZip = require('jszip');
 const axios = require('axios').default;

diff --git a/src/components/editor/preview.vue → src/components/preview.vue b/src/components/editor/preview.vue → src/components/preview.vue
@@ -56,6 +56,7 @@
 import { Options, Vue } from 'vue-property-decorator';
 import { ConfigFileStructure, StoryRampConfig } from '@/definitions';
 import { VueSpinnerOval } from 'vue3-spinners';
+import { AxiosError } from 'axios';
 
 @Options({
     components: {
@@ -128,12 +129,13 @@ export default class StoryPreviewV extends Vue {
                     });
                 }
 
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 fetch(this.apiUrl + `/retrieveMessages`).then((res: any) => {
                     axios
                         .post(process.env.VUE_APP_NET_API_URL + '/api/log/create', {
                             messages: res.data.messages
                         })
-                        .catch((error: any) => console.log(error.response || error));
+                        .catch((error: AxiosError) => console.log(error.response || error));
                 });
             });
         } else {
@@ -197,7 +199,7 @@ $font-list: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     }
 
     .prose a:not([panel])::after {
-        content: url('../../assets/popout.svg');
+        content: url('../assets/popout.svg');
     }
 
     .w-mobile-full {

diff --git a/src/components/editor/slide-editor.vue → src/components/slide-editor.vue b/src/components/editor/slide-editor.vue → src/components/slide-editor.vue
diff --git a/src/components/editor/slide-toc.vue → src/components/slide-toc.vue b/src/components/editor/slide-toc.vue → src/components/slide-toc.vue
diff --git a/src/components/editor/slideshow-editor.vue → src/components/slideshow-editor.vue b/src/components/editor/slideshow-editor.vue → src/components/slideshow-editor.vue
diff --git a/src/components/editor/text-editor.vue → src/components/text-editor.vue b/src/components/editor/text-editor.vue → src/components/text-editor.vue
diff --git a/src/components/editor/video-editor.vue → src/components/video-editor.vue b/src/components/editor/video-editor.vue → src/components/video-editor.vue
@@ -86,8 +86,9 @@
 <script lang="ts">
 import { Options, Prop, Vue } from 'vue-property-decorator';
 import { ConfigFileStructure, SourceCounts, VideoFile, VideoPanel } from '@/definitions';
+
 import draggable from 'vuedraggable';
-import VideoPreviewV from '@/components/editor/helpers/video-preview.vue';
+import VideoPreviewV from './helpers/video-preview.vue';
 
 @Options({
     components: {

diff --git a/src/lang/lang.csv b/src/lang/lang.csv
@@ -21,6 +21,8 @@ timeslider.play,Play,1,Lecture,1
 timeslider.pause,Pause,1,Pause,1
 fullscreen.activate,Enter Fullscreen,1,Afficher le mode plein écran,1
 fullscreen.deactivate,Exit Fullscreen,1,Quitter le mode plein écran,1
+editor.lang.en,English,1,Anglais,1
+editor.lang.fr,French,1,Français,1
 editor.feedback,Send Us Feedback,1,Envoyez-nous vos commentaires,0
 editor.feedback.subject,Storylines Editor Feedback,1,Commentaires de l'éditeur de scénarios,0
 editor.window.title,RAMP Storylines Editor,1,Éditeur de scénarios de la PCAR,1

diff --git a/src/router/index.ts b/src/router/index.ts
@@ -1,13 +1,20 @@
-import LandingV from '@/components/editor/landing.vue';
-import MetadataEditorV from '@/components/editor/metadata-editor.vue';
-import StoryPreviewV from '@/components/editor/preview.vue';
+import LandingV from '@/components/landing.vue';
+import HomeV from '@/components/home.vue';
+import MetadataEditorV from '@/components/metadata-editor.vue';
+import StoryPreviewV from '@/components/preview.vue';
 import { createRouter, createWebHashHistory, RouteLocationNormalized } from 'vue-router';
 
 const routes = [
+    {
+        path: '/',
+        name: 'landing',
+        component: LandingV,
+        meta: { title: 'editor.window.title' }
+    },
     {
         path: '/:lang/editor',
         name: 'home',
-        component: LandingV,
+        component: HomeV,
         meta: { title: 'editor.window.title' }
     },
     {