💬 コンテスト中間発表のデータ挿入

ynufes-tech · Nov 3, 2023 · 4ee8dac · 4ee8dac
1 parent 7c82d19
commit 4ee8dac
Showing 1 changed file with 88 additions and 87 deletions.
diff --git a/pages/sp/contest.vue b/pages/sp/contest.vue
@@ -14,18 +14,27 @@ interface RankingData {
   UPDATED: string;
 }
 
-const rankingData = await useFetch("/api/contest")
-  .then((res) => {
-    if (
-      res.data.value.FOOD &&
-      res.data.value.EXHIBITION &&
-      res.data.value.PERFORMANCE
-    ) {
-      return res.data.value as RankingData;
-    }
-    return null;
-  })
-  .catch(() => null);
+// const rankingData = await useFetch("/api/contest")
+//   .then((res) => {
+//     if (
+//       res.data.value.FOOD &&
+//       res.data.value.EXHIBITION &&
+//       res.data.value.PERFORMANCE
+//     ) {
+//       return res.data.value as RankingData;
+//     }
+//     return null;
+//   })
+//   .catch(() => null);
+
+const rankingData = {
+  FOOD: [113, 42, 97],
+  EXHIBITION: [83, 91, 45],
+  PERFORMANCE: [102, 10, 101],
+  DRINK: [29, 4, 12],
+  VISUAL: [49],
+  UPDATED: "11月4日(土)午前9時更新",
+} as RankingData;
 
 useHead({
   title: "企画コンテスト | 23常盤祭公式HP~未来航路~",
@@ -81,72 +90,72 @@ gtag("event", "screen_view", {
         </ul>
         全企画が対象で見た目を観点に投票します。Xを用いて投票をお願いします。写真をたくさん撮ろう！
       </div>
-      <SponsorsListTitle text="中間結果発表" />
-      <div v-if="rankingData" class="result-table-section">
-        <h2>{{ rankingData.UPDATED }} 更新</h2>
-        <div class="result-table-holder">
-          <table class="result-table">
-            <tr>
-              <td>順位</td>
-              <td>第1位</td>
-              <td>第2位</td>
-              <td>第3位</td>
-            </tr>
-            <tr>
-              <td>飲食</td>
-              <td v-for="(e, index) in rankingData.FOOD" :key="index">
-                <NuxtLink :to="`/event/${e}`">
-                  <ProjectCardCompact
-                    :event-data="events.find((s: EventSummary) => s.id === e)"
-                  />
-                </NuxtLink>
-              </td>
-            </tr>
-            <tr>
-              <td>展示・物販</td>
-              <td v-for="(e, index) in rankingData.EXHIBITION" :key="index">
-                <NuxtLink :to="`/event/${e}`">
-                  <ProjectCardCompact
-                    :event-data="events.find((s: EventSummary) => s.id === e)"
-                  />
-                </NuxtLink>
-              </td>
-            </tr>
-            <tr>
-              <td>パフォーマンス</td>
-              <td v-for="(e, index) in rankingData.PERFORMANCE" :key="index">
-                <NuxtLink :to="`/event/${e}`">
-                  <ProjectCardCompact
-                    :event-data="events.find((s: EventSummary) => s.id === e)"
-                  />
-                </NuxtLink>
-              </td>
-            </tr>
-            <tr>
-              <td>オリジナルドリンク</td>
-              <td v-for="(e, index) in rankingData.DRINK" :key="index">
-                <NuxtLink :to="`/event/${e}`">
-                  <ProjectCardCompact
-                    :event-data="events.find((s: EventSummary) => s.id === e)"
-                  />
-                </NuxtLink>
-              </td>
-            </tr>
-            <tr>
-              <td>ビジュアル</td>
-              <td v-for="(e, index) in rankingData.VISUAL" :key="index">
-                <NuxtLink :to="`/event/${e}`">
-                  <ProjectCardCompact
-                    :event-data="events.find((s: EventSummary) => s.id === e)"
-                  />
-                </NuxtLink>
-              </td>
-            </tr>
-          </table>
-        </div>
-      </div>
-      <div v-else class="result-description">
-        中間発表はこれから!!お楽しみに!!
+      <SponsorsListTitle text="結果発表" />
+      <div class="result-description">中間発表はこれから!!お楽しみに!!</div>
+      <div class="result-table-holder" v-if="rankingData">
+        <table class="result-table">
+          <tr>
+            <td>順位</td>
+            <td>第1位</td>
+            <td>第2位</td>
+            <td>第3位</td>
+          </tr>
+          <tr>
+            <td>飲食</td>
+            <td v-for="(e, index) in rankingData.FOOD" :key="index">
+              <ProjectCardCompact
+                :event-data="
+                  events.find((s: EventSummary) => s.id === e) ??
+                  new EventSummary()
+                "
+              />
+            </td>
+          </tr>
+          <tr>
+            <td>展示・物販</td>
+            <td v-for="(e, index) in rankingData.EXHIBITION" :key="index">
+              <ProjectCardCompact
+                :event-data="
+                  events.find((s: EventSummary) => s.id === e) ??
+                  new EventSummary()
+                "
+              />
+            </td>
+          </tr>
+          <tr>
+            <td>パフォーマンス</td>
+            <td v-for="(e, index) in rankingData.PERFORMANCE" :key="index">
+              <ProjectCardCompact
+                :event-data="
+                  events.find((s: EventSummary) => s.id === e) ??
+                  new EventSummary()
+                "
+              />
+            </td>
+          </tr>
+          <tr>
+            <td>オリジナルドリンク</td>
+            <td v-for="(e, index) in rankingData.DRINK" :key="index">
+              <ProjectCardCompact
+                :event-data="
+                  events.find((s: EventSummary) => s.id === e) ??
+                  new EventSummary()
+                "
+              />
+            </td>
+          </tr>
+          <tr>
+            <td>ビジュアル</td>
+            <td v-for="(e, index) in rankingData.VISUAL" :key="index">
+              <ProjectCardCompact
+                :event-data="
+                  events.find((s: EventSummary) => s.id === e) ??
+                  new EventSummary()
+                "
+              />
+            </td>
+          </tr>
+        </table>
       </div>
     </div>
     <BackToHome />
@@ -218,16 +227,8 @@ gtag("event", "screen_view", {
   text-align: center;
 }
 
-.result-table-section {
-  text-align: center;
-
-  > h2 {
-    font-size: 1.5em;
-    margin: 1em 0;
-  }
-}
-
 .result-table-holder {
+  padding: 2em 0;
   text-align: center;
   overflow-x: scroll;
 }