feat: add start date in data period remark

wevisdemo · May 30, 2024 · a1de128 · a1de128
1 parent ba67403
commit a1de128
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 62 deletions.
diff --git a/src/components/Assemblies/Header.svelte b/src/components/Assemblies/Header.svelte
@@ -3,6 +3,7 @@
 	import { Download, TableSplit } from 'carbon-icons-svelte';
 	import Share from '$components/Share/Share.svelte';
 	import AssemblyIdRunner, { type AvailableAssembly } from './AssemblyIdRunner.svelte';
+	import DataPeriodRemark from '$components/DataPeriodRemark.svelte';
 
 	export let availableAssemblies: AvailableAssembly[] = [];
 
@@ -76,14 +77,7 @@
 				<span class="helper-text-01 ml-[4px]">ประวัติการลงมติ</span>
 			</a> -->
 		</div>
-		<p class="label-01 text-gray-60">
-			อัพเดตข้อมูล : {new Date().toLocaleDateString('th-TH', {
-				year: 'numeric',
-				month: 'short',
-				day: 'numeric'
-			})}
-		</p>
-		<!-- <a href="/" class="helper-text-01">ที่มาและข้อจำกัดข้อมูล</a> -->
+		<DataPeriodRemark />
 		<Share label="แชร์" />
 	</div>
 </div>
diff --git a/src/components/DataPeriodRemark.svelte b/src/components/DataPeriodRemark.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	export let withStartDate = false;
+
+	const formatDate = (date: Date) =>
+		date.toLocaleDateString('th-TH', {
+			year: 'numeric',
+			month: 'short',
+			day: 'numeric'
+		});
+</script>
+
+<p class="helper-text-01 text-gray-60">
+	{#if withStartDate}
+		ระยะเวลาในการเก็บข้อมูล: <span class="text-nowrap"
+			>{formatDate(new Date('2019-03-24'))} - {formatDate(new Date())}</span
+		>
+	{:else}
+		อัพเดตข้อมูล: {formatDate(new Date())}
+	{/if}
+</p>
diff --git a/src/components/Index/BillContent.svelte b/src/components/Index/BillContent.svelte
@@ -54,7 +54,7 @@
 			?.samples.sort((a, z) => z.proposedOn.getTime() - a.proposedOn.getTime()) || []}
 
 	<div class="flex flex-col gap-2 md:flex-row">
-		<h3 class="fluid-heading-04">เลือกดู</h3>
+		<h3 class="fluid-heading-04 text-nowrap">เลือกดู</h3>
 		<div class="flex flex-row flex-wrap items-center gap-1">
 			{#each categories as category}
 				<button

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -10,6 +10,7 @@
 	import ContentSection from '$components/Index/ContentSection.svelte';
 	import { SearchIndexCategory } from '$models/search.js';
 	import { ArrowRight } from 'carbon-icons-svelte';
+	import DataPeriodRemark from '$components/DataPeriodRemark.svelte';
 
 	export let data;
 
@@ -23,7 +24,7 @@
 
 <div class="flex flex-col md:h-[calc(100lvh-48px)]">
 	<header
-		class="relative flex h-[400px] flex-col items-center justify-center gap-[10px] overflow-hidden bg-gradient-to-t from-[#CCEEFF] to-[#FDFEFF] px-4 md:h-auto md:flex-1"
+		class="relative h-[400px] overflow-hidden bg-gradient-to-t from-[#CCEEFF] to-[#FDFEFF] md:h-auto md:flex-1"
 	>
 		<img
 			class="absolute bottom-0 left-1/2 h-auto w-full max-w-[1280px] -translate-x-1/2"
@@ -34,24 +35,16 @@
 			loading="eager"
 			decoding="async"
 		/>
-		<h1 class="fluid-display-01 relative max-w-[1280px] text-center" style="text-wrap:balance">
-			<span class="whitespace-nowrap">ขับเคลื่อน</span><span class="whitespace-nowrap"
-				>ประชาธิปไตย</span
-			> <br class="hidden md:block" /><span class="whitespace-nowrap">ร่วมเฝ้าดู</span><span
-				class="whitespace-nowrap">ความเคลื่อนไหว</span
-			><span class="whitespace-nowrap">รัฐสภา</span>
-		</h1>
-		<p class="helper-text-01 relative flex gap-[10px] text-gray-60">
-			<span
-				>อัพเดตข้อมูล : {new Date().toLocaleDateString('th-TH', {
-					year: 'numeric',
-					month: 'short',
-					day: 'numeric'
-				})}</span
-			>
-			<!-- TODO: Add link -->
-			<!-- <a href="/" class="underline text-[color:inherit]">ที่มาและข้อจำกัดข้อมูล</a> -->
-		</p>
+		<div class="absolute inset-0 flex flex-col items-center justify-center gap-[10px] px-4">
+			<h1 class="fluid-display-01 relative max-w-[1280px] text-center" style="text-wrap:balance">
+				<span class="whitespace-nowrap">ขับเคลื่อน</span><span class="whitespace-nowrap"
+					>ประชาธิปไตย</span
+				> <br class="hidden md:block" /><span class="whitespace-nowrap">ร่วมเฝ้าดู</span><span
+					class="whitespace-nowrap">ความเคลื่อนไหว</span
+				><span class="whitespace-nowrap">รัฐสภา</span>
+			</h1>
+			<DataPeriodRemark withStartDate />
+		</div>
 	</header>
 	<nav>
 		<menu class="mx-auto flex max-w-[1280px] flex-col md:flex-row">

diff --git a/src/routes/bills/+page.svelte b/src/routes/bills/+page.svelte
@@ -9,6 +9,7 @@
 	import { Breadcrumb, BreadcrumbItem, Search } from 'carbon-components-svelte';
 	import ArrowRight from 'carbon-icons-svelte/lib/ArrowRight.svelte';
 	import LawIcom from '../../components/icons/LawIcon.svelte';
+	import DataPeriodRemark from '$components/DataPeriodRemark.svelte';
 
 	export let data;
 
@@ -25,13 +26,7 @@
 <header class="flex flex-col items-center gap-2 px-4 py-10 text-center">
 	<LawIcom width="36" height="36" />
 	<h1 class="fluid-heading-05 text-balance">สำรวจร่างกฎหมายในสภา</h1>
-	<div class="label-01 flex flex-wrap items-baseline justify-center gap-2">
-		<span class="text-text-02"
-			>อัพเดตข้อมูล : {new Date().toLocaleDateString('th-TH', { dateStyle: 'medium' })}</span
-		>
-		<!-- TODO: Add link -->
-		<!-- <a href="/" class="underline">ที่มาและข้อจำกัดข้อมูล</a> -->
-	</div>
+	<DataPeriodRemark withStartDate />
 </header>
 <section class="mx-auto flex max-w-[1280px] flex-col gap-2 px-4 py-6">
 	<h2 class="fluid-heading-03">ค้นด้วยชื่อ</h2>

diff --git a/src/routes/bills/[id]/+page.svelte b/src/routes/bills/[id]/+page.svelte
@@ -18,6 +18,7 @@
 	import CoPartyProposer from '$components/bills/CoPartyProposer.svelte';
 	import Progress from '$components/bills/Progress.svelte';
 	import type { Party } from '$models/party.js';
+	import DataPeriodRemark from '$components/DataPeriodRemark.svelte';
 
 	const NO_PARTY_FOUND_LABEL = 'ไม่พบข้อมูลพรรค';
 
@@ -210,15 +211,7 @@
 						]}
 					/>
 				{/if}
-				<p class="label-01 text-text-02">
-					อัพเดตข้อมูล : {new Date().toLocaleDateString('th-TH', {
-						year: 'numeric',
-						month: 'short',
-						day: 'numeric'
-					})}
-				</p>
-				<!-- TODO: add link -->
-				<!-- <a href="/" class="mr-auto helper-text-01 underline"> ที่มาและข้อจำกัดข้อมูล </a> -->
+				<DataPeriodRemark />
 				<Share label="แชร์มติ" />
 			</div>
 		</div>

diff --git a/src/routes/politicians/[id]/+page.svelte b/src/routes/politicians/[id]/+page.svelte
@@ -14,6 +14,7 @@
 	import scrollama from 'scrollama';
 	import { onMount } from 'svelte';
 	import PoliticianVoteSummary from '$components/politicians/PoliticianVoteSummary.svelte';
+	import DataPeriodRemark from '$components/DataPeriodRemark.svelte';
 
 	export let data;
 
@@ -94,15 +95,7 @@
 			</div>
 			<div class="flex flex-col gap-2">
 				<LinkTable links={[{ label: 'ผลการลงมติรายคน', url: '/' }]} />
-				<p class="label-01 text-gray-60">
-					อัพเดตข้อมูล : {new Date().toLocaleDateString('th-TH', {
-						year: 'numeric',
-						month: 'short',
-						day: 'numeric'
-					})}
-				</p>
-				<!-- TODO: add link -->
-				<!-- <a href="/" class="mr-auto helper-text-01"> ที่มาและข้อจำกัดข้อมูล </a> -->
+				<DataPeriodRemark />
 				<Share label="แชร์ประวัติ" />
 			</div>
 		</div>

diff --git a/src/routes/votings/[id]/+page.svelte b/src/routes/votings/[id]/+page.svelte
@@ -4,6 +4,7 @@
 	import AffiliationsResult from '$components/AffiliationResult/AffiliationsResult.svelte';
 	import LinkTable from '$components/LinkTable/LinkTable.svelte';
 	import Share from '$components/Share/Share.svelte';
+	import DataPeriodRemark from '$components/DataPeriodRemark.svelte';
 	import VoteChartTooltip from '$components/VoteChartTooltip/VoteChartTooltip.svelte';
 	import VotingResultTag from '$components/VotingResultTag/VotingResultTag.svelte';
 	import {
@@ -195,15 +196,7 @@
 			</div>
 			<div class="flex flex-col gap-2">
 				<LinkTable links={voting.files} />
-				<p class="label-01 text-gray-60">
-					อัพเดตข้อมูล : {new Date().toLocaleDateString('th-TH', {
-						year: 'numeric',
-						month: 'short',
-						day: 'numeric'
-					})}
-				</p>
-				<!-- TODO: add link -->
-				<!-- <a href="/" class="mr-auto helper-text-01"> ที่มาและข้อจำกัดข้อมูล </a> -->
+				<DataPeriodRemark />
 				<Share label="แชร์มติ" />
 			</div>
 		</div>