ProgrammingLab · Fukusan64 · Apr 10, 2019 · Apr 1, 2019 · Apr 1, 2019 · Apr 1, 2019
diff --git a/public/index.html b/public/index.html
@@ -6,8 +6,9 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title>ProLab Accounts Client</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css">
-    <link href="https://fonts.googleapis.com/css?family=Barlow:500" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.min.css">
+    <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:700&amp;subset=japanese" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Barlow" rel="stylesheet">
   </head>
   <body>
     <noscript>

diff --git a/src/App.vue b/src/App.vue
@@ -23,7 +23,7 @@ export default {
 <style>
   html { height: 100%; }
   body {
-    font-family: 'Barlow', sans-serif;
+    font-family: 'Noto Sans JP', sans-serif;
     height: 100%;
   }
 

diff --git a/src/api/achievement/index.js b/src/api/achievement/index.js
@@ -0,0 +1,8 @@
+import api from '@/api';
+
+export default {
+  async getAchievements() {
+    const achievementData = (await api.client.get('/achievements')).data;
+    return achievementData;
+  },
+};
diff --git a/src/components/AchievementsList.vue b/src/components/AchievementsList.vue
@@ -0,0 +1,109 @@
+<template>
+  <ul>
+    <li v-for="item in achievements" :key="item.id">
+      <dl>
+        <dt>{{ item.title }}</dt>
+        <dd class="award">{{ item.award }}</dd>
+        <dd class="year">{{ item.happened_at.split('-')[0] }}</dd>
+        <dd>{{ item.description }}</dd>
+      </dl>
+      <img v-bind:src="item.image_url">
+    </li>
+  </ul>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex';
+
+export default {
+  name: 'AchievementsList',
+  computed: mapState(
+    'achievement', ['achievements'],
+  ),
+  methods: {
+    ...mapActions(
+      'achievement', ['getAchievements'],
+    ),
+  },
+  async created() {
+    this.getAchievements();
+  },
+};
+</script>
+
+<style scoped>
+ul {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  margin-left: 60px;
+  margin-right: 20px;
+  padding: 0;
+  align-items: flex-start;
+}
+li {
+  margin-bottom: 40px;
+  margin-right: 1%;
+  border: 1px solid #666;
+  list-style: none;
+  width: 24%;
+  position: relative;
+}
+li:hover {
+  cursor: pointer;
+}
+li:hover {
+  background-color: black;
+  color: white;
+  transition-duration: 0.2s;
+}
+
+dl {
+  margin: 20px;
+}
+dt {
+  font-size: 1.4rem;
+}
+dd, dt {
+  width: 85%;
+}
+dd.award {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+dd.year {
+  text-align: right;
+  position: absolute;
+  right: 0;
+  top: 6px;
+  color: #ccc;
+  font-size: 3.5rem;
+  transform: rotate(-90deg) translateY(-100%);
+  transform-origin: right top;
+  line-height: 1;
+  font-family: 'Barlow';
+}
+li:hover dd.year {
+  color: white;
+}
+p {
+  text-overflow: ellipsis;
+}
+img {
+  width: 100%;
+}
+
+@media screen and (max-width: 1024px) {
+  li {
+    width: 48%;
+    margin-right: 2%;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  li {
+    width: 100%;
+  }
+}
+</style>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
diff --git a/src/store/index.js b/src/store/index.js
@@ -6,6 +6,7 @@ import oauthConsent from './modules/oauth/consent';
 import session from './modules/session';
 import user from './modules/user';
 import criticalError from './modules/criticalError';
+import achievement from './modules/achievement';
 import emailConfirmations from './modules/emailConfirmations';
 import memberIntroduction from './modules/memberIntroduction';
 import editUser from './modules/editUser';
@@ -20,6 +21,7 @@ export default new Vuex.Store({
     session,
     user,
     criticalError,
+    achievement,
     emailConfirmations,
     memberIntroduction,
     editUser,

diff --git a/src/store/modules/achievement/index.js b/src/store/modules/achievement/index.js
@@ -0,0 +1,24 @@
+import achievementClient from '@/api/achievement';
+
+export default {
+  namespaced: true,
+  state: {
+    achievements: null,
+  },
+  /* eslint-disable no-param-reassign */
+  mutations: {
+    setAchievements(state, achievements) {
+      state.achievements = achievements.achievements;
+    },
+  },
+  /* eslint-enable no-param-reassign */
+  actions: {
+    async getAchievements({ commit }, sessionID) {
+      try {
+        commit('setAchievements', await achievementClient.getAchievements(sessionID));
+      } catch (e) {
+        commit('criticalError/createError', e, { root: true });
+      }
+    },
+  },
+};
diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -1,18 +1,122 @@
 <template>
   <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <h1><img class="logo" src="@/assets/logo.svg" alt="ProLab"></h1>
+    <section>
+      <h2>部員募集中!</h2>
+      <p>
+        久留米高専プロラボ部は平日授業を終えた学生が集まり次第、電気電子・制御情報工学科棟のSJ（制御情報実験室）で活動しています。<br>
+        興味のある方は、活動時間にSJ教室を訪ねてみてくださいね！
+      </p>
+    </section>
+
+    <section>
+      <h2>戦歴</h2>
+      <AchievementsList/>
+    </section>
+
+    <footer>
+      <div v-if="loggedIn">
+        <router-link to="/editprofile">プロフィール編集</router-link>
+        <router-link to="">ログアウト</router-link> <!-- TODO: ログアウトできるようにする -->
+      </div>
+      <div v-else>
+        <router-link to="/login">ログイン</router-link>
+      </div>
+      <small>&copy; Programming Laboratory, 2019</small>
+    </footer>
   </div>
 </template>
 
 <script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue';
+import { mapGetters } from 'vuex';
+import AchievementsList from '@/components/AchievementsList.vue';
 
 export default {
   name: 'home',
   components: {
-    HelloWorld,
+    AchievementsList,
+  },
+  computed: {
+    ...mapGetters('session', ['loggedIn']),
   },
 };
 </script>
+
+<style scoped>
+@keyframes slide {
+  from {
+    width: 100%;
+  }
+  to {
+    width: 0;
+  }
+}
+
+footer div {
+  text-align: center;
+}
+
+footer a {
+  display: inline-block;
+  padding: 12px;
+  border-bottom: 2px #333 solid;
+  color: black;
+  margin: 0 4px 24px;
+}
+
+footer small {
+  display: block;
+}
+
+.home {
+  max-width: 1500px;
+  margin: 40px auto;
+}
+
+h1 img {
+  max-width: 400px;
+  width: 80%;
+}
+
+section {
+  margin: 40px 0;
+}
+
+h2 {
+  background-color: black;
+  display: inline-block;
+  color: white;
+  font-weight: 200;
+  line-height: 1.1;
+  font-size: 3rem;
+  padding: 0 20px 0 60px;
+  margin-bottom: 10px;
+  position: relative;
+}
+
+h2::after {
+  display: block;
+  height: 100%;
+  content: "";
+  position: absolute;
+  background-color: white;
+  top: 0;
+  right: 0;
+  animation: slide 0.5s cubic-bezier(0, 0, 0.16, 0.96);
+}
+
+p {
+  margin-left: 60px;
+  margin-right: 20px;
+}
+
+small {
+  text-align: center;
+}
+
+@media screen and (max-width: 480px) {
+  h2 {
+    font-size: 2rem;
+  }
+}
+</style>