merge develop into main

README.md

@@ -11,25 +11,43 @@ iNAZO とは北大が公開している成績データを見やすく纏めた W
 
 ## Local Usage
 
-./clientでの作業
-```
+./client での作業
+
+```bash
 yarn install
 yarn dev
 ```
 
-./serverでの作業
-```
+./server での作業
+
+```bash
 pipenv sync
 cp .env.example .env
 ```
-.envのDATABASE_URLを絶対パスで適切に設定する
+
+.env の DATABASE_URL を絶対パスで適切に設定する
 example: sqlite:////tmp/my-tmp-sqlite.db
-```
+
+```bash
 pipenv run migrate
 pipenv run dev
 ```
 
-初期データは別途スクレイピングをしてDBに保存してください。
+初期データは別途スクレイピングをして DB に保存してください。
+
+## スクレイピング方法
+
+```bash
+pipenv run gradescraping <year-semester> <faculty>
+# example
+pipenv run gradescraping 2023 1
+```
+
+成績を DB にロードする
+
+```bash
+pipenv run loaddata
+```
 
 ## Source
 
@@ -44,11 +62,9 @@ http://educate.academic.hokudai.ac.jp/seiseki/GradeDistSerch.aspx
 
 ## Relevant repository
 
-OGP IMAGEを動的に生成するツール
+OGP IMAGE を動的に生成するツール
 [iNAZO-opg-image](https://github.com/karintou8710/iNAZO-ogp-image)
 
 ## License
 
 このプロジェクトは [MIT license](https://en.wikipedia.org/wiki/MIT_License) です。
-
-

client/layouts/error.vue

@@ -7,6 +7,7 @@
                 </template>
                 <template v-else>
                     <h1>An error occurred</h1>
+                    <p>status code: {{ error.statusCode }}</p>
                     <p>{{ error.message }}</p>
                 </template>
             </v-col>

client/mixins/chart-mixin.js

@@ -52,28 +52,77 @@ export default {
 
             if (item.isBookMark) {
                 // ブックマーク解除
-                const res = await axios.delete(`${bookmarkURL}${bookMarkID}/`, {
-                    withCredentials: true
-                });
+                let res;
+                try {
+                    res = await axios.delete(`${bookmarkURL}${bookMarkID}/`, {
+                        withCredentials: true
+                    });
+                } catch (error) {
+                    if (error.response) {
+                        this.$nuxt.error({
+                            status: error.response.status,
+                            message: 'サーバーでエラーが発生しました'
+                        });
+                    } else if (error.request) {
+                        this.$nuxt.error({
+                            message: 'サーバーからレスポンスがありません'
+                        });
+                    } else {
+                        this.$nuxt.error({
+                            message: error.message
+                        });
+                    }
+                    return;
+                }
+
                 if (res.status === HTTP_204_NO_CONTENT) {
                     this.bookMarkIDs = this.bookMarkIDs.filter(id => id !== bookMarkID);
                     item.isBookMark = !item.isBookMark;
                     this.$set(this.items, index, item);
+                } else {
+                    this.$nuxt.error({
+                        status: res.status,
+                        message: '予期しないステータスコードです'
+                    });
                 }
             } else {
                 // 登録
-                const res = await axios.post(
-                    bookmarkURL,
-                    { bookMarkID },
-                    {
-                        withCredentials: true
+                let res;
+                try {
+                    res = await axios.post(
+                        bookmarkURL,
+                        { bookMarkID },
+                        {
+                            withCredentials: true
+                        }
+                    );
+                } catch (error) {
+                    if (error.response) {
+                        this.$nuxt.error({
+                            status: error.response.status,
+                            message: 'サーバーでエラーが発生しました'
+                        });
+                    } else if (error.request) {
+                        this.$nuxt.error({
+                            message: 'サーバーからレスポンスがありません'
+                        });
+                    } else {
+                        this.$nuxt.error({
+                            message: error.message
+                        });
                     }
-                );
+                    return;
+                }
 
                 if (res.status === HTTP_201_CREATED) {
                     this.bookMarkIDs = res.data.bookMarkIDs;
                     item.isBookMark = !item.isBookMark;
                     this.$set(this.items, index, item);
+                } else {
+                    this.$nuxt.error({
+                        status: res.status,
+                        message: '予期しないステータスコードです'
+                    });
                 }
             }
         },

client/pages/bookmark.vue

@@ -113,9 +113,28 @@ export default {
         async fetchBookmarkAPIData () {
             this.isVisible = false;
 
-            const res = await axios.get(this.joinQuery(bookmarkURL), {
-                withCredentials: true
-            });
+            let res;
+            try {
+                res = await axios.get(this.joinQuery(bookmarkURL), {
+                    withCredentials: true
+                });
+            } catch (error) {
+                if (error.response) {
+                    this.$nuxt.error({
+                        status: error.response.status,
+                        message: 'サーバーでエラーが発生しました'
+                    });
+                } else if (error.request) {
+                    this.$nuxt.error({
+                        message: 'サーバーからレスポンスがありません'
+                    });
+                } else {
+                    this.$nuxt.error({
+                        message: error.message
+                    });
+                }
+                return;
+            }
 
             this.items.splice(0, this.items.length);
             this.items.push(...res.data);

client/pages/detail/_id.vue

@@ -112,6 +112,13 @@ export default {
     },
     async fetch () {
         await this.fetchGradeAPIData();
+
+        if (process.server) {
+            const headers = this.$nuxt.context.req.headers;
+            await this.fetchBookmarkAPIData(headers);
+        } else {
+            await this.fetchBookmarkAPIData();
+        }
     },
     head () {
         return {
@@ -146,10 +153,6 @@ export default {
             return url;
         }
     },
-    async mounted () {
-        // 初期取得はbookmarkを始めにfetchする。
-        await this.fetchBookmarkAPIdata();
-    },
     methods: {
         filterSearch () {
             this.$router.push({ path: `/search/?search=${this.search}` });
@@ -158,9 +161,28 @@ export default {
         async fetchGradeAPIData () {
             this.isVisible = false;
 
-            const res = await axios.get(gradeURL + this.$route.params.id, {
-                withCredentials: true
-            });
+            let res;
+            try {
+                res = await axios.get(gradeURL + this.$route.params.id, {
+                    withCredentials: true
+                });
+            } catch (error) {
+                if (error.response) {
+                    this.$nuxt.error({
+                        status: error.response.status,
+                        message: 'サーバーでエラーが発生しました'
+                    });
+                } else if (error.request) {
+                    this.$nuxt.error({
+                        message: 'サーバーからレスポンスがありません'
+                    });
+                } else {
+                    this.$nuxt.error({
+                        message: error.message
+                    });
+                }
+                return;
+            }
 
             // chartを更新
             this.items.push(res.data);
@@ -193,45 +215,118 @@ export default {
             this.isVisible = true;
         },
 
-        // ページに訪れた時のみに使用
-        async fetchBookmarkAPIdata () {
-            const res = await axios.get(bookmarkURL, {
-                withCredentials: true
-            });
-            this.bookMarkIDs = res.data.map(item => item.id);
-        },
-
         async postBookMark (index) {
             // Objectをコピーする必要がある。
             const item = Object.assign({}, this.items[index]);
             const bookMarkID = item.id;
 
             if (item.isBookMark) {
                 // ブックマーク解除
-                const res = await axios.delete(`${bookmarkURL}${bookMarkID}/`, {
-                    withCredentials: true
-                });
+                let res;
+                try {
+                    res = await axios.delete(`${bookmarkURL}${bookMarkID}/`, {
+                        withCredentials: true
+                    });
+                } catch (error) {
+                    if (error.response) {
+                        this.$nuxt.error({
+                            status: error.response.status,
+                            message: 'サーバーでエラーが発生しました'
+                        });
+                    } else if (error.request) {
+                        this.$nuxt.error({
+                            message: 'サーバーからレスポンスがありません'
+                        });
+                    } else {
+                        this.$nuxt.error({
+                            message: error.message
+                        });
+                    }
+                    return;
+                }
+
                 if (res.status === HTTP_204_NO_CONTENT) {
                     this.bookMarkIDs = this.bookMarkIDs.filter(id => id !== bookMarkID);
                     item.isBookMark = !item.isBookMark;
                     this.$set(this.items, index, item);
+                } else {
+                    this.$nuxt.error({
+                        status: res.status,
+                        message: '予期しないステータスコードです'
+                    });
                 }
             } else {
                 // 登録
-                const res = await axios.post(
-                    bookmarkURL,
-                    { bookMarkID },
-                    {
-                        withCredentials: true
+                let res;
+                try {
+                    res = await axios.post(
+                        bookmarkURL,
+                        { bookMarkID },
+                        {
+                            withCredentials: true
+                        }
+                    );
+                } catch (error) {
+                    if (error.response) {
+                        this.$nuxt.error({
+                            status: error.response.status,
+                            message: 'サーバーでエラーが発生しました'
+                        });
+                    } else if (error.request) {
+                        this.$nuxt.error({
+                            message: 'サーバーからレスポンスがありません'
+                        });
+                    } else {
+                        this.$nuxt.error({
+                            message: error.message
+                        });
                     }
-                );
+                    return;
+                }
 
                 if (res.status === HTTP_201_CREATED) {
                     this.bookMarkIDs = res.data.bookMarkIDs;
                     item.isBookMark = !item.isBookMark;
                     this.$set(this.items, index, item);
+                } else {
+                    this.$nuxt.error({
+                        status: res.status,
+                        message: '予期しないステータスコードです'
+                    });
+                }
+            }
+        },
+
+        // ページに訪れた時のみに使用
+        async fetchBookmarkAPIData (headers) {
+            const options = {
+                withCredentials: true
+            };
+            if (headers) { options.headers = { cookie: headers.cookie }; }
+            let res;
+            try {
+                res = await axios.get(bookmarkURL, options);
+            } catch (error) {
+                if (error.response) {
+                    this.$nuxt.error({
+                        status: error.response.status,
+                        message: 'サーバーでエラーが発生しました'
+                    });
+                } else if (error.request) {
+                    this.$nuxt.error({
+                        message: 'サーバーからレスポンスがありません'
+                    });
+                } else {
+                    this.$nuxt.error({
+                        message: error.message
+                    });
                 }
+                return;
             }
+            this.bookMarkIDs = res.data.map(item => item.id);
+            this.items.forEach((item) => {
+                this.$set(item, 'isBookMark', this.bookMarkIDs.includes(item.id));
+            });
         }
     }
 };