place donation info in separate component

compute title and label according to selected locale and donation values

webapp/components/DonationInfo/DonationInfo.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="donation-info">
+    <progress-bar :title="title" :label="label" :goal="goal" :progress="progress" />
+    <a href="https://human-connection.org/spenden/">
+      <ds-button primary>{{ $t('donations.donate-now') }}</ds-button>
+    </a>
+  </div>
+</template>
+
+<script>
+import ProgressBar from '~/components/ProgressBar/ProgressBar.vue'
+
+export default {
+  components: {
+    ProgressBar,
+  },
+  // TODO: get values from state / database? --> should not be props and not have defaults
+  props: {
+    goal: {
+      type: Number,
+      default: 15000,
+    },
+    progress: {
+      type: Number,
+      default: 500,
+    },
+  },
+  computed: {
+    title() {
+      const today = new Date()
+      const month = today.toLocaleString(this.$i18n.locale(), { month: 'long' })
+      return `${this.$t('donations.donations-for')} ${month}`
+    },
+    label() {
+      return this.$t('donations.amount-of-total', {
+        amount: this.progress.toLocaleString(this.$i18n.locale()),
+        total: this.goal.toLocaleString(this.$i18n.locale()),
+      })
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.donation-info {
+  display: flex;
+  align-items: flex-end;
+  height: 100%;
+}
+</style>

webapp/locales/de.json

@@ -62,6 +62,11 @@
       }
     }
   },
+  "donations": {
+    "donations-for": "Spenden für",
+    "donate-now": "Jetzt spenden",
+    "amount-of-total": "{amount} von {total} € erreicht"
+  },
   "maintenance": {
     "title": "Human Connection befindet sich in der Wartung",
     "explanation": "Zurzeit führen wir einige geplante Wartungsarbeiten durch, bitte versuch es später erneut.",
@@ -674,7 +679,7 @@
     "terms-of-service": {
       "title": "Nutzungsbedingungen",
       "description": "Die folgenden Nutzungsbedingungen sind Basis für die Nutzung unseres Netzwerkes. Beim Registrieren musst Du sie anerkennen und wir werden Dich auch später über ggf. stattfindende Änderungen informieren. Das Human Connection Netzwerk wird in Deutschland betrieben und unterliegt daher deutschem Recht. Gerichtsstand ist Kirchheim / Teck. Zu Details schau in unser Impressum: <a href=\"https://human-connection.org/impressum\" target=\"_blank\" >https://human-connection.org/impressum</a> "
-    },   
+    },
     "use-and-license" : {
       "title": "Nutzung und Lizenz",
       "description": "Sind Inhalte, die Du bei uns einstellst, durch Rechte am geistigen Eigentum geschützt, erteilst Du uns eine nicht-exklusive, übertragbare, unterlizenzierbare und weltweite Lizenz für die Nutzung dieser Inhalte für die Bereitstellung in unserem Netzwerk. Diese Lizenz endet, sobald Du Deine Inhalte oder Deinen ganzen Account löscht. Bedenke, dass andere Deine Inhalte weiter teilen können und wir diese nicht löschen können."
@@ -702,6 +707,6 @@
     "addition" : {
       "title": "Zusätzliche machen wir regelmäßig Veranstaltungen, wo Du auch Eindrücke wiedergeben und Fragen stellen kannst. Du findest eine aktuelle Übersicht hier:",
       "description": "<a href=\"https://human-connection.org/veranstaltungen/\" target=\"_blank\" > https://human-connection.org/veranstaltungen/ </a>"
-    } 
+    }
   }
 }

webapp/locales/en.json

@@ -63,6 +63,11 @@
       }
     }
   },
+  "donations": {
+    "donations-for": "Donations for",
+    "donate-now": "Donate now",
+    "amount-of-total": "{amount} of {total} € collected"
+  },
   "maintenance": {
     "title": "Human Connection is under maintenance",
     "explanation": "At the moment we are doing some scheduled maintenance, please try again later.",
@@ -675,7 +680,7 @@
     "terms-of-service": {
       "title": "Terms of Service",
       "description": "The following terms of use form the basis for the use of our network. When you register, you must accept them and we will inform you later about any changes that may take place. The Human Connection Network is operated in Germany and is therefore subject to German law. Place of jurisdiction is Kirchheim / Teck. For details see our imprint: <a href=\"https://human-connection.org/imprint\" target=\"_blank\" >https://human-connection.org/imprint</a> "
-    },   
+    },
     "use-and-license" : {
       "title": "Use and License",
       "description": "If any content you post to us is protected by intellectual property rights, you grant us a non-exclusive, transferable, sublicensable, worldwide license to use such content for posting to our network. This license expires when you delete your content or your entire account. Remember that others may share your content and we cannot delete it."
@@ -703,10 +708,10 @@
     "addition" : {
       "title": "In addition, we regularly hold events where you can also share your impressions and ask questions. You can find a current overview here:",
       "description": "<a href=\"https://human-connection.org/events/\" target=\"_blank\" > https://human-connection.org/events/ </a>"
-    } 
+    }
   }
 }
 
- 
- 
- 
+
+
+

webapp/pages/index.vue

@@ -5,18 +5,7 @@
         <filter-menu :hashtag="hashtag" @clearSearch="clearSearch" />
       </ds-grid-item>
       <ds-grid-item :row-span="2" column-span="fullWidth" class="top-info-bar">
-        <div class="donation-info">
-          <!-- TODO: use dynamic values -->
-          <progress-bar
-            title="Donations for November"
-            label="500 of 15.000 €"
-            :goal="15000"
-            :progress="12000"
-          />
-          <a href="https://human-connection.org/spenden/">
-            <ds-button primary>Donate now</ds-button>
-          </a>
-        </div>
+        <donation-info />
         <div class="sorting-dropdown">
           <ds-select
             v-model="selected"
@@ -69,26 +58,26 @@
 </template>
 
 <script>
+import DonationInfo from '~/components/DonationInfo/DonationInfo.vue'
 import FilterMenu from '~/components/FilterMenu/FilterMenu.vue'
 import HcEmpty from '~/components/Empty'
 import HcPostCard from '~/components/PostCard/PostCard.vue'
 import HcLoadMore from '~/components/LoadMore.vue'
 import MasonryGrid from '~/components/MasonryGrid/MasonryGrid.vue'
 import MasonryGridItem from '~/components/MasonryGrid/MasonryGridItem.vue'
-import ProgressBar from '~/components/ProgressBar/ProgressBar.vue'
 import { mapGetters, mapMutations } from 'vuex'
 import { filterPosts } from '~/graphql/PostQuery.js'
 import PostMutations from '~/graphql/PostMutations'
 
 export default {
   components: {
+    DonationInfo,
     FilterMenu,
     HcPostCard,
     HcLoadMore,
     HcEmpty,
     MasonryGrid,
     MasonryGridItem,
-    ProgressBar,
   },
   data() {
     const { hashtag = null } = this.$route.query
@@ -283,10 +272,4 @@ export default {
   justify-content: space-between;
   align-items: flex-end;
 }
-
-.donation-info {
-  display: flex;
-  align-items: flex-end;
-  height: 100%;
-}
 </style>