From abde59ff569f039b92b3b6f8133483f75e7bf16a Mon Sep 17 00:00:00 2001
From: Erwin Sperling <bohnjs@outlook.de>
Date: Sun, 22 Dec 2024 15:03:43 +0100
Subject: [PATCH] adds localization, changed frontend

---
 front/bahnui-front/package-lock.json          | 87 +++++++++++++++++++
 front/bahnui-front/package.json               |  2 +
 front/bahnui-front/src/App.vue                | 29 ++++++-
 front/bahnui-front/src/components/routing.vue | 18 +++-
 front/bahnui-front/src/components/search.vue  | 15 ++--
 front/bahnui-front/src/locales/de.json        | 19 ++++
 front/bahnui-front/src/locales/en.json        | 19 ++++
 front/bahnui-front/src/main.js                | 36 ++++----
 8 files changed, 192 insertions(+), 33 deletions(-)
 create mode 100644 front/bahnui-front/src/locales/de.json
 create mode 100644 front/bahnui-front/src/locales/en.json

diff --git a/front/bahnui-front/package-lock.json b/front/bahnui-front/package-lock.json
index e6ae1f4..7ac737b 100644
--- a/front/bahnui-front/package-lock.json
+++ b/front/bahnui-front/package-lock.json
@@ -11,6 +11,8 @@
         "axios": "^1.7.7",
         "core-js": "^3.8.3",
         "vue": "^3.2.13",
+        "vue-i18n": "^10.0.5",
+        "vue-router": "^4.5.0",
         "vuetify": "^3.7.4"
       },
       "devDependencies": {
@@ -1776,6 +1778,50 @@
       "deprecated": "Use @eslint/object-schema instead",
       "dev": true
     },
+    "node_modules/@intlify/core-base": {
+      "version": "10.0.5",
+      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-10.0.5.tgz",
+      "integrity": "sha512-F3snDTQs0MdvnnyzTDTVkOYVAZOE/MHwRvF7mn7Jw1yuih4NrFYLNYIymGlLmq4HU2iIdzYsZ7f47bOcwY73XQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/message-compiler": "10.0.5",
+        "@intlify/shared": "10.0.5"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/message-compiler": {
+      "version": "10.0.5",
+      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-10.0.5.tgz",
+      "integrity": "sha512-6GT1BJ852gZ0gItNZN2krX5QAmea+cmdjMvsWohArAZ3GmHdnNANEcF9JjPXAMRtQ6Ux5E269ymamg/+WU6tQA==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/shared": "10.0.5",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/shared": {
+      "version": "10.0.5",
+      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-10.0.5.tgz",
+      "integrity": "sha512-bmsP4L2HqBF6i6uaMqJMcFBONVjKt+siGluRq4Ca4C0q7W2eMaVZr8iCgF9dKbcVXutftkC7D6z2SaSMmLiDyA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
@@ -2768,6 +2814,12 @@
       "integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==",
       "dev": true
     },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
+      "license": "MIT"
+    },
     "node_modules/@vue/reactivity": {
       "version": "3.5.13",
       "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.13.tgz",
@@ -10433,6 +10485,26 @@
       "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
       "dev": true
     },
+    "node_modules/vue-i18n": {
+      "version": "10.0.5",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-10.0.5.tgz",
+      "integrity": "sha512-9/gmDlCblz3i8ypu/afiIc/SUIfTTE1mr0mZhb9pk70xo2csHAM9mp2gdQ3KD2O0AM3Hz/5ypb+FycTj/lHlPQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/core-base": "10.0.5",
+        "@intlify/shared": "10.0.5",
+        "@vue/devtools-api": "^6.5.0"
+      },
+      "engines": {
+        "node": ">= 16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue-loader": {
       "version": "17.4.2",
       "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-17.4.2.tgz",
@@ -10471,6 +10543,21 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/vue-router": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.0.tgz",
+      "integrity": "sha512-HDuk+PuH5monfNuY+ct49mNmkCRK4xJAV9Ts4z9UFc4rzdDnxQLyCMGGc8pKhZhHTVzfanpNwB/lwqevcBwI4w==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^6.6.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/vue-style-loader": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
diff --git a/front/bahnui-front/package.json b/front/bahnui-front/package.json
index 33d6df2..21b7432 100644
--- a/front/bahnui-front/package.json
+++ b/front/bahnui-front/package.json
@@ -11,6 +11,8 @@
     "axios": "^1.7.7",
     "core-js": "^3.8.3",
     "vue": "^3.2.13",
+    "vue-i18n": "^10.0.5",
+    "vue-router": "^4.5.0",
     "vuetify": "^3.7.4"
   },
   "devDependencies": {
diff --git a/front/bahnui-front/src/App.vue b/front/bahnui-front/src/App.vue
index 22f45f7..d7a9a43 100644
--- a/front/bahnui-front/src/App.vue
+++ b/front/bahnui-front/src/App.vue
@@ -1,15 +1,29 @@
 <template>
-  <search/>
+  <div class="navbar">
+    <div class="locale-changer">
+      <select v-model="$i18n.locale">
+        <option v-for="locale in $i18n.availableLocales" :key="`locale-${locale}`" :value="locale">{{ locale }}</option>
+      </select>
+    </div>
+    <nav>
+      <RouterLink to="/search">Search</RouterLink>
+    </nav>
+  </div>
+  <main>
+    <RouterView />
+  </main>
 </template>
 
 <script>
-import search from './components/search.vue'
-
 
 export default {
   name: 'App',
   components: {
-    search
+  },
+  methods: {
+    showRouter(){
+      console.log(this.$route);
+    }
   }
 }
 </script>
@@ -23,4 +37,11 @@ export default {
   color: #2c3e50;
   margin-top: 60px;
 }
+.navbar {
+  display:inline-flex;
+  background-color:grey;
+}
+.navbar>* {
+  padding:10px;
+}
 </style>
diff --git a/front/bahnui-front/src/components/routing.vue b/front/bahnui-front/src/components/routing.vue
index ecae8ae..b0a6821 100644
--- a/front/bahnui-front/src/components/routing.vue
+++ b/front/bahnui-front/src/components/routing.vue
@@ -8,16 +8,19 @@
           <div class="linenameinner" :style="{backgroundColor:getLineColors(leg)[1], color:getLineColors(leg)[0]}">{{ leg.direction }}</div>
           </div>
         <div class="lineinfo">
-          <div class="station" >{{ leg.origin.name }}<br/>{{ toTime(leg.departure) }}<p v-if="leg.departurePlatform"> Gleis {{ leg.departurePlatform }} </p></div>
+          <div class="station" >{{ leg.origin.name }}<br/>{{ timeWithDelay(leg.departure, leg.departureDelay) }}<p v-if="leg.departurePlatform"> Gleis {{ leg.departurePlatform }} </p></div>
           <div class="line">
             <p class="zugnummer">{{ leg.line?.fahrtNr }}</p>
             <p class="operator" v-if="!getOperatorLogo(leg.line?.operator)">{{ leg.line?.operator?.name }}</p>
             <img class="operator-logo" :src="getOperatorLogo(leg.line?.operator)" v-if="getOperatorLogo(leg.line?.operator)">
           </div>
-          <div class="station">{{ leg.destination.name }}<br/>{{ toTime(leg.arrival) }} <p v-if="leg.arrivalPlatform">Gleis {{ leg.arrivalPlatform }}</p></div>
+          <div class="station">{{ leg.destination.name }}<br/>{{ timeWithDelay(leg.arrival, leg.arrivalDelay) }} <p v-if="leg.arrivalPlatform">Gleis {{ leg.arrivalPlatform }}</p></div>
+        </div>
+        <div>
+          <p v-for="remark in leg.remarks" :key="leg.remarks.indexOf(remark)">{{remark.text}}</p>
         </div>
-        <hr/>
       </div>
+      <hr/>
     </div></div>
   </div>
 </template>
@@ -48,6 +51,13 @@
       toDate(string){
         return new Date(string).toLocaleDateString("de-DE");
       },
+      timeWithDelay(actual, delay){
+        let time = this.toTime(actual);
+        if (delay > 30){
+          return time + " +" + Math.ceil(delay/60.0);
+        }
+        return time;
+      },
       toTime(string){
         return new Date(string).toLocaleTimeString("de-DE", {timeStyle: 'short'});
       },
@@ -95,7 +105,7 @@
   .line {
     margin: 4px;
     display: inline-block;
-    width:100px;
+    width:120px;
     vertical-align: text-top;
     align-content: center;
   }
diff --git a/front/bahnui-front/src/components/search.vue b/front/bahnui-front/src/components/search.vue
index 59d0f02..a4b5a9c 100644
--- a/front/bahnui-front/src/components/search.vue
+++ b/front/bahnui-front/src/components/search.vue
@@ -8,13 +8,13 @@
       :items="services"
       item-title="name"
       item-value="id"
-      label="Service"
+      :label="$t('search.fields.service')" 
       class="inputTextField"
     ></v-select>
     <v-text-field
       v-model="date.value"
       :active="date.menu"
-      label="date"
+      :label="$t('search.fields.date')" 
       prepend-icon="mdi mdi-calendar-month"
       readonly
       class="inputTextField"
@@ -37,7 +37,7 @@
     <v-text-field
       v-model="time.value"
       :active="time.menu"
-      label="time"
+      :label="$t('search.fields.time')" 
       prepend-icon="mdi mdi-clock-outline"
       readonly
       class="inputTextField"
@@ -60,7 +60,7 @@
     <v-text-field       
       prepend-icon="mdi mdi-ray-start-arrow"
       :active="from.menu" 
-      label="from" 
+      :label="$t('search.fields.from')" 
       type="text" 
       v-model="fromName" 
       class="inputTextField"
@@ -82,7 +82,7 @@
     <v-text-field       
       prepend-icon="mdi mdi-bullseye"
       :active="to.menu" 
-      label="to" 
+      :label="$t('search.fields.to')" 
       type="text" 
       v-model="toName" 
       class="inputTextField"
@@ -109,7 +109,6 @@
   import axios from 'axios';
   import { VTimePicker } from 'vuetify/labs/VTimePicker';
   import { VDatePicker } from 'vuetify/components/VDatePicker';
-
   const client = axios.create({
     baseURL: process.env.VUE_APP_BASE_URL
   });
@@ -138,11 +137,11 @@
             toName : "",
             connections: [],
             showRouting: false,
-            time: {value:new Date().toLocaleTimeString(), menu:false},
+            time: {value:new Date().toLocaleTimeString("de"), menu:false},
             date: {value:new Date(), menu:false},
             services: services,
             selectedService: services[0].id,
-            isMobile: false,
+            isMobile: this.$route.query.m,
         }
     },
     methods: {
diff --git a/front/bahnui-front/src/locales/de.json b/front/bahnui-front/src/locales/de.json
new file mode 100644
index 0000000..ee35565
--- /dev/null
+++ b/front/bahnui-front/src/locales/de.json
@@ -0,0 +1,19 @@
+{
+    "global":{
+        "option":{
+            "mobile": "mobil"
+        }
+    },
+    "search":{
+        "fields":{
+            "service":"Dienst",
+            "date":"Datum",
+            "time":"Uhrzeit",
+            "from":"von",
+            "to":"nach"
+        },
+        "buttons":{
+            "searchConnection":"Verbindung suchen"
+        }
+    }
+}
\ No newline at end of file
diff --git a/front/bahnui-front/src/locales/en.json b/front/bahnui-front/src/locales/en.json
new file mode 100644
index 0000000..0f53966
--- /dev/null
+++ b/front/bahnui-front/src/locales/en.json
@@ -0,0 +1,19 @@
+{
+    "global":{
+        "option":{
+            "mobile": "mobile"
+        }
+    },
+    "search":{
+        "fields":{
+            "service":"service",
+            "date":"date",
+            "time":"time",
+            "from":"from",
+            "to":"to"
+        },
+        "buttons":{
+            "searchConnection":"search connection"
+        }
+    }
+}
\ No newline at end of file
diff --git a/front/bahnui-front/src/main.js b/front/bahnui-front/src/main.js
index 0eb50da..7f0812a 100644
--- a/front/bahnui-front/src/main.js
+++ b/front/bahnui-front/src/main.js
@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+import { createWebHistory, createRouter } from 'vue-router'
 
 
 // Vuetify
@@ -7,29 +8,30 @@ import 'vuetify/styles'
 import { createVuetify } from 'vuetify'
 import * as components from 'vuetify/components'
 import * as directives from 'vuetify/directives'
-//import '@fortawesome/fontawesome-free/css/all.css' // Ensure your project is capable of handling css files
-//import { aliases, fa } from 'vuetify/iconsets/fa-svg'
-//import { library } from '@fortawesome/fontawesome-svg-core'
-//import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-//import { fas } from '@fortawesome/free-solid-svg-icons'
-//import { far } from '@fortawesome/free-regular-svg-icons'
+import SearchBahn from './components/search.vue'
+import { createI18n } from 'vue-i18n'
+import de from "./locales/de.json";
+import en from "./locales/en.json";
 
 const app = createApp(App)
 
-//app.component('font-awesome-icon', FontAwesomeIcon) // Register component globally
-//library.add(fas) // Include needed solid icons
-//library.add(far) // Include needed regular icons
+const routes = [
+  { path: '/search', component: SearchBahn },
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+})
 
 const vuetify = createVuetify({
   components,
   directives,
-//  icons: {
-//    defaultSet: 'fa',
-//    aliases,
-//    sets: {
-//      fa,
-//    },
-//  },
+})
+const i18n = createI18n({
+  locale: "en",
+  fallbackLocale: "en",
+  messages: { de, en },
 })
 
-app.use(vuetify).mount('#app')
+app.use(vuetify).use(router).use(i18n).mount('#app')