From df1e6220949f664e02626af17e74123e10b525a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Mon, 2 Aug 2021 13:48:57 +0200
Subject: [PATCH] Implement internal page component, first step

---
 webapp/components/PageFooter/PageFooter.vue   |  4 +-
 .../Registration/RegistrationSlider.vue       |  4 +-
 .../features/InternalPage/InternalPage.vue    | 84 +++++++++++++++++++
 webapp/components/utils/InternalPages.js      |  4 +
 webapp/constants/links.js                     | 26 ++++--
 webapp/locales/html/de/organization.html      | 35 +++++---
 webapp/locales/html/en/organization.html      | 14 ++--
 webapp/pages/organization.vue                 | 28 +++++--
 8 files changed, 160 insertions(+), 39 deletions(-)
 create mode 100644 webapp/components/_new/features/InternalPage/InternalPage.vue

diff --git a/webapp/components/PageFooter/PageFooter.vue b/webapp/components/PageFooter/PageFooter.vue
index 89e2d60d3..d4b563167 100644
--- a/webapp/components/PageFooter/PageFooter.vue
+++ b/webapp/components/PageFooter/PageFooter.vue
@@ -26,12 +26,12 @@
 </template>
 
 <script>
-import { isInternalPage } from '~/components/utils/InternalPages.js'
 import links from '~/constants/links.js'
+import { isInternalPage } from '~/components/utils/InternalPages.js'
 
 export default {
   data() {
-    return { isInternalPage, links, version: `v${this.$env.VERSION}` }
+    return { links, isInternalPage, version: `v${this.$env.VERSION}` }
   },
 }
 </script>
diff --git a/webapp/components/Registration/RegistrationSlider.vue b/webapp/components/Registration/RegistrationSlider.vue
index 2e297bc86..818f6c5e9 100644
--- a/webapp/components/Registration/RegistrationSlider.vue
+++ b/webapp/components/Registration/RegistrationSlider.vue
@@ -2,7 +2,7 @@
   <section class="login-form">
     <base-card>
       <template #imageColumn>
-        <a :href="links.ORGANIZATION" :title="$t('login.moreInfo', metadata)" target="_blank">
+        <a :href="pageLink(links.ORGANIZATION)" :title="$t('login.moreInfo', metadata)" target="_blank">
           <logo logoType="signup" />
         </a>
       </template>
@@ -45,6 +45,7 @@
 <script>
 import links from '~/constants/links.js'
 import metadata from '~/constants/metadata.js'
+import { pageLink } from '~/components/utils/InternalPages.js'
 import ComponentSlider from '~/components/ComponentSlider/ComponentSlider'
 import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
 import Logo from '~/components/Logo/Logo'
@@ -161,6 +162,7 @@ export default {
     }
 
     return {
+      pageLink,
       links,
       metadata,
       sliderData: {
diff --git a/webapp/components/_new/features/InternalPage/InternalPage.vue b/webapp/components/_new/features/InternalPage/InternalPage.vue
new file mode 100644
index 000000000..0d071c3f1
--- /dev/null
+++ b/webapp/components/_new/features/InternalPage/InternalPage.vue
@@ -0,0 +1,84 @@
+<template>
+  <div>
+    <ds-space margin="small">
+      <ds-heading v-if="pageParams.internalPage.headlineIdent !== null" tag="h2">{{ $t(pageParams.internalPage.headlineIdent === '' ? pageValues.defaultHeadlineIdent : pageParams.internalPage.headlineIdent) }}</ds-heading>
+    </ds-space>
+    <ds-container v-if="pageParams.internalPage.hasContainer">
+      <div v-if="!pageParams.internalPage.hasBaseCard">
+        <br>
+        <div v-html="$t(pageValues.htmlIdent)" />
+      </div>
+      <base-card v-else>
+        <div v-html="$t(pageValues.htmlIdent)" />
+      </base-card>
+    </ds-container>
+    <div v-else-if="!pageParams.internalPage.hasBaseCard">
+      <br>
+      <div v-html="$t(pageValues.htmlIdent)" />
+    </div>
+    <base-card v-else>
+      <div v-html="$t(pageValues.htmlIdent)" />
+    </base-card>
+  </div>
+</template>
+
+<script>
+// import links from '~/constants/links.js'
+// import { pageLink } from '~/components/utils/InternalPages.js'
+// import Logo from '~/components/Logo/Logo'
+
+export default {
+  name: 'InternalPage',
+  head() {
+    return {
+      title: this.$t(this.pageParams.internalPage.headTitleIdent),
+    }
+  },
+  // layout: 'basic',
+  // components: {
+  //   Logo,
+  // },
+  props: {
+    pageParams: { type: Object, required: true },
+  },
+  // data() {
+  //   return { links, pageLink }
+  // },
+  computed: {
+    pageValues() {
+      let values = {}
+      switch (this.pageParams.name) {
+        case 'organization':
+          values.defaultHeadlineIdent = 'site.made'
+          values.htmlIdent = 'html.organization'
+          break;
+        case 'donate':
+          values.defaultHeadlineIdent = 'site.donate'
+          values.htmlIdent = 'html.donate'
+          break;
+        case 'imprint':
+          values.defaultHeadlineIdent = 'site.imprint'
+          values.htmlIdent = 'html.imprint'
+          break;
+        case 'terms-and-conditions':
+          values.defaultHeadlineIdent = 'site.termsAndConditions'
+          values.htmlIdent = 'html.termsAndConditions'
+          break;
+        case 'code-of-conduct':
+          values.defaultHeadlineIdent = 'site.code-of-conduct'
+          values.htmlIdent = 'html.codeOfConduct'
+          break;
+        case 'data-privacy':
+          values.defaultHeadlineIdent = 'site.data-privacy'
+          values.htmlIdent = 'html.dataPrivacy'
+          break;
+        case 'faq':
+          values.defaultHeadlineIdent = 'site.faq'
+          values.htmlIdent = 'html.faq'
+          break;
+      }
+      return values
+    },
+  },
+}
+</script>
diff --git a/webapp/components/utils/InternalPages.js b/webapp/components/utils/InternalPages.js
index 41879051d..78bb4527f 100644
--- a/webapp/components/utils/InternalPages.js
+++ b/webapp/components/utils/InternalPages.js
@@ -5,3 +5,7 @@ export function isInternalPage(pageParams) {
 export function noStringDefined(string) {
   return !string || string === 0
 }
+
+export function pageLink(pageParams) {
+  return isInternalPage(pageParams) ? pageParams.internalLink : pageParams.externalLink
+}
diff --git a/webapp/constants/links.js b/webapp/constants/links.js
index aa96fc2f3..a0191b70b 100644
--- a/webapp/constants/links.js
+++ b/webapp/constants/links.js
@@ -10,9 +10,11 @@ const ORGANIZATION = {
   internalLink: '/organization', // static, don't change! internal page in case no external is defined
   internalPage: {
     footerIdent: 'site.made', // localized string identifier
-    // Wolle headlineIdent: null, // on null default is used, on empty string it's hidden
-    headlineIdent: '', // localized string identifier. on null default is used, on empty string it's hidden
-    hasBaseCard: true,
+    headTitleIdent: 'site.made', // localized string identifier
+    // Wolle headlineIdent: 'site.made', // localized string identifier. on null it's hidden, on empty string default is used
+    headlineIdent: null, // localized string identifier. on null it's hidden, on empty string default is used
+    hasContainer: true,
+    hasBaseCard: true, // no baseCard without a container
     hasLoginInHeader: true,
   },
 }
@@ -26,7 +28,8 @@ const DONATE = {
   internalLink: '/donate', // static, don't change! internal page in case no external is defined
   internalPage: {
     footerIdent: 'site.donate', // localized string identifier
-    headlineIdent: null, // localized string identifier. on null default is used, on empty string it's hidden
+    headTitleIdent: 'site.donate', // localized string identifier
+    headlineIdent: null, // localized string identifier. on null it's hidden, on empty string default is used
     hasBaseCard: true,
     hasLoginInHeader: true,
   },
@@ -41,7 +44,8 @@ const IMPRINT = {
   internalLink: '/imprint', // static, don't change! internal page in case no external is defined
   internalPage: {
     footerIdent: 'site.imprint', // localized string identifier
-    headlineIdent: null, // localized string identifier. on null default is used, on empty string it's hidden
+    headTitleIdent: 'site.imprint', // localized string identifier
+    headlineIdent: null, // localized string identifier. on null it's hidden, on empty string default is used
     hasBaseCard: true,
     hasLoginInHeader: true,
   },
@@ -55,7 +59,8 @@ const TERMS_AND_CONDITIONS = {
   internalLink: '/terms-and-conditions', // static, don't change! internal page in case no external is defined
   internalPage: {
     footerIdent: 'site.termsAndConditions', // localized string identifier
-    headlineIdent: null, // localized string identifier. on null default is used, on empty string it's hidden
+    headTitleIdent: 'site.termsAndConditions', // localized string identifier
+    headlineIdent: null, // localized string identifier. on null it's hidden, on empty string default is used
     hasBaseCard: true,
     hasLoginInHeader: true,
   },
@@ -69,7 +74,8 @@ const CODE_OF_CONDUCT = {
   internalLink: '/code-of-conduct', // static, don't change! internal page in case no external is defined
   internalPage: {
     footerIdent: 'site.code-of-conduct', // localized string identifier
-    headlineIdent: null, // localized string identifier. on null default is used, on empty string it's hidden
+    headTitleIdent: 'site.code-of-conduct', // localized string identifier
+    headlineIdent: null, // localized string identifier. on null it's hidden, on empty string default is used
     hasBaseCard: true,
     hasLoginInHeader: true,
   },
@@ -83,7 +89,8 @@ const DATA_PRIVACY = {
   internalLink: '/data-privacy', // static, don't change! internal page in case no external is defined
   internalPage: {
     footerIdent: 'site.data-privacy', // localized string identifier
-    headlineIdent: null, // localized string identifier. on null default is used, on empty string it's hidden
+    headTitleIdent: 'site.data-privacy', // localized string identifier
+    headlineIdent: null, // localized string identifier. on null it's hidden, on empty string default is used
     hasBaseCard: true,
     hasLoginInHeader: true,
   },
@@ -98,8 +105,9 @@ const FAQ = {
   internalLink: '/faq', // static, don't change! internal page in case no external is defined
   internalPage: {
     footerIdent: 'site.faq', // localized string identifier
+    headTitleIdent: 'site.faq', // localized string identifier
     // Wolle headlineIdent: null, // on null default is used, on empty string it's hidden
-    headlineIdent: null, // localized string identifier. on null default is used, on empty string it's hidden
+    headlineIdent: null, // localized string identifier. on null it's hidden, on empty string default is used
     hasBaseCard: true,
     hasLoginInHeader: true,
   },
diff --git a/webapp/locales/html/de/organization.html b/webapp/locales/html/de/organization.html
index c63df9929..c1eec4273 100644
--- a/webapp/locales/html/de/organization.html
+++ b/webapp/locales/html/de/organization.html
@@ -1,31 +1,31 @@
 <!-- this file is replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/locales/html/ -->
 <!-- you can find and store templates at https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/templates/ -->
 
-<br>
-<h1 class="h3-headline-big">
+<!-- <br> -->
+<!-- <h1 class="h3-headline-big">
   sender.fm
-</h1>
+</h1> -->
 <!-- <img class="logo" alt="ocelot.social Header" src="/img/custom/logo-horizontal.svg" style="width: 360px;"><br> -->
-<p class="paragraph">
+<!-- <p class="paragraph">
   Hier wird sender.fm in Zukunft vorgestellt …
-</p>
-<p class="link">
+</p> -->
+<!-- <p class="link">
   <a href="/login" target="_blank">
     Zum Login …
   </a><br>
 </p>
-<br>
-<h3 class="h3-headline">
+<br> -->
+<h1 class="h1-headline">
   Unser Radio-Stream
-</h3>
+</h1>
 <br>
 <!-- <iframe id="embed_player" frameborder="0" width="280" height="216" src="https://senderfm.airtime.pro/embed/player?stream=s1&skin=1"></iframe> -->
-<iframe class="player" id="embed_player" frameborder="0" width="350" height="396" src="https://senderfm.airtime.pro/embed/player?stream=s1&skin=2"></iframe>
+<iframe class="player" id="embed_player" frameborder="0" width="510px" height="396px" src="https://senderfm.airtime.pro/embed/player?stream=s1&skin=2"></iframe>
 <br>
-<h4 class="h4-headline">
+<h3 class="h3-headline">
   Sende-Wochenplan
 </h4>
-<iframe class="weekly-plan" height="400px" width="550px" scrolling="yes" frameborder="0" src=https://senderfm.airtime.pro/embed/weekly-program></iframe>
+<iframe class="weekly-plan" height="802px" width="550px" scrolling="yes" frameborder="0" src=https://senderfm.airtime.pro/embed/weekly-program></iframe>
 <br>
 <br>
 
@@ -38,6 +38,12 @@ https://senderfm.out.airtime.pro/senderfm_a -->
     margin-bottom: 48px;
   }
 
+  .h1-headline {
+    font-size: 48px;
+    margin-top: 12px;
+    margin-bottom: 8px;
+  }
+
   .h3-headline-big {
     font-size: 64px;
     margin-top: 12px;
@@ -45,7 +51,7 @@ https://senderfm.out.airtime.pro/senderfm_a -->
   }
 
   .h3-headline {
-    font-size: 24px;
+    font-size: 32px;
     margin-top: 12px;
     margin-bottom: 8px;
   }
@@ -77,4 +83,7 @@ https://senderfm.out.airtime.pro/senderfm_a -->
     margin-bottom: 0px;
     margin-left: -20px;
   }
+  .schedule.current, .schedule_content {
+    max-height: 900px;
+  }
 </style>
diff --git a/webapp/locales/html/en/organization.html b/webapp/locales/html/en/organization.html
index 3ae6a69b8..19e9ebf9a 100644
--- a/webapp/locales/html/en/organization.html
+++ b/webapp/locales/html/en/organization.html
@@ -1,20 +1,20 @@
 <!-- this file is replaced on rebranding by https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/locales/html/ -->
 <!-- you can find and store templates at https://github.com/Ocelot-Social-Community/Ocelot-Social-Deploy-Rebranding/tree/master/branding/templates/ -->
 
-<br>
-<h1 class="h3-headline-big">
+<!-- <br> -->
+<!-- <h1 class="h3-headline-big">
   sender.fm
-</h1>
+</h1> -->
 <!-- <img class="logo" alt="ocelot.social Header" src="/img/custom/logo-horizontal.svg" style="width: 360px;"><br> -->
-<p class="paragraph">
+<!-- <p class="paragraph">
   Here sender.fm will be described in the future …
-</p>
-<p class="link">
+</p> -->
+<!-- <p class="link">
   <a href="/login" target="_blank">
     Login …
   </a><br>
 </p>
-<br>
+<br> -->
 <h3 class="h3-headline">
   Our Radio Stream
 </h3>
diff --git a/webapp/pages/organization.vue b/webapp/pages/organization.vue
index 32add9fbb..6478caca3 100644
--- a/webapp/pages/organization.vue
+++ b/webapp/pages/organization.vue
@@ -1,21 +1,35 @@
 <template>
-  <div>
+  <internal-page
+    :pageParams="links.ORGANIZATION"
+  />
+  <!-- Wolle <div>
     <ds-space margin="small">
       <ds-heading tag="h2">{{ $t('site.made') }}</ds-heading>
     </ds-space>
     <ds-container>
       <div v-html="$t('html.organization')" />
     </ds-container>
-  </div>
+  </div> -->
 </template>
 
 <script>
+import links from '~/constants/links.js'
+import InternalPage from '~/components/_new/features/InternalPage/InternalPage.vue'
+
 export default {
-  layout: 'basic',
-  head() {
-    return {
-      title: this.$t('site.made'),
-    }
+  components: {
+    InternalPage,
   },
+  // Wolle 
+  layout: 'basic',
+  data() {
+    // Wolle console.log(links.ORGANIZATION)
+    return { links }
+  },
+  // Wolle head() {
+  //   return {
+  //     title: this.$t('site.made'),
+  //   }
+  // },
 }
 </script>