Code split

3 files changed, 92 insertions, 45 deletions

diff --git a/components/CampMap.vue b/components/CampMap.vue
new file mode 100644
index 0000000..eae1fc0
--- /dev/null
+++ b/components/CampMap.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="mapouter">
+    <div class="gmap_canvas">
+      <iframe
+        id="gmap_canvas"
+        :src="src"
+        frameborder="0"
+        scrolling="no"
+        marginheight="0"
+        marginwidth="0"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CampMap',
+  props: {
+    src: {
+      type: String,
+      required: true,
+    },
+  },
+}
+</script>
+
+<style>
+.mapouter,
+.gmap_canvas,
+#gmap_canvas {
+  width: 100%;
+  height: 50vh;
+  max-height: 300px;
+}
+</style>
diff --git a/components/DayCountdown.vue b/components/DayCountdown.vue
new file mode 100644
index 0000000..9415917
--- /dev/null
+++ b/components/DayCountdown.vue
@@ -0,0 +1,47 @@
+<template>
+  <client-only>
+    <div class="countdown">
+      {{ text }} <span>{{ days }} dni</span>
+    </div>
+  </client-only>
+</template>
+
+<script>
+export default {
+  name: 'DayCountdown',
+  props: {
+    text: {
+      type: String,
+      required: true,
+    },
+    endDate: {
+      type: Date,
+      required: true,
+    },
+    startDate: {
+      type: Date,
+      default: () => new Date(Date.now()),
+    },
+  },
+  computed: {
+    days() {
+      return Math.round(
+        (this.endDate.getTime() - this.startDate.getTime()) / 86400000
+      )
+    },
+  },
+}
+</script>
+
+<style>
+.countdown {
+  background: #ffffff;
+  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
+  padding: 20px;
+  margin: 50px 10px;
+}
+
+.countdown span {
+  font-weight: 600;
+}
+</style>
diff --git a/pages/oboz/2020.vue b/pages/oboz/2020.vue
index af9b3d4..e80259d 100644
--- a/pages/oboz/2020.vue
+++ b/pages/oboz/2020.vue
@@ -11,41 +11,24 @@
         <h3>7 PDH Watra</h3>
       </div>
     </div>
-    <no-ssr>
-      <div class="countdown">
-        Do obozu zostało: <span>{{ days }} dni</span>
-      </div>
-    </no-ssr>
-    <div class="mapouter">
-      <div class="gmap_canvas">
-        <iframe
-          id="gmap_canvas"
-          src="https://maps.google.com/maps?q=Jezioro%20Spore&t=&z=13&ie=UTF8&iwloc=&output=embed"
-          frameborder="0"
-          scrolling="no"
-          marginheight="0"
-          marginwidth="0"
-        />
-      </div>
-    </div>
+    <day-countdown text="Do obozu zostało:" :end-date="new Date(2020, 6, 7)" />
+    <camp-map
+      src="https://maps.google.com/maps?q=Jezioro%20Spore&t=&z=13&ie=UTF8&iwloc=&output=embed"
+    />
     <h3 style="margin-top: 10vh">Tutaj niedługo znajdziesz relacje z obozu</h3>
-    <pure-post-list loading :posts="[]" />
-    <span class="fether" />
+    <pure-post-list loading :posts="[]" style="margin-bottom: 30px" />
   </section>
 </template>
 
 <script>
 import PurePostList from '~/components/Posts/PostList/PurePostList'
+import DayCountdown from '~/components/DayCountdown'
+import CampMap from '~/components/CampMap'
 export default {
   components: {
     PurePostList,
-  },
-  computed: {
-    days() {
-      let now = new Date(Date.now())
-      let oboz = new Date(2020, 7, 6)
-      return Math.round((oboz.getTime() - now.getTime()) / 86400000) - 30
-    },
+    DayCountdown,
+    CampMap,
   },
 }
 </script>
@@ -80,17 +63,6 @@ h1 {
   margin: 10px;
 }
 
-.countdown {
-  background: #ffffff;
-  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
-  padding: 20px;
-  margin: 50px 10px;
-}
-
-.countdown span {
-  font-weight: 600;
-}
-
 @media (max-width: 480px) {
   .troops {
     flex-direction: column;
@@ -105,14 +77,6 @@ h1 {
   }
 }
 
-.mapouter,
-.gmap_canvas,
-#gmap_canvas {
-  width: 100%;
-  height: 50vh;
-  max-height: 300px;
-}
-
 .oboz::after {
   width: 100px;
   height: 200px;