Merge pull request #212 from y-chan/fix-isoformat

fix iso format to datetime
stop-covid19-hyogo · Apr 5, 2020 · df78296 · df78296
2 parents ec8a4dc + b3fab1d
commit df78296
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 117 deletions.
diff --git a/components/DataView.vue b/components/DataView.vue
@@ -28,7 +28,7 @@
           <div>
             <a class="Permalink" :href="permalink()">
               <time :datetime="formattedDate">
-                {{ $t('{date} 時点', { date }) }}
+                {{ $t('{fixedTime} 時点', { fixedTime }) }}
               </time>
             </a>
           </div>
@@ -139,7 +139,9 @@
         {{ $t('埋め込みコードをコピーしました') }}
       </div>
       <v-footer class="DataView-Footer">
-        <time :datetime="date">{{ $t('{date} 更新', { date }) }}</time>
+        <time :datetime="fixedTime">{{
+          $t('{fixedTime} 更新', { fixedTime })
+        }}</time>
         <slot name="footer" />
       </v-footer>
     </div>
@@ -148,7 +150,7 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import { convertDatetimeToISO8601Format } from '@/utils/formatDate'
+import { convertISO8601FormatToDatetime } from '@/utils/formatDate'
 
 export default Vue.extend({
   props: {
@@ -172,14 +174,15 @@ export default Vue.extend({
   },
   data() {
     return {
+      fixedTime: convertISO8601FormatToDatetime(this.date),
       openGraphEmbed: false,
       displayShare: false,
       showOverlay: false
     }
   },
   computed: {
     formattedDate(): string {
-      return convertDatetimeToISO8601Format(this.date)
+      return convertISO8601FormatToDatetime(this.date)
     },
     graphEmbedValue(): string {
       const graphEmbedValue =

diff --git a/pages/cards/_card.vue b/pages/cards/_card.vue
@@ -90,6 +90,7 @@ import TokyoCityMapCard from '@/components/cards/TokyoCityMapCard.vue' */
 import PatientsByAge from '@/components/cards/PatientsByAge.vue'
 import PatientsByClusters from '@/components/cards/PatientsByClusters.vue'
 import PatientsAndSickbeds from '@/components/cards/PatientsAndSickbeds.vue'
+import { convertDatetimeToString } from '@/utils/formatDate'
 
 export default {
   components: {
@@ -177,9 +178,10 @@ export default {
         break
     }
 
+    const updatedTimeStr = convertDatetimeToString(updatedAt)
     const data = {
       title,
-      updatedAt
+      updatedTimeStr
     }
     return data
   },
@@ -190,7 +192,7 @@ export default {
       this.$i18n.locale === 'ja'
         ? `${url}/ogp/${this.$route.params.card}.png?t=${timestamp}`
         : `${url}/ogp/${this.$i18n.locale}/${this.$route.params.card}.png?t=${timestamp}`
-    const description = `${this.updatedAt} | ${this.$t(
+    const description = `${this.updatedTimeStr} | ${this.$t(
       '当サイトは新型コロナウイルス感染症 (COVID-19) に関する最新情報を提供するために、有志のクリエイターが開設したものです。公式情報ではないことをご了承ください。'
     )}`
 

diff --git a/pages/index.vue b/pages/index.vue
@@ -1,119 +1,12 @@
 <template>
   <div class="MainPage">
-    <!--<page-header
-      :icon="headerItem.icon"
-      :title="headerItem.title"
-      :date="headerItem.date"
-    />
-
-    <whats-new class="mb-4" :items="newsItems" />
-    <static-info
-      class="mb-4"
-      :url="'/flow'"
-      :text="'自分や家族の症状に不安や心配があればまずは電話相談をどうぞ'"
-      :btn-text="'相談の手順を見る'"
-    />
-
-    <v-row class="DataBlock">
-      <v-col cols="12" md="6" class="DataCard">
-        <svg-card
-          title="検査陽性者の状況"
-          :title-id="'details-of-confirmed-cases'"
-          :date="inspectionsSummary.last_update"
-        >
-          <confirmed-cases-table v-bind="confirmedCases" />
-        </svg-card>
-      </v-col>
-      <v-col cols="12" md="6" class="DataCard">
-        <time-bar-chart
-          title="陽性患者数"
-          :title-id="'number-of-confirmed-cases'"
-          :chart-id="'time-bar-chart-patients'"
-          :chart-data="patientsGraph"
-          :date="patients.last_update"
-          :unit="'人'"
-          :url="'https://web.pref.hyogo.lg.jp/kk03/corona_hasseijyokyo.html'"
-        />
-      </v-col>
-      <v-col cols="12" md="6" class="DataCard">
-        <data-table
-          :title="'陽性患者の属性'"
-          :title-id="'attributes-of-confirmed-cases'"
-          :chart-data="patientsTable"
-          :chart-option="{}"
-          :date="patients.last_update"
-          :info="sumInfoOfPatients"
-          :url="'https://web.pref.hyogo.lg.jp/kk03/corona_hasseijyokyo.html'"
-        />
-      </v-col>
-      <v-col cols="12" md="6" class="DataCard">
-        <time-stacked-bar-chart
-          title="検査実施数"
-          :title-id="'number-of-tested'"
-          :chart-id="'time-stacked-bar-chart-inspections'"
-          :chart-data="inspectionsGraph"
-          :date="inspectionsSummary.last_update"
-          :items="inspectionsItems"
-          :labels="inspectionsLabels"
-          :unit="'件'"
-          :url="'https://web.pref.hyogo.lg.jp/kf16/singatakoronakensa.html'"
-        />
-      </v-col>
-      <v-col cols="12" md="6" class="DataCard">
-        <time-bar-chart
-          title="年代別陽性患者数"
-          :title-id="'patients-by-age'"
-          :chart-id="'time-bar-chart-patients-by-age'"
-          :chart-data="ageGraph"
-          :date="age.last_update"
-          :unit="'人'"
-          :url="'https://web.pref.hyogo.lg.jp/kk03/corona_hasseijyokyo.html'"
-          :show-button="false"
-        />
-      </v-col>
-      <v-col cols="12" md="6" class="DataCard">
-        <data-table
-          :title="'クラスター別陽性患者数'"
-          :title-id="'patients-by-clusters'"
-          :chart-data="clustersTable"
-          :chart-option="{}"
-          :date="clustersSummary.last_update"
-          :info="sumInfoOfClusters"
-          :url="'https://web.pref.hyogo.lg.jp/kk03/corona_hasseijyokyo.html'"
-          :desc="'（注）同一の対象者が複数含まれる場合あり'"
-        />
-        <time-bar-chart
-          title="クラスター別陽性患者数"
-          :title-id="'patients-by-clusters'"
-          :chart-id="'time-bar-chart-patients-by-clusters'"
-          :chart-data="clustersGraph"
-          :date="clustersSummary.last_update"
-          :unit="'人'"
-          :url="'https://web.pref.hyogo.lg.jp/kk03/corona_hasseijyokyo.html'"
-          :desc="'（注）同一の対象者が複数含まれる場合あり'"
-          :show-button="false"
-          :horizontal="true"
-          :overlap="patientsTable.datasets.length"
-        />
-      </v-col>
-      <v-col cols="12" md="6" class="DataCard">
-        <circle-chart
-          title="入院患者数と残り病床数"
-          :title-id="'patients-and-sickbeds'"
-          :chart-data="sickbedsGraph"
-          :date="sickbedsSummary.last_update"
-          :unit="'床'"
-          :info="'総病床数'"
-          :url="'https://web.pref.hyogo.lg.jp/kk03/corona_hasseijyokyo.html'"
-        />
-      </v-col>-->
     <div class="Header mb-3">
       <page-header :icon="headerItem.icon">
         {{ headerItem.title }}
       </page-header>
       <div class="UpdatedAt">
         <span>{{ $t('最終更新') }} </span>
-        <time :datetime="updatedAt">{{ lastUpdate.last_update }}</time>
+        <time :datetime="updatedAt">{{ updatedTimeStr }}</time>
       </div>
       <div
         v-show="!['ja', 'ja-basic'].includes($i18n.locale)"
@@ -175,7 +68,7 @@ import PatientsByClusters from '@/components/cards/PatientsByClusters.vue'
 import PatientsAndSickbeds from '@/components/cards/PatientsAndSickbeds.vue'
 // import MetroCard from '@/components/cards/MetroCard.vue'
 // import AgencyCard from '@/components/cards/AgencyCard.vue'
-import { convertDatetimeToISO8601Format } from '@/utils/formatDate'
+import { convertISO8601FormatToDatetime } from '@/utils/formatDate'
 /* import ShinjukuVisitorsCard from '@/components/cards/ShinjukuVisitorsCard.vue'
 import ChiyodaVisitorsCard from '@/components/cards/ChiyodaVisitorsCard.vue'
 import ShinjukuStMapCard from '@/components/cards/ShinjukuStMapCard.vue'
@@ -205,8 +98,11 @@ export default Vue.extend({
     PatientsAndSickbeds
   },
   data() {
+    const updatedTimeStr = convertISO8601FormatToDatetime(
+      lastUpdate.last_update
+    )
     const data = {
-      lastUpdate,
+      updatedTimeStr,
       headerItem: {
         icon: 'mdi-chart-timeline-variant',
         title: this.$t('兵庫県内の最新感染動向')
@@ -217,7 +113,7 @@ export default Vue.extend({
   },
   computed: {
     updatedAt() {
-      return convertDatetimeToISO8601Format(this.$data.lastUpdate.last_update)
+      return convertISO8601FormatToDatetime(lastUpdate.last_update)
     }
   },
   head(): MetaInfo {

diff --git a/utils/formatDate.ts b/utils/formatDate.ts
@@ -9,6 +9,15 @@ export const convertDatetimeToISO8601Format = (dateString: string): string => {
   return dayjs(dateString).format('YYYY-MM-DDTHH:mm:ss')
 }
 
+/**
+ * Get datetime string formatted Datetime(YYYY/MM/DD HH:mm)
+ *
+ * @param dateString - Parsable string by dayjs
+ */
+export const convertISO8601FormatToDatetime = (dateString: string): string => {
+  return dayjs(dateString).format('YYYY/MM/DD HH:mm')
+}
+
 /**
  * Get date string formatted ISO8601(YYYY-MM-DD)
  *