Skip to content

Commit 4843d3b

Browse files
NEKOYASANNEKOYASAN
authored
Merge branch 'development' into feature/121-create-login-page
2 parents d293588 + 30c0e96 commit 4843d3b

File tree

10 files changed

+200
-62
lines changed

10 files changed

+200
-62
lines changed

‎src/components/PeriodCard.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
</div>
1414
<v-row>
1515
<v-col
16-
v-for="(item, i) in classData.getLessonsByDisplayDate"
16+
v-for="(item, i) in classData.lessonsOnCurrentDate"
1717
:key="i"
1818
cols="12"
1919
md="6"

‎src/components/PeriodCardEditable.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
</div>
1414
<v-row>
1515
<v-col
16-
v-for="(item, i) in classData.getLessonsByDisplayDate"
16+
v-for="(item, i) in classData.lessonsOnCurrentDate"
1717
:key="i"
1818
cols="12"
1919
md="6"

‎src/layouts/classes.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ export default Vue.extend({
5050
},
5151
watch: {
5252
date(value) {
53-
vxm.classData.setDate(value)
53+
vxm.app.setDate(value)
5454
}
5555
},
5656
mounted(): void {

‎src/pages/classes/index.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div class="MainPage">
3-
<div v-if="classData.getLessonsByDisplayDate.length">
3+
<div v-if="classData.lessonsOnCurrentDate.length">
44
<period-card :class-data="classData" />
55
</div>
66
<div v-else-if="today" class="Classes-Outer">
@@ -46,10 +46,10 @@ export default Vue.extend<Data, Methods, Computed, unknown>({
4646
},
4747
computed: {
4848
today() {
49-
return isToday(this.classData.displayDate)
49+
return isToday(vxm.app.currentDate)
5050
},
5151
dateTitle() {
52-
return dayjs(this.classData.displayDate).format('M/D')
52+
return dayjs(vxm.app.currentDate).format('M/D')
5353
}
5454
},
5555
methods: {

‎src/pages/edit/index.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div class="MainPage">
3-
<div v-if="classData.getLessonsByDisplayDate.length">
3+
<div v-if="classData.lessonsOnCurrentDate.length">
44
<period-card-editable :class-data="classData" />
55
</div>
66
<div v-else class="Classes-Outer">

‎src/pages/user/registerClass.vue‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<template>
2+
<bottom-sheet-layer title="クラス登録" title-en="STEP 2">
3+
<template v-slot:LayerContents>
4+
<dl class="RegisterClass-List">
5+
<dt class="RegisterClass-ItemTitle">学校名</dt>
6+
<dd>
7+
<input-field label="school" placeholder="おひさま小学校" require />
8+
</dd>
9+
<dt class="RegisterClass-ItemTitle">クラス名</dt>
10+
<dd>
11+
<input-field label="class" placeholder="2年B組" require />
12+
<span class="RegisterClass-ItemNote">
13+
クラス名は表示されますのでご注意ください
14+
</span>
15+
</dd>
16+
</dl>
17+
</template>
18+
<template v-slot:LayerFooter>
19+
<action-button theme="primary" text="登録を完了する" />
20+
</template>
21+
</bottom-sheet-layer>
22+
</template>
23+
24+
<script lang="ts">
25+
import Vue from 'vue'
26+
import BottomSheetLayer from '@/components/BottomSheetLayer.vue'
27+
import ActionButton from '@/components/ActionButton.vue'
28+
import InputField from '@/components/InputField.vue'
29+
30+
export default Vue.extend({
31+
components: { BottomSheetLayer, ActionButton, InputField },
32+
layout: 'background'
33+
})
34+
</script>
35+
36+
<style lang="scss" scoped>
37+
.RegisterClass-List {
38+
padding: 24px 0;
39+
}
40+
.RegisterClass-ItemTitle {
41+
font-size: 16px;
42+
font-weight: bold;
43+
color: $color-white;
44+
text-align: center;
45+
margin: 4px 0;
46+
}
47+
.RegisterClass-ItemNote {
48+
display: block;
49+
font-size: 14px;
50+
font-weight: bold;
51+
color: $color-white;
52+
text-align: center;
53+
margin: 4px 0;
54+
}
55+
</style>

‎src/pages/user/registered.vue‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<template>
2+
<bottom-sheet-layer title="登録されました！" title-en="THANK YOU!">
3+
<template v-slot:LayerContents>
4+
<div class="Registered-Contents">
5+
<v-icon color="white" class="Registered-Icon">
6+
mdi-clipboard-account
7+
</v-icon>
8+
<p class="Registered-Text">あなたのクラスIDです</p>
9+
<div class="Registered-Id">ほげほげほげ</div>
10+
</div>
11+
</template>
12+
<template v-slot:LayerFooter>
13+
<action-button
14+
theme="primary"
15+
text="授業を追加・編集する"
16+
class="Registered-Button"
17+
/>
18+
<action-button theme="secondary" text="クラスIDを共有する" />
19+
</template>
20+
</bottom-sheet-layer>
21+
</template>
22+
23+
<script lang="ts">
24+
import Vue from 'vue'
25+
import BottomSheetLayer from '@/components/BottomSheetLayer.vue'
26+
import ActionButton from '@/components/ActionButton.vue'
27+
28+
export default Vue.extend({
29+
components: { BottomSheetLayer, ActionButton },
30+
layout: 'background'
31+
})
32+
</script>
33+
34+
<style lang="scss" scoped>
35+
.Registered-Contents {
36+
display: flex;
37+
flex-direction: column;
38+
justify-content: center;
39+
align-items: center;
40+
padding: 24px 0;
41+
}
42+
.Registered-Icon {
43+
font-size: 50px;
44+
}
45+
.Registered-Text {
46+
font-size: 16px;
47+
font-weight: bold;
48+
color: $color-white;
49+
margin: 24px 0 12px;
50+
}
51+
.Registered-Id {
52+
max-width: 9em;
53+
padding: 16px 24px;
54+
text-align: center;
55+
background-color: $color-white;
56+
border: 2px solid $color-base-color-01;
57+
border-radius: 14px;
58+
letter-spacing: 0.2em;
59+
line-height: 1.25;
60+
font-size: 30px;
61+
color: $color-gray;
62+
}
63+
.Registered-Button {
64+
margin-bottom: 16px;
65+
}
66+
</style>

‎src/store/index.ts‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,17 @@ import Vuex, { ActionContext } from 'vuex'
33
import { Context } from '@nuxt/types/app'
44
import { createProxy, extractVuexModule } from 'vuex-class-component'
55
import jwtDecode from 'jwt-decode'
6-
import { UserStore } from '@/store/modules/user'
6+
import { AppStore } from '@/store/modules/app'
77
import { ClassDataStore } from '@/store/modules/classData'
8+
import { UserStore } from '@/store/modules/user'
89

910
Vue.use(Vuex)
1011

1112
export const store = new Vuex.Store({
1213
modules: {
13-
...extractVuexModule(UserStore),
14-
...extractVuexModule(ClassDataStore)
14+
...extractVuexModule(AppStore),
15+
...extractVuexModule(ClassDataStore),
16+
...extractVuexModule(UserStore)
1517
}
1618
})
1719

@@ -29,6 +31,7 @@ export const actions = {
2931
}
3032

3133
export const vxm = {
32-
user: createProxy(store, UserStore),
33-
classData: createProxy(store, ClassDataStore)
34+
app: createProxy(store, AppStore),
35+
classData: createProxy(store, ClassDataStore),
36+
user: createProxy(store, UserStore)
3437
}

‎src/store/modules/app.ts‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { createModule, mutation } from 'vuex-class-component'
2+
import dayjs from 'dayjs'
3+
4+
const VuexModule = createModule({
5+
namespaced: 'app',
6+
strict: false,
7+
target: 'nuxt'
8+
})
9+
10+
type CurrentDate = Date
11+
12+
interface App {
13+
currentDate: CurrentDate
14+
}
15+
16+
export class AppStore extends VuexModule implements App {
17+
currentDate: CurrentDate = new Date()
18+
19+
@mutation
20+
public goNextDate() {
21+
this.currentDate = dayjs(this.currentDate)
22+
.add(1, 'd')
23+
.toDate()
24+
}
25+
26+
@mutation
27+
public goPreviousDate() {
28+
this.currentDate = dayjs(this.currentDate)
29+
.subtract(1, 'd')
30+
.toDate()
31+
}
32+
33+
@mutation
34+
public setDate(date: Date) {
35+
this.currentDate = date
36+
}
37+
}

‎src/store/modules/classData.ts‎

Lines changed: 27 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
1-
import { createModule, mutation, action } from 'vuex-class-component'
2-
import dayjs from 'dayjs'
1+
import {
2+
createModule,
3+
mutation,
4+
action,
5+
createProxy
6+
} from 'vuex-class-component'
37
import firebase from '@/plugins/firebase'
8+
import { AppStore } from '@/store/modules/app'
49
import Timestamp = firebase.firestore.Timestamp
510

611
const VuexModule = createModule({
@@ -12,7 +17,6 @@ const VuexModule = createModule({
1217
type ClassId = string
1318
type ClassName = string
1419
type Lessons = Lesson[]
15-
type DisplayDate = Date
1620

1721
interface Lesson {
1822
subject: string
@@ -37,39 +41,31 @@ interface ClassData {
3741
classId: ClassId
3842
className: ClassName
3943
lessons: Lessons
40-
displayDate: DisplayDate
4144
}
4245

4346
export class ClassDataStore extends VuexModule implements ClassData {
4447
classId: ClassId = ''
4548
className: ClassName = ''
4649
lessons: Lessons = []
47-
displayDate: DisplayDate = new Date()
48-
49-
public get getLessonsByDisplayDate(): Lessons {
50-
const dateStart = new Date(
51-
this.displayDate.getFullYear(),
52-
this.displayDate.getMonth(),
53-
this.displayDate.getDate(),
54-
0,
55-
0,
56-
0
57-
)
58-
const dateEnd = new Date(
59-
this.displayDate.getFullYear(),
60-
this.displayDate.getMonth(),
61-
this.displayDate.getDate(),
62-
23,
63-
59,
64-
59
65-
)
66-
const lessonsByDate: Lessons = []
67-
this.lessons.forEach(value => {
68-
const sec = value.startTime.getTime()
69-
if (dateStart.getTime() <= sec && dateEnd.getTime() >= sec)
70-
lessonsByDate.push(value)
50+
51+
public get lessonsOnCurrentDate(): Lessons {
52+
const appStore = createProxy(this.$store, AppStore)
53+
54+
// Generate a new Date object with a specified date & time
55+
const d = (date: Date, hours: number, minutes: number, seconds: number) => {
56+
const newDate = new Date(date)
57+
newDate.setHours(hours)
58+
newDate.setMinutes(minutes)
59+
newDate.setSeconds(seconds)
60+
return newDate
61+
}
62+
const start = d(appStore.currentDate, 0, 0, 0).getTime()
63+
const end = d(appStore.currentDate, 23, 59, 59).getTime()
64+
65+
return this.lessons.filter(lesson => {
66+
const startOfLesson = lesson.startTime.getTime()
67+
return start <= startOfLesson && end >= startOfLesson
7168
})
72-
return lessonsByDate
7369
}
7470

7571
public get isLoaded(): boolean {
@@ -87,25 +83,6 @@ export class ClassDataStore extends VuexModule implements ClassData {
8783
this.lessons = lessons
8884
}
8985

90-
@mutation
91-
public nextDate() {
92-
this.displayDate = dayjs(this.displayDate)
93-
.add(1, 'd')
94-
.toDate()
95-
}
96-
97-
@mutation
98-
public prevDate() {
99-
this.displayDate = dayjs(this.displayDate)
100-
.subtract(1, 'd')
101-
.toDate()
102-
}
103-
104-
@mutation
105-
public setDate(date: Date) {
106-
this.displayDate = date
107-
}
108-
10986
@action
11087
public async loadClassData(classId: ClassId) {
11188
let className = ''
@@ -117,8 +94,8 @@ export class ClassDataStore extends VuexModule implements ClassData {
11794
.collection('Lessons')
11895
.orderBy('startTime')
11996
.get()
120-
.then(QuerySnapshot => {
121-
QuerySnapshot.forEach(function(doc) {
97+
.then(querySnapshot => {
98+
querySnapshot.forEach(function(doc) {
12299
const data = doc.data() as RawLesson
123100
const reformatData = {
124101
subject: data.subject,

0 commit comments

Comments
 (0)