ocbo-esign/src/pages/IndexPage/Index.tsx

128 lines
4.4 KiB
TypeScript

import './Index.sass'
import { Button, Page, Padding, Display, Row, Logo, Footer, Copyright, Column, Image } from '../../components'
import { onMount } from 'solid-js'
import { ofetch } from 'ofetch'
import ocboAvif from '../../assets/images/optimized/ocbologo.avif'
import ocboWebp from '../../assets/images/optimized/ocbologo.webp'
import patAvif from '../../assets/images/optimized/pat-alcala.avif'
import patWebp from '../../assets/images/optimized/pat-alcala.webp'
import pageLogoAvif from '../../assets/images/optimized/esign.avif'
import pageLogoWebp from '../../assets/images/optimized/esign.webp'
const API = import.meta.env.VITE_BACKEND
let assessorsNameList: string[]
let registeredNameList: string[]
export default () => {
const getAssessors = async () => {
try {
const assessors = await ofetch(API + 'get-list-assessors', { parseResponse: JSON.parse })
assessorsNameList = [...assessors.result]
} catch (error) {
console.error(error)
}
sessionStorage.setItem('assessors', JSON.stringify([...assessorsNameList]))
}
const getRegistered = async () => {
let nameList: string[] = []
try {
const registered = await ofetch(API + 'get-list-registered', { parseResponse: JSON.parse })
for (let i = 0; i < registered.result.length; i++) {
const name = await ofetch(API + 'get-employeename/' + registered.result[i], { parseResponse: JSON.parse })
nameList.push(name.result)
}
registeredNameList = [...nameList]
} catch (error) {
console.error(error)
}
sessionStorage.setItem('registered', JSON.stringify([...registeredNameList]))
}
onMount(async () => {
await getAssessors()
await getRegistered()
})
return (
<>
<Page>
<Display desktop tablet>
<Padding left={4.75} right={4.75} top={0} bottom={0}>
<Row content="split">
<Row content="left" gap={2}>
<Logo size={200} />
<h1>OCBO e-Sign</h1>
</Row>
<Row content="left" gap={1}>
<Button label="Login" edges="curved" design="bo-link" to="/login" />
<Button label="Register" edges="curved" design="bo-primary" to="/register" />
</Row>
</Row>
<Row content="split">
<section class="title">
<h1 class="title__main">Secure e-Signature</h1>
<span class="title__sub">for Office of the City Building Official</span>
<p class="title__paragraph">A paperless and effortless solution on signing permits</p>
</section>
<Display desktop>
<Column padding="3rem 0 0 0">
<Image avif={pageLogoAvif} webp={pageLogoWebp} size={450}></Image>
</Column>
</Display>
</Row>
</Padding>
<Footer>
<Row content="split">
<Row gap={0.5}>
<Image avif={ocboAvif} webp={ocboWebp} size={30}></Image>
<Row gap={0.25}>
<Copyright year="2025" name="Office of the City Building Official" />
<span>Davao City, Philippines</span>
</Row>
</Row>
<Row gap={0.25}>
<span>Developed by:</span>
<Image avif={patAvif} webp={patWebp} size={90}></Image>
<span>Pat Alcala</span>
</Row>
</Row>
</Footer>
</Display>
<Display mobile>
<Column>
<Logo size={200} />
<h1>OCBO e-Sign</h1>
<Image avif={pageLogoAvif} webp={pageLogoWebp} size={200}></Image>
<section class="mobile-buttons">
<Button wide label="Login" edges="curved" design="bo-primary" to="/login" />
<Button wide label="Register" edges="curved" design="bo-primary" to="/register" />
</section>
</Column>
<Footer>
<Column gap={0.25} width="100%">
<Copyright year="2025" name="Office of the City Building Official" />
<span>Davao City, Philippines</span>
<Row gap={0.25}>
<span>Developed by:</span> <Image avif={patAvif} webp={patWebp} size={60}></Image>
<span>Pat Alcala</span>
</Row>
</Column>
</Footer>
</Display>
</Page>
</>
)
}