Merge pull request #22 from codeforjapan/12-get-from-database

#12対応

Author: NEKOYASAN

src/layouts/classes.vue

@@ -0,0 +1,107 @@
+<template>
+  <v-app>
+    <v-overlay v-if="loading" color="#F8F9FA" opacity="1" z-index="9999">
+      <div class="loader">
+        Loading
+      </div>
+    </v-overlay>
+    <!--
+    <v-navigation-drawer
+      v-model="drawer"
+      :mini-variant="miniVariant"
+      :clipped="clipped"
+      fixed
+      app
+    >
+      <v-list>
+        <v-list-item
+          v-for="(item, i) in items"
+          :key="i"
+          :to="item.to"
+          router
+          exact
+        >
+          <v-list-item-action>
+            <v-icon>{{ item.icon }}</v-icon>
+          </v-list-item-action>
+          <v-list-item-content>
+            <v-list-item-title v-text="item.title" />
+          </v-list-item-content>
+        </v-list-item>
+      </v-list>
+    </v-navigation-drawer>
+    -->
+    <v-app-bar
+      fixed
+      app
+      dense
+      style="
+        background-color: rgba(0, 0, 0, 0);
+        color: white;
+        text-align: center;
+      "
+      elevation="0"
+    >
+      <span>
+        {{ schoolName }}
+      </span>
+      <v-spacer />
+      <div class="date">
+        <v-btn icon small dark @click="prevDate">
+          <v-icon>mdi-chevron-left</v-icon>
+        </v-btn>
+        <v-btn text dark style="padding: 0 0;">
+          {{ ViewDate }}
+        </v-btn>
+        <v-btn icon small dark @click="nextDate">
+          <v-icon>mdi-chevron-right</v-icon>
+        </v-btn>
+      </div>
+      <span>
+        {{ className }}
+      </span>
+    </v-app-bar>
+    <v-content style="background-color: #0071c2;">
+      <v-container class="px-4 py-8">
+        <nuxt />
+      </v-container>
+    </v-content>
+    <v-footer dark color="#0071c2">
+      <span>&copy; Code For Japan {{ new Date().getFullYear() }}</span>
+    </v-footer>
+  </v-app>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex'
+export default {
+  middleware: 'checkClassData',
+  computed: {
+    ...mapGetters('modules/class', ['schoolName', 'className', 'ViewDate']),
+  },
+  data() {
+    return {
+      loading: true,
+    }
+  },
+  mounted() {
+    this.loading = false
+    this.setViewDate(this.$dayjs().format('YYYY-MM-DD'))
+  },
+  methods: {
+    ...mapActions('modules/class', ['setViewDate', 'prevDate', 'nextDate']),
+  },
+}
+</script>
+
+<style scoped>
+.date-icon {
+  margin-right: 15px;
+}
+.date {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+</style>

src/layouts/default.vue

@@ -31,15 +31,28 @@
       </v-list>
     </v-navigation-drawer>
     -->
-    <v-app-bar fixed app>
-      <v-toolbar-title>
-        4<ruby>年<rt>ねん</rt></ruby> 3<ruby>組<rt>くみ</rt></ruby>
-      </v-toolbar-title>
+    <v-app-bar
+      fixed
+      app
+      dense
+      style="
+        background-color: rgba(0, 0, 0, 0);
+        color: white;
+        text-align: center;
+      "
+      elevation="10"
+    >
+      <v-spacer />
+      <v-btn icon dark>
+        <v-icon>mdi-chevron-left</v-icon>
+      </v-btn>
+      <v-btn text dark>
+        2020 / 05 / 14
+      </v-btn>
+      <v-btn icon dark>
+        <v-icon>mdi-chevron-right</v-icon>
+      </v-btn>
       <v-spacer />
-      <Calender class="date-icon" />
-      <v-toolbar-title>
-        4<ruby>月<rt>がつ</rt></ruby> 3<ruby>日<rt>か</rt></ruby>
-      </v-toolbar-title>
     </v-app-bar>
     <v-content style="background-color: #0071c2;">
       <v-container class="px-4 py-8">
@@ -53,11 +66,7 @@
 </template>
 
 <script>
-import Calender from '@/assets/svgs/icon_calender.svg'
 export default {
-  components: {
-    Calender,
-  },
   data() {
     return {
       loading: true,

src/pages/classes/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="MainPage">
     <v-row class="DataBlock">
-      <v-col v-for="(item, i) in Lessons[today]" :key="i" cols="12" md="6">
+      <v-col v-for="(item, i) in Lessons[ViewDate]" :key="i" cols="12" md="6">
         <StudyCard
           :schooltime="i + 1"
           :realtime="item.realTime"
@@ -18,14 +18,9 @@ import { mapGetters } from 'vuex'
 import StudyCard from '@/components/StudyCard'
 export default {
   components: { StudyCard },
-  middleware: 'checkClassData',
+  layout: 'classes',
   computed: {
-    ...mapGetters('modules/class', ['Lessons']),
-  },
-  data() {
-    return {
-      today: this.$dayjs().format('YYYY-MM-DD'),
-    }
+    ...mapGetters('modules/class', ['Lessons', 'ViewDate']),
   },
 }
 </script>

src/plugins/firebase.js

@@ -14,6 +14,9 @@ const firebaseConfig = {
 
 if (!firebase.apps.length) {
   firebase.initializeApp(firebaseConfig)
+  firebase.firestore().enablePersistence({
+    synchronizeTabs: true,
+  })
 }
 
 export default firebase

src/store/modules/class.js

@@ -2,6 +2,7 @@ import firebase from '@/plugins/firebase'
 export const state = () => ({
   classId: '',
   classData: {},
+  ViewDate: '',
 })
 
 export const getters = {
@@ -20,6 +21,9 @@ export const getters = {
   Lessons(state) {
     return state.classData.Lessons
   },
+  ViewDate(state) {
+    return state.ViewDate
+  },
   isLoadedClassData: (state) => {
     return state.classId !== ''
   },
@@ -32,6 +36,19 @@ export const mutations = {
   setClassId(state, classId) {
     state.classId = classId
   },
+  setViewDate(state, date) {
+    state.ViewDate = date
+  },
+  nextDate(state) {
+    state.ViewDate = this.$dayjs(state.ViewDate)
+      .add(1, 'd')
+      .format('YYYY-MM-DD')
+  },
+  prevDate(state) {
+    state.ViewDate = this.$dayjs(state.ViewDate)
+      .subtract(1, 'd')
+      .format('YYYY-MM-DD')
+  },
 }
 
 export const actions = {
@@ -52,6 +69,15 @@ export const actions = {
   setClassId({ commit }, classId) {
     commit('setClassId', classId)
   },
+  setViewDate({ commit }, date) {
+    commit('setViewDate', date)
+  },
+  prevDate({ commit }) {
+    commit('prevDate')
+  },
+  nextDate({ commit }) {
+    commit('nextDate')
+  },
   isLoadedClassData: (state) => {
     return state.classData !== {}
   },