From c0d4598a151059507e8cbf52460485e9612e2fc4 Mon Sep 17 00:00:00 2001
From: masterElmar <18119527+masterElmar@users.noreply.github.com>
Date: Sat, 18 Nov 2023 01:54:20 +0100
Subject: [PATCH] feat:#69 added lang variables in vue files in faq

---
 frontend/src/components/FaqPage.vue    | 215 ++++++-------------------
 frontend/src/i18n/translations/en.json |  79 +++++++++
 2 files changed, 131 insertions(+), 163 deletions(-)

diff --git a/frontend/src/components/FaqPage.vue b/frontend/src/components/FaqPage.vue
index b3a2986..04271e1 100644
--- a/frontend/src/components/FaqPage.vue
+++ b/frontend/src/components/FaqPage.vue
@@ -1,4 +1,5 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+</script>
 
 <template>
   <div class="flex align-items-center justify-content-center flex-column">
@@ -9,151 +10,78 @@
     <div class="flex flex-column col-7">
       <div class="grid my-2">
         <div class="col">
-          Wie funktioniert das Kalender erstellen mit dem HTWKalender?
+          {{$t('faqView.firstQuestion')}}
         </div>
         <div class="col">
-          Die Webseite ermöglicht es deinen HTWK-Stundenplan in eines deiner
-          bevorzugten Kalender-Verwaltungs-Programme (Outlook, Google Kalender,
-          etc.) einzubinden.
+          {{$t('faqView.firstAnswer')}}
         </div>
       </div>
 
       <div class="grid my-2">
-        <div class="col">Wie genau funktioniert das alles?</div>
+        <div class="col">{{$t('faqView.secondQuestion')}}</div>
         <div class="col">
-          Du wählst deinen Studiengang und das gewünschte Semester aus, danach
-          kannst du aus den dazugehörigen Modulen wählen. Dabei kannst du
-          einzelne Module an/abwählen wie "Feiertage" oder Wahlpflichtmodule,
-          die du nicht belegst. <br />
-          Im letzten Schritt wird dir der Link mit dem entsprechenden Token für
-          den von dir erstellenten Kalenders angezeigt. Mit diesem Link kannst
-          du den Kalender abonnieren oder herunterladen.
+          {{$t('faqView.secondAnswer')}}
         </div>
       </div>
 
       <div class="grid my-2">
-        <div class="col">Wie kann ich den Kalender abonnieren?</div>
+        <div class="col">{{$t('faqView.thirdQuestion')}}</div>
         <div class="col">
           <Accordion>
-            <AccordionTab header="Google Calendar">
+            <AccordionTab :header="$t('faqView.thirdAnswer.tabTitle')">
               <ol>
-                <li>Erstelle deinen Kalender und kopiere den Link.</li>
+                <li>{{$t('faqView.thirdAnswer.google.first')}}</li>
                 <li>
-                  Bei Google Kalender selbst hast du in der linken Seitenleiste
-                  eine Sektion namens <em>"Weitere Kalender"</em>. Dort klickst
-                  du das kleine Pfeil-Icon rechts neben dem Schritzug. Im
-                  daraufhin erscheinenden Menü gibt es einen Punkt
-                  <em>"Über URL hinzufügen"</em>, den du anklicken musst.
+                  {{$t('faqView.thirdAnswer.google.second')}}
                 </li>
                 <li>
-                  Füge den kopierten Kalenderlink ein, klicke auf
-                  <em>"Kalender hinzufügen"</em> und du bist fertig.
+                  {{$t('faqView.thirdAnswer.google.third')}}
                 </li>
               </ol>
             </AccordionTab>
-            <AccordionTab header="Microsoft Outlook">
-              <p>Unter Outlook 2010:</p>
+            <AccordionTab :header="$t('faqView.thirdAnswer.microsoft_outlook.title')">
+              <p>{{$t('faqView.thirdAnswer.microsoft_outlook.outlook_2010.title')}}</p>
 
               <ol>
-                <li>Erstelle deinen Kalender und kopiere den Link.</li>
-                <li>Klicke auf den Reiter <em>“Start”</em>.</li>
-                <li>
-                  Dort befindest sich in der Sektion
-                  <em>“Kalender verwalten”</em> der Button
-                  <em>“Kalender öffnen”</em>, auf den du kicken musst.
-                </li>
-                <li>
-                  Es öffnet sich ein Kontextmenü, in dem du den Punkt
-                  <em>“Aus dem Internet”</em> anklickst.
-                </li>
-                <li>
-                  Im daraufhin erscheinenden Fenster kannst du den Link einfügen
-                  und mit <em>“OK”</em> bestätigen. Eventuell musst du das
-                  Abonnement in einem weiteren Schritt noch bestätigen. Dann
-                  bist du fertig.
-                </li>
+                <li>{{$t('faqView.thirdAnswer.microsoft_outlook.outlook_2010.first')}}</li>
+                <li>{{$t('faqView.thirdAnswer.microsoft_outlook.outlook_2010.second')}}</li>
+                <li>{{$t('faqView.thirdAnswer.microsoft_outlook.outlook_2010.third')}}</li>
+                <li>{{$t('faqView.thirdAnswer.microsoft_outlook.outlook_2010.fourth')}}</li>
+                <li>{{$t('faqView.thirdAnswer.microsoft_outlook.outlook_2010.fifth')}}</li>
               </ol>
 
-              <p>Unter Outlook 2007:</p>
+              <p>{{$t('faqView.thirdAnswer.microsoft_outlook.outlook_2007.title')}}</p>
 
               <ol>
-                <li>Erstelle deinen Kalender und kopiere den Link.</li>
-                <li>
-                  Unter <em>“Extras”</em> findest du die
-                  <em>“Kontoeinstellungen”</em>.
-                </li>
-                <li>
-                  Dort auf den Reiter <em>“Internetkalender”</em> klicken.
-                </li>
-                <li>Auf <em>“Neu”</em> klicken.</li>
-                <li>
-                  Im sich öffnenden Fenster musst du den Link einfügen.
-                  Allerdings musst du <em>“http://”</em> durch
-                  <em>“webcal://”</em> austauschen.
-                </li>
-                <li>
-                  Spätestens beim nächsten Start sollte der Kalender
-                  aktualisiert werden und dir fortan zur Verfügung stehen.
-                </li>
+                <li>{{$t('faqView.thirdAnswer.microsoft_outlook.outlook_2007.first')}}</li>
+                <li>{{$t('faqView.thirdAnswer.microsoft_outlook.outlook_2007.second')}}</li>
+                <li>{{$t('faqView.thirdAnswer.microsoft_outlook.outlook_2007.third')}}</li>
+                <li>{{$t('faqView.thirdAnswer.microsoft_outlook.outlook_2007.fourth')}}</li>
+                <li>{{$t('faqView.thirdAnswer.microsoft_outlook.outlook_2007.fifth')}}</li>
+                <li>{{$t('faqView.thirdAnswer.microsoft_outlook.outlook_2007.sixth')}}</li>
               </ol>
             </AccordionTab>
-            <AccordionTab header="Kalender (OS X)">
+            <AccordionTab :header="$t('faqView.thirdAnswer.apple_osx.title')">
               <ol>
-                <li>Erstelle deinen Kalender und kopiere den Link.</li>
-                <li>
-                  Unter <em>“Ablage”</em> findest du den Punkt
-                  <em>“Neues Kalenderabonnement”</em> (oder unter Snow Leopard
-                  <em>“Abonnieren”</em>).
-                </li>
-                <li>
-                  Im daraufhin erscheinenden Fenster musst du den kopierten Link
-                  einfügen und <em>“abonnieren”</em> klicken.
-                </li>
-                <li>
-                  Anschließend kannst du dem Kalender noch einen Namen geben und
-                  bestimmen, wie oft er aktualisiert werden soll. Falls du
-                  iCloud auf deinem iPhone o.ä. verwendest, empfehle ich dir bei
-                  <em>“Ort”</em> unbedingt <em>“iCloud”</em> zu wählen. So hast
-                  du deinen Stundenplan ohne weiteres zutun auch unterwegs immer
-                  parat.
-                </li>
+                <li>{{$t('faqView.thirdAnswer.apple_osx.first')}}</li>
+                <li>{{$t('faqView.thirdAnswer.apple_osx.second')}}</li>
+                <li>{{$t('faqView.thirdAnswer.apple_osx.third')}}</li>
+                <li>{{$t('faqView.thirdAnswer.apple_osx.fourth')}}</li>
               </ol>
             </AccordionTab>
-            <AccordionTab header="Thunderbird">
+            <AccordionTab :header="$t('faqView.thirdAnswer.thunderbird.title')">
               <ol>
-                <li>Erstelle deinen Kalender und kopiere den Link.</li>
-                <li>
-                  Im Menü <em>“Termine und Aufgaben”</em> den Punkt
-                  <em>“Kalender”</em> wählen.
-                </li>
-                <li>
-                  Links siehst du die Kalenderübersicht. In diesem Bereich über
-                  die rechte Maustaste klicken und im darauf erscheinenden
-                  Kontextmenü <em>“Neuer Kalender”</em> anklicken.
-                </li>
-                <li>
-                  Du hast die Wahl zwischen <em>“Auf meinem Computer”</em> und
-                  <em>“Im Netzwerk”</em>. Bitte letzteres wählen und
-                  <em>“Fortsetzen”</em> klicken.
-                </li>
-                <li>
-                  Im folgenden Fenster lässt du das <em>“Format”</em> wie es ist
-                  (<em>“iCalender”</em>).
-                </li>
-                <li>
-                  Unter <em>"Adresse"</em> den kopierten Kalenderlink einfügen.
-                </li>
-                <li>
-                  Anschließend kannst du noch einen Namen vergeben und weitere
-                  Einstellungen nach Belieben vornehmen.
-                </li>
+                <li>{{ $t('faqView.thirdAnswer.thunderbird.one') }}</li>
+                <li>{{ $t('faqView.thirdAnswer.thunderbird.two') }}</li>
+                <li>{{ $t('faqView.thirdAnswer.thunderbird.three') }}</li>
+                <li>{{ $t('faqView.thirdAnswer.thunderbird.four') }} </li>
+                <li>{{ $t('faqView.thirdAnswer.thunderbird.five') }}</li>
+                <li>{{ $t('faqView.thirdAnswer.thunderbird.six') }}</li>
+                <li>{{ $t('faqView.thirdAnswer.thunderbird.seven') }}</li>
               </ol>
             </AccordionTab>
-            <AccordionTab header="IPhone">
-              <p>
-                Der einfachste Weg unter iOS ist der iCloud-Sync (siehe
-                Anleitung für OS X Kalender). Hier ist der andere Weg:
-              </p>
+            <AccordionTab :header="$t('faqView.thirdAnswer.iphone.title')">
+              <p>{{$t('faqView.thirdAnswer.iphone.description')}}</p>
 
               <ol>
                 <li>Erstelle deinen Kalender und kopiere den Link.</li>
@@ -211,67 +139,28 @@
         </div>
       </div>
       <div class="grid my-2">
-        <div class="col">
-          Kalender abonnieren? Ich will den <em>downloaden</em>!
-        </div>
-        <div class="col">
-          Das kannst du gern tun. Nachdem dein persönlicher Stundenplan erstellt
-          wurde, hast du die Möglichkeit ihn herunterzuladen. Außerdem kannst du
-          ihn jederzeit herunterladen, wenn du den generierten Link einfach in
-          deinem Browser aufrufst. <br />
-          Bedenke hierbei, dass heruntergeladene Kalender bzw. Stundenpläne sich
-          nicht aktualisieren werden. Das ist nur möglich, wenn du den Kalender
-          abonnierst.
-        </div>
+        <div class="col">{{$t('faqView.fourthQuestion')}}</div>
+        <div class="col">{{$t('faqView.fourthAnswer')}}</div>
       </div>
-
       <div class="grid my-2">
-        <div class="col">
-          Ich belege zusätzlich Module aus anderen Studiengängen und möchte
-          diese auch in meinem Stundenplan haben.
-        </div>
-        <div class="col">
-          Nachdem du die Möglichkeit hattest, die für deinen Studiengang
-          vorgesehenen Module aus dem Modulhandbuch auszuwählen, wirst du auf
-          eine zweite Seite weitergeleitet. Dort hast du die Möglichkeit,
-          weitere Module aus anderen Studiengängen in deinen Studienplan
-          einzufügen.
-        </div>
+        <div class="col">{{$t('faqView.fifthQuestion')}}</div>
+        <div class="col">{{$t('faqView.fifthAnswer')}}</div>
       </div>
-
       <div class="grid my-2">
-        <div class="col my-2">Aktualisierung Probleme mit dem Kalender?</div>
-        <div class="col">
-          Das liegt vermutlich daran, dass du ihn heruntergeladen statt
-          abonniert hast. Automatisch aktualisieren können sich nur Kalender,
-          die du abonniert hast. Eine Aktualisierung des Kalenders auf dem
-          Server wird täglich um 4:00 Uhr durchgeführt. So wird gewährleistet
-          das alle Veränderungen seitens der HTWK übernommen werden.
-        </div>
+        <div class="col my-2">{{$t('faqView.sixthQuestion')}}</div>
+        <div class="col">{{$t('faqView.sixthAnswer')}}</div>
       </div>
-
       <div class="grid my-2">
-        <div class="col">
-          Wie lange ist mein Stundenplan bzw. der Link dorthin gültig?
-        </div>
-        <div class="col">
-          Studenpläne sind erstmal nur für die ausgewählten Semester gültig. Da
-          durch Wahlpflichtmodule oder deine Planung sich Veränderungen ergeben
-          können.
-        </div>
+        <div class="col">{{$t('faqView.seventhQuestion')}}</div>
+        <div class="col">{{$t('faqView.seventhAnswer')}}</div>
       </div>
-
       <div class="grid my-2">
-        <div class="col">Preis und Entwicklung?</div>
-        <div class="col">
-          Die Kosten können durch das selbständiges Hosting vollständig
-          ausgelagert werden. Die Entwicklung soll als aktives Git Projekt auch
-          durch die Community verwaltet werden.
-        </div>
+        <div class="col">{{$t('faqView.eighthQuestion')}}</div>
+        <div class="col">{{$t('faqView.eighthAnswer')}}</div>
       </div>
       <p>
-        Nicht gefunden, wonach du suchst?<br />
-        <a href="/imprint">Kontakt aufnehmen</a>
+        {{$t('faqView.notFound')}}<br />
+        <a href="/imprint">{{$t('faqView.contact')}}</a>
       </p>
     </div>
   </div>
diff --git a/frontend/src/i18n/translations/en.json b/frontend/src/i18n/translations/en.json
index 2b51553..ed18c5f 100644
--- a/frontend/src/i18n/translations/en.json
+++ b/frontend/src/i18n/translations/en.json
@@ -87,5 +87,84 @@
     "copyToClipboard": "copy to clipboard",
     "toGoogleCalendar": "to Google Calendar",
     "toMicrosoftCalendar": "to Microsoft Calendar"
+  },
+  "faqView": {
+    "firstQuestion": "Wie funktioniert das Kalender erstellen mit dem HTWKalender?",
+    "firstAnswer": "Die Webseite ermöglicht es deinen HTWK-Stundenplan in eines deiner bevorzugten Kalender-Verwaltungs-Programme (Outlook, Google Kalender, etc.) einzubinden. ",
+    "secondQuestion": "Wie genau funktioniert das alles?",
+    "secondAnswer": "Du wählst deinen Studiengang und das gewünschte Semester aus, danach kannst du aus den dazugehörigen Modulen wählen. Dabei kannst du einzelne Module an/abwählen wie \"Feiertage\" oder Wahlpflichtmodule, die du nicht belegst. Im letzten Schritt wird dir der Link mit dem entsprechenden Token für den von dir erstellenten Kalenders angezeigt. Mit diesem Link kannst du den Kalender abonnieren oder herunterladen. ",
+    "thirdQuestion": "Wie kann ich den Kalender abonnieren?",
+    "thirdAnswer": {
+      "tabTitle": "Google Calendar",
+      "google": {
+        "first": "Erstelle deinen Kalender und kopiere den Link.",
+        "second": "Bei Google Kalender selbst hast du in der linken Seitenleiste eine Sektion namens \"Weitere Kalender\". Dort klickst du das kleine Pfeil-Icon rechts neben dem Schritzug. Im daraufhin erscheinenden Menü gibt es einen Punkt \"Über URL hinzufügen\", den du anklicken musst. ",
+        "third": "Füge den kopierten Kalenderlink ein, klicke auf \"Kalender hinzufügen\" und du bist fertig. "
+      },
+        "microsoft_outlook": {
+          "title": "Mircosoft Outlook",
+          "outlook_2010": {
+            "title": "Unter Outlook 2010:",
+            "first": "Erstelle deinen Kalender und kopiere den Link.",
+            "second": "Klicke auf den Reiter “Start”.",
+            "third": "Dort befindest sich in der Sektion “Kalender verwalten” der Button “Kalender öffnen”, auf den du kicken musst.",
+            "fourth": "Es öffnet sich ein Kontextmenü, in dem du den Punkt “Aus dem Internet” anklickst.",
+            "fifth": "Im daraufhin erscheinenden Fenster kannst du den Link einfügen und mit “OK” bestätigen. Eventuell musst du das Abonnement in einem weiteren Schritt noch bestätigen. Dann bist du fertig."
+          },
+          "outlook_2007": {
+            "title": "Unter Outlook 2007:",
+            "first": "Erstelle deinen Kalender und kopiere den Link.",
+            "second": "Unter “Extras” findest du die “Kontoeinstellungen”.",
+            "third": "Dort auf den Reiter “Internetkalender” klicken.",
+            "fourth": "Auf “Neu” klicken.",
+            "fifth": "Im sich öffnenden Fenster musst du den Link einfügen. Allerdings musst du “http://” durch “webcal://” austauschen.",
+            "sixth": "Spätestens beim nächsten Start sollte der Kalender aktualisiert werden und dir fortan zur Verfügung stehen."
+          }
+        },
+        "apple_osx": {
+          "title": "Calendar (OS X)",
+          "first": "Erstelle deinen Kalender und kopiere den Link.",
+            "second": "Unter “Ablage” findest du den Punkt “Neues Kalenderabonnement” (oder unter Snow Leopard “Abonnieren”).",
+            "third": "Im daraufhin erscheinenden Fenster musst du den kopierten Link einfügen und “abonnieren” klicken.",
+            "fourth": "Anschließend kannst du dem Kalender noch einen Namen geben und bestimmen, wie oft er aktualisiert werden soll. Falls du iCloud auf deinem iPhone o.ä. verwendest, empfehle ich dir bei “Ort” unbedingt “iCloud” zu wählen. So hast du deinen Stundenplan ohne weiteres zutun auch unterwegs immer parat."
+        },
+      "thunderbird": {
+        "title": "Thunderbird",
+        "one" : "Erstelle deinen Kalender und kopiere den Link.",
+        "two" : "Im Menü “Termine und Aufgaben” den Punkt “Kalender” wählen. ",
+        "three" : "Links siehst du die Kalenderübersicht. In diesem Bereich über die rechte Maustaste klicken und im darauf erscheinenden Kontextmenü “Neuer Kalender” anklicken.",
+        "four" : "Du hast die Wahl zwischen “Auf meinem Computer” und “Im Netzwerk”. Bitte letzteres wählen und “Fortsetzen” klicken.",
+        "five" : "Im folgenden Fenster lässt du das “Format” wie es ist (“iCalender”).",
+        "six" : "Unter \"Adresse\" den kopierten Kalenderlink einfügen.",
+        "seven" : "Anschließend kannst du noch einen Namen vergeben und weitere Einstellungen nach Belieben vornehmen."
+      },
+      "iphone": {
+        "title": "iPhone",
+        "description": "Der einfachste Weg unter iOS ist der iCloud-Sync (siehe Anleitung für OS X Kalender). Hier ist der andere Weg: ",
+        "one": "Erstelle deinen Kalender und kopiere den Link.",
+        "two": "Gehe in die “Systemeinstellungen”.",
+        "three": "Dort wählst du “Mail, Kontakte, Kalender”.",
+        "four": "“Account hinzufügen” auswählen.",
+        "five": "Ganz unten tippst du auf “Andere”.",
+        "six": "Der letzte Punkt ist “Kalenderabo hinzufügen”. Dort drauftippen.",
+        "seven": "Im daraufhin erscheinenden Textfeld fügst du den Kalenderlink ein und drückst oben auf “weiter”.",
+        "eight": "Du kannst noch eine “Beschreibung” vergeben. Den Rest solltest du lassen, wie er ist.",
+        "nine": "Nach kurzer Zeit taucht der abonnierte Kalender in der Kalender-App auf."
+      },
+        "android": "",
+      "windows_phone": ""
+    },
+    "fourthQuestion": "Kalender abonnieren? Ich will den downloaden!",
+    "fourthAnswer": "Das kannst du gern tun. Nachdem dein persönlicher Stundenplan erstellt wurde, hast du die Möglichkeit ihn herunterzuladen. Außerdem kannst du ihn jederzeit herunterladen, wenn du den generierten Link einfach in deinem Browser aufrufst. Bedenke hierbei, dass heruntergeladene Kalender bzw. Stundenpläne sich nicht aktualisieren werden. Das ist nur möglich, wenn du den Kalender abonnierst. ",
+    "fifthQuestion": "Ich belege zusätzlich Module aus anderen Studiengängen und möchte diese auch in meinem Stundenplan haben. ",
+    "fifthAnswer": "Nachdem du die Möglichkeit hattest, die für deinen Studiengang vorgesehenen Module aus dem Modulhandbuch auszuwählen, wirst du auf eine zweite Seite weitergeleitet. Dort hast du die Möglichkeit, weitere Module aus anderen Studiengängen in deinen Studienplan einzufügen. ",
+    "sixthQuestion": "Aktualisierungs Probleme mit dem Kalender?",
+    "sixthAnswer": " Das liegt vermutlich daran, dass du ihn heruntergeladen statt abonniert hast. Automatisch aktualisieren können sich nur Kalender, die du abonniert hast. Eine Aktualisierung des Kalenders auf dem Server wird alle 3h ab Mitternacht durchgeführt. So wird gewährleistet das alle Veränderungen seitens der HTWK übernommen werden.",
+    "seventhQuestion": "Wie lange ist mein Stundenplan bzw. der Link dorthin gültig?",
+    "seventhAnswer": "Studenpläne sind erstmal nur für die ausgewählten Semester gültig. Da durch Wahlpflichtmodule oder deine Planung sich Veränderungen ergeben können.",
+    "eighthQuestion": "Preis und Entwicklung?",
+    "eighthAnswer": "Die Kosten können durch das selbständiges Hosting vollständig ausgelagert werden. Die Entwicklung soll als aktives Git Projekt auch durch die Community verwaltet werden.",
+    "notFound": "Nicht gefunden, wonach du suchst?",
+    "contact": "Kontakt aufnehmen"
   }
 }