Skip to content

Commit d64a549

Browse files
NEKOYASANNEKOYASAN
committed
ADD: ClassID認証
1 parent 96c0223 commit d64a549

File tree

8 files changed

+239
-28
lines changed

8 files changed

+239
-28
lines changed

‎src/layouts/ClassLayout.vue‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<template>
2+
<v-app>
3+
<v-overlay v-if="loading" color="#F8F9FA" opacity="1" z-index="9999">
4+
<div class="loader">
5+
Loading
6+
</div>
7+
</v-overlay>
8+
<!--
9+
<v-navigation-drawer
10+
v-model="drawer"
11+
:mini-variant="miniVariant"
12+
:clipped="clipped"
13+
fixed
14+
app
15+
>
16+
<v-list>
17+
<v-list-item
18+
v-for="(item, i) in items"
19+
:key="i"
20+
:to="item.to"
21+
router
22+
exact
23+
>
24+
<v-list-item-action>
25+
<v-icon>{{ item.icon }}</v-icon>
26+
</v-list-item-action>
27+
<v-list-item-content>
28+
<v-list-item-title v-text="item.title" />
29+
</v-list-item-content>
30+
</v-list-item>
31+
</v-list>
32+
</v-navigation-drawer>
33+
-->
34+
<v-app-bar fixed app>
35+
<v-toolbar-title>
36+
4<ruby>年<rt>ねん</rt></ruby> 3<ruby>組<rt>くみ</rt></ruby>
37+
</v-toolbar-title>
38+
<v-spacer />
39+
<Calender class="date-icon" />
40+
<v-toolbar-title>
41+
4<ruby>月<rt>がつ</rt></ruby> 3<ruby>日<rt>か</rt></ruby>
42+
</v-toolbar-title>
43+
</v-app-bar>
44+
<v-content style="background-color: #0071c2;">
45+
<v-container class="px-4 py-8">
46+
<nuxt />
47+
</v-container>
48+
</v-content>
49+
<v-footer dark color="#0071c2">
50+
<span>&copy; Code For Japan {{ new Date().getFullYear() }}</span>
51+
</v-footer>
52+
</v-app>
53+
</template>
54+
55+
<script>
56+
import { mapGetters } from 'vuex'
57+
import Calender from '@/assets/svgs/icon_calender.svg'
58+
export default {
59+
middleware: 'checkClassData',
60+
components: {
61+
Calender,
62+
},
63+
computed: {
64+
...mapGetters('modules/class', ['']),
65+
},
66+
data() {
67+
return {
68+
loading: true,
69+
}
70+
},
71+
mounted() {
72+
this.loading = false
73+
},
74+
}
75+
</script>
76+
77+
<style scoped>
78+
.date-icon {
79+
margin-right: 15px;
80+
}
81+
</style>

‎src/middleware/checkClassData.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export default function ({ store, redirect }) {
2+
if (!store.getters['modules/class/isLoadedClassData']) {
3+
return redirect('/')
4+
}
5+
}

‎src/pages/classes/index.vue‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<template>
2+
<div class="MainPage">
3+
<v-row class="DataBlock">
4+
<v-col
5+
v-for="(item, i) in Lessons['2020-04-04']"
6+
:key="i"
7+
cols="12"
8+
md="6"
9+
>
10+
<StudyCard
11+
:schooltime="i + 1"
12+
:realtime="item.realTime"
13+
:content="item.Content"
14+
:subject="item.Subject"
15+
/>
16+
</v-col>
17+
</v-row>
18+
</div>
19+
</template>
20+
21+
<script>
22+
import { mapGetters } from 'vuex'
23+
import StudyCard from '@/components/StudyCard'
24+
export default {
25+
components: { StudyCard },
26+
computed: {
27+
...mapGetters('modules/class', ['Lessons']),
28+
},
29+
}
30+
</script>
31+
32+
<style lang="scss" scoped>
33+
.MainPage {
34+
.Logo {
35+
text-align: center;
36+
}
37+
.DataBlock {
38+
margin: 0 -12px;
39+
.studycard {
40+
margin-bottom: 20px;
41+
}
42+
}
43+
}
44+
</style>

‎src/pages/edit/index.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { mapGetters } from 'vuex'
77
88
export default {
99
layout: 'protected',
10-
name: 'IndexVue',
10+
name: 'EditorIndex',
1111
computed: {
1212
...mapGetters('modules/user', ['uid']),
1313
},

‎src/pages/index.vue‎

Lines changed: 79 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,88 @@
11
<template>
2-
<div class="MainPage">
3-
<v-row class="DataBlock">
4-
<v-col
5-
v-for="(item, i) in classData.classData.Lessons['2020-04-04']"
6-
:key="i"
7-
cols="12"
8-
md="6"
9-
>
10-
<StudyCard
11-
:schooltime="i + 1"
12-
:realtime="item.realTime"
13-
:content="item.Content"
14-
:subject="item.Subject"
15-
/>
16-
</v-col>
17-
</v-row>
2+
<div class="LoginPage">
3+
<v-flex>
4+
<div class="Logo">
5+
<Logo style="height: 80vw; max-height: 350px; width: 100%;" />
6+
</div>
7+
<div class="LoginForm">
8+
<v-form ref="form" v-model="valid">
9+
<v-text-field
10+
v-model="classId"
11+
:counter="6"
12+
label="クラスID"
13+
:rules="nameRules"
14+
outlined
15+
dark
16+
required
17+
/>
18+
<v-btn
19+
block
20+
outlined
21+
color="white"
22+
height="40px"
23+
:loading="loading"
24+
:disabled="loading || !valid"
25+
@click="checkInClass"
26+
>
27+
LOGIN
28+
</v-btn>
29+
</v-form>
30+
</div>
31+
</v-flex>
1832
</div>
1933
</template>
2034

2135
<script>
22-
import { mapGetters } from 'vuex'
23-
import StudyCard from '@/components/StudyCard'
36+
import { mapActions } from 'vuex'
37+
import firebase from '@/plugins/firebase'
38+
import Logo from '@/assets/svgs/logo.svg'
2439
export default {
25-
components: { StudyCard },
26-
computed: {
27-
...mapGetters('modules/class', ['classData']),
40+
components: { Logo },
41+
data() {
42+
return {
43+
classId: '',
44+
loading: false,
45+
error: false,
46+
errorMessages: '',
47+
valid: true,
48+
exists: false,
49+
nameRules: [
50+
(v) => !!v || 'クラスIDは必須です',
51+
(v) => (v && v.length === 6) || 'クラスIDは6文字のひらがなです',
52+
],
53+
}
54+
},
55+
methods: {
56+
...mapActions('modules/class', ['loadClassData']),
57+
checkInClass() {
58+
this.loading = true
59+
this.checkExistsClassData(this.classId)
60+
if (this.exists) {
61+
this.loadClassData(this.classId)
62+
this.$router.push('classes')
63+
} else {
64+
this.loading = false
65+
this.error = true
66+
this.errorMessages = 'クラスIDが間違っています'
67+
}
68+
},
69+
checkExistsClassData(classid) {
70+
if (classid !== '' || classid !== null || classid !== '') {
71+
firebase
72+
.firestore()
73+
.collection('classData')
74+
.doc(classid)
75+
.get()
76+
.then(() => {
77+
this.exists = true
78+
})
79+
.catch(() => {
80+
this.exists = false
81+
})
82+
} else {
83+
this.exists = false
84+
}
85+
},
2886
},
2987
}
3088
</script>

‎src/store/index.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,19 @@
11
import { getUserFromCookie } from '@/helpers'
2+
/*
3+
import checkExistsClassData from '`@/utils/checkExistsClassData'
24
import firebase from '@/plugins/firebase'
5+
*/
36
export const actions = {
47
async nuxtServerInit({ dispatch, commit, state }, { req, res, error }) {
58
const user = getUserFromCookie(req)
9+
/*
610
const classDataSnapshot = await firebase
711
.firestore()
812
.collection('classData')
913
.doc('あけしめたす')
1014
.get()
1115
const classData = classDataSnapshot.data()
12-
await dispatch('modules/class/setClassData', { classData })
16+
await dispatch('modules/class/setClassData', { classData }) */
1317
if (user) {
1418
await dispatch('modules/user/setUserData', {
1519
name: user.name,

‎src/store/modules/class.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import firebase from '@/plugins/firebase'
12
export const state = () => ({
23
classId: '',
34
classData: {},
@@ -10,6 +11,15 @@ export const getters = {
1011
classId(state) {
1112
return state.classId
1213
},
14+
className(state) {
15+
return state.classData.className
16+
},
17+
schoolName(state) {
18+
return state.classData.schoolName
19+
},
20+
Lessons(state) {
21+
return state.classData.Lessons
22+
},
1323
}
1424

1525
export const mutations = {
@@ -22,10 +32,24 @@ export const mutations = {
2232
}
2333

2434
export const actions = {
35+
async loadClassData({ dispatch, state }, classId) {
36+
console.log(classId)
37+
const classDataSnapshot = await firebase
38+
.firestore()
39+
.collection('classData')
40+
.doc(classId)
41+
.get()
42+
const classDa = await classDataSnapshot.data()
43+
await dispatch('setClassData', classDa)
44+
await dispatch('setClassId', classId)
45+
},
2546
setClassData({ commit }, classData) {
2647
commit('setClassData', classData)
2748
},
2849
setClassId({ commit }, classId) {
2950
commit('setClassId', classId)
3051
},
52+
isLoadedClassData: (state) => {
53+
return !!state.classData
54+
},
3155
}

‎src/utils/uniq.js‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

0 commit comments

Comments
 (0)