shihaam/roadworthiness-sticker-generator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

new card for roadworthiness, link to sims portal, bettwe error handling
Some checks failed
Deploy static content to Pages / deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Shihaam Abdul Rahman
2026-03-22 01:56:55 +05:00
parent 167fe10bb2
commit 9e4014f295
3 changed files with 75 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app.js
View File

@@ -309,8 +309,14 @@ async function setupPdfImport() {
try {
const text = await extractTextFromPdf(file);
const data = parseRegistrationData(text);
fillFormWithData(data);
showSnackbar('Data imported successfully!', 'success');
// Check if any data was extracted
if (Object.keys(data).length === 0) {
showSnackbar('Failed to import data. Make sure PDF was exported from SIMS portal.', 'error');
} else {
fillFormWithData(data);
showSnackbar('Data imported successfully!', 'success');
}
} catch (error) {
console.error('PDF import failed:', error);
showSnackbar('Failed to import PDF', 'error');

69
index.html
View File

@@ -42,7 +42,42 @@
</header>
<!-- Main Content -->
<main class="main-content">
<main class="main-content three-column">
<!-- Roadworthiness Details Card -->
<div class="card form-card">
<div class="card-header">
<span class="material-icons">fact_check</span>
<h2>Roadworthiness Details</h2>
</div>
<div class="card-body">
<!-- Garage Selection -->
<div class="form-group">
<label class="form-label" for="garage">Select Garage</label>
<div class="select-wrapper">
<select id="garage" class="form-select" required form="stickerForm">
<!-- Populated dynamically from templates/index.json -->
</select>
<span class="material-icons select-icon">expand_more</span>
</div>
</div>
<!-- From Date -->
<div class="form-group">
<label class="form-label" for="fromDate">From Date</label>
<input type="date" id="fromDate" class="form-input" required form="stickerForm">
</div>
<!-- To Date -->
<div class="form-group">
<label class="form-label" for="toDate">To Date</label>
<input type="date" id="toDate" class="form-input" readonly form="stickerForm">
<span class="form-hint">Auto-calculated</span>
</div>
</div>
</div>
<!-- Vehicle Information Card -->
<div class="card form-card">
<div class="card-header">
<span class="material-icons">edit_document</span>
@@ -50,35 +85,6 @@
</div>
<form id="stickerForm">
<!-- Garage Selection -->
<div class="form-group">
<label class="form-label" for="garage">Select Garage</label>
<div class="select-wrapper">
<select id="garage" class="form-select" required>
<!-- Populated dynamically from templates/index.json -->
</select>
<span class="material-icons select-icon">expand_more</span>
</div>
</div>
<!-- Date Range -->
<div class="form-row">
<div class="form-group">
<label class="form-label" for="fromDate">From Date</label>
<input type="date" id="fromDate" class="form-input" required>
</div>
<div class="form-group">
<label class="form-label" for="toDate">To Date</label>
<input type="date" id="toDate" class="form-input" readonly>
<span class="form-hint">Auto-calculated</span>
</div>
</div>
<!-- Divider -->
<div class="form-divider">
<span>Vehicle Details</span>
</div>
<!-- Import from PDF -->
<div class="form-group">
<label class="form-label">Import from Registration PDF</label>
@@ -87,7 +93,7 @@
Import PDF
<input type="file" id="pdfInput" accept=".pdf" hidden>
</label>
<span class="form-hint">Upload vehicle registration PDF to auto-fill</span>
<span class="form-hint">Get your PDF from <a href="https://sims.transport.gov.mv/" target="_blank" rel="noopener">SIMS portal</a></span>
</div>
<!-- Divider -->
@@ -101,7 +107,6 @@
<input type="text" id="regNumber" class="form-input"
placeholder="X0X0000" required
pattern="[A-Za-z0-9]+" maxlength="10">
<span class="form-hint">Letters and numbers only</span>
</div>
<!-- Model Number -->

31
styles.css
View File

@@ -234,6 +234,19 @@ body {
align-items: start;
}
.main-content.three-column {
max-width: 1400px;
grid-template-columns: 1fr 1fr 1fr;
}
/* Card Body */
.card-body {
padding: 24px;
display: flex;
flex-direction: column;
gap: 20px;
}
/* Cards */
.card {
background-color: var(--md-sys-color-surface);
@@ -493,11 +506,27 @@ body {
}
/* Responsive Styles */
@media (max-width: 1200px) {
.main-content.three-column {
grid-template-columns: 1fr 1fr;
}
.main-content.three-column .preview-card {
grid-column: span 2;
}
}
@media (max-width: 900px) {
.main-content {
.main-content,
.main-content.three-column {
grid-template-columns: 1fr;
}
.main-content.three-column .preview-card {
grid-column: span 1;
order: -1;
}
.preview-card {
position: static;
order: -1;