Compare commits
20
Commits
ff0cea7f48
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
 shihaam
|
8fbf22a29b
|
||
|
shihaam
|
004130d2a6
|
||
|
shihaam
|
7af571e55a
|
||
|
shihaam
|
cda6557e42
|
||
|
shihaam
|
f0b60717a0
|
||
|
shihaam
|
d2318df5bf
|
||
|
shihaam
|
ad4371860c
|
||
|
shihaam
|
3cb987f193
|
||
|
shihaam
|
a5a47eda75
|
||
|
shihaam
|
20bd60cd15
|
||
|
shihaam
|
9a9f511f76
|
||
|
shihaam
|
c152989b45
|
||
|
shihaam
|
0fae62068b
|
||
|
shihaam
|
7b606ffc13
|
||
|
shihaam
|
627cff5cc2
|
||
|
shihaam
|
6232625f81
|
||
|
shihaam
|
4283926ae3
|
||
|
shihaam
|
39ed9349d8
|
||
|
shihaam
|
fb02f35f26 | ||
 athphane
|
07a9c9d343 |
@@ -1,12 +1,16 @@
|
|||||||
# E-Dir
|
# E-Dir
|
||||||
|
|
||||||
A simple web frontend for Dhiraagu directory lookup.
|
A better web frontend for [Dhiraagu E-Directory](https://www.dhiraagu.com.mv/e-directory).
|
||||||
|
|
||||||
## Features
|
## Features
|
||||||
|
|
||||||
- Phone number lookup via Dhiraagu E-Dir API
|
- Phone number lookup via Dhiraagu E-Dir API
|
||||||
- Material Design UI
|
- Tap-to-call with `tel:` links
|
||||||
|
- Search history stored in LocalStorage
|
||||||
|
- Accepts country code prefix (+960)
|
||||||
|
- QR code generation to share contact numbers
|
||||||
- Automatic dark/light theme (follows system preference)
|
- Automatic dark/light theme (follows system preference)
|
||||||
|
- No Recaptcha required
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,40 @@
|
|||||||
|
#!/usr/bin/env python3
|
||||||
|
from flask import Flask, request, Response
|
||||||
|
from curl_cffi import requests as curl_requests
|
||||||
|
|
||||||
|
app = Flask(__name__)
|
||||||
|
BASE_URL = "https://app-production.dhiraagu.com.mv"
|
||||||
|
|
||||||
|
|
||||||
|
def proxy_request(target_url: str) -> Response:
|
||||||
|
headers = {"Host": "app-production.dhiraagu.com.mv"}
|
||||||
|
|
||||||
|
for h in ["Authorization", "Content-Type", "Accept"]:
|
||||||
|
if h in request.headers:
|
||||||
|
headers[h] = request.headers[h]
|
||||||
|
|
||||||
|
resp = curl_requests.request(
|
||||||
|
method=request.method,
|
||||||
|
url=target_url,
|
||||||
|
headers=headers,
|
||||||
|
data=request.get_data() or None,
|
||||||
|
impersonate="chrome",
|
||||||
|
timeout=30,
|
||||||
|
)
|
||||||
|
|
||||||
|
return Response(resp.content, resp.status_code, {"Content-Type": resp.headers.get("content-type", "application/json")})
|
||||||
|
|
||||||
|
|
||||||
|
@app.route("/<int:subscriber_id>")
|
||||||
|
def subscriber_lookup(subscriber_id: int):
|
||||||
|
return proxy_request(f"{BASE_URL}/io/v1/info/subscribers/{subscriber_id}/dir")
|
||||||
|
|
||||||
|
|
||||||
|
@app.route("/", defaults={"path": ""})
|
||||||
|
@app.route("/<path:path>")
|
||||||
|
def catch_all(path: str):
|
||||||
|
return proxy_request(f"{BASE_URL}/{path}")
|
||||||
|
|
||||||
|
|
||||||
|
if __name__ == "__main__":
|
||||||
|
app.run(host="0.0.0.0", port=8080)
|
||||||
@@ -0,0 +1,2 @@
|
|||||||
|
flask>=3.0.0
|
||||||
|
curl_cffi>=0.6.0
|
||||||
+340
-404
@@ -3,429 +3,365 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>E-Dir</title>
|
<meta name="darkreader-lock">
|
||||||
|
|
||||||
|
<!-- Primary Meta Tags -->
|
||||||
|
<title>E-Dir - Dhiraagu Phone Directory Lookup | Find Maldives Phone Numbers</title>
|
||||||
|
<meta name="title" content="E-Dir - Dhiraagu Phone Directory Lookup | Find Maldives Phone Numbers">
|
||||||
|
<meta name="description" content="Search Dhiraagu phone directory instantly. Find Maldives phone numbers, addresses, and contact details. Fast, free, no captcha. Alternative to official Dhiraagu E-Directory.">
|
||||||
|
<meta name="keywords" content="dhiraagu, e-directory, edir, e-dir, phone directory, maldives phone numbers, dhiraagu directory, phone lookup, maldives directory, dhiraagu phone search, find phone number maldives, dhiraagu number search, maldives telephone directory">
|
||||||
|
<meta name="author" content="E-Dir">
|
||||||
|
<meta name="robots" content="index, follow">
|
||||||
|
<meta name="language" content="English">
|
||||||
|
<meta name="revisit-after" content="7 days">
|
||||||
|
|
||||||
|
<!-- Canonical URL -->
|
||||||
|
<link rel="canonical" href="https://dhiraagu-edir.shihaam.me/">
|
||||||
|
|
||||||
|
<!-- Favicon -->
|
||||||
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
||||||
<link rel="icon" type="image/png" href="favicon.png">
|
<link rel="icon" type="image/png" href="favicon.png">
|
||||||
<link rel="apple-touch-icon" href="apple-touch-icon.png">
|
<link rel="apple-touch-icon" href="apple-touch-icon.png">
|
||||||
<meta name="description" content="Dhiraagu Directory Lookup - Search without Recaptcha annoyance">
|
|
||||||
<meta property="og:title" content="E-Dir">
|
<!-- Open Graph / Facebook -->
|
||||||
<meta property="og:description" content="Dhiraagu Directory Lookup - Search without Recaptcha annoyance">
|
|
||||||
<meta property="og:image" content="og-image.png">
|
|
||||||
<meta property="og:type" content="website">
|
<meta property="og:type" content="website">
|
||||||
|
<meta property="og:url" content="https://dhiraagu-edir.shihaam.me/">
|
||||||
|
<meta property="og:title" content="E-Dir - Dhiraagu Phone Directory Lookup | Find Maldives Phone Numbers">
|
||||||
|
<meta property="og:description" content="Search Dhiraagu phone directory instantly. Find Maldives phone numbers, addresses, and contact details. Fast, free, no captcha required.">
|
||||||
|
<meta property="og:image" content="https://dhiraagu-edir.shihaam.me/og-image.png">
|
||||||
|
<meta property="og:site_name" content="E-Dir">
|
||||||
|
<meta property="og:locale" content="en_US">
|
||||||
|
|
||||||
|
<!-- Twitter -->
|
||||||
<meta name="twitter:card" content="summary_large_image">
|
<meta name="twitter:card" content="summary_large_image">
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
|
<meta name="twitter:url" content="https://dhiraagu-edir.shihaam.me/">
|
||||||
|
<meta name="twitter:title" content="E-Dir - Dhiraagu Phone Directory Lookup">
|
||||||
|
<meta name="twitter:description" content="Search Dhiraagu phone directory instantly. Find Maldives phone numbers fast, free, no captcha.">
|
||||||
|
<meta name="twitter:image" content="https://dhiraagu-edir.shihaam.me/og-image.png">
|
||||||
|
|
||||||
|
<!-- Additional SEO -->
|
||||||
|
<meta name="application-name" content="E-Dir">
|
||||||
|
<meta name="theme-color" content="#0a0a0a" media="(prefers-color-scheme: dark)">
|
||||||
|
<meta name="theme-color" content="#f5f5f5" media="(prefers-color-scheme: light)">
|
||||||
|
<meta name="mobile-web-app-capable" content="yes">
|
||||||
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||||
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||||
|
<meta name="apple-mobile-web-app-title" content="E-Dir">
|
||||||
|
|
||||||
|
<!-- Structured Data -->
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@type": "WebApplication",
|
||||||
|
"name": "E-Dir",
|
||||||
|
"alternateName": "Dhiraagu E-Directory Alternative",
|
||||||
|
"description": "Search Dhiraagu phone directory instantly. Find Maldives phone numbers, addresses, and contact details without captcha.",
|
||||||
|
"url": "https://dhiraagu-edir.shihaam.me/",
|
||||||
|
"applicationCategory": "UtilitiesApplication",
|
||||||
|
"operatingSystem": "Any",
|
||||||
|
"offers": {
|
||||||
|
"@type": "Offer",
|
||||||
|
"price": "0",
|
||||||
|
"priceCurrency": "USD"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- External Resources -->
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||||
<style>
|
<link rel="stylesheet" href="styles.css">
|
||||||
:root {
|
|
||||||
--orange: #ffa31a;
|
|
||||||
--orange-hover: #ffb84d;
|
|
||||||
--gray: #808080;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Light theme (default) */
|
|
||||||
:root {
|
|
||||||
--bg-primary: #ffffff;
|
|
||||||
--bg-secondary: #f5f5f5;
|
|
||||||
--bg-card: #ffffff;
|
|
||||||
--text-primary: #1b1b1b;
|
|
||||||
--text-secondary: #808080;
|
|
||||||
--shadow: rgba(0, 0, 0, 0.1);
|
|
||||||
--shadow-elevated: rgba(0, 0, 0, 0.15);
|
|
||||||
--border: #e0e0e0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Dark theme */
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
:root {
|
|
||||||
--bg-primary: #1b1b1b;
|
|
||||||
--bg-secondary: #292929;
|
|
||||||
--bg-card: #292929;
|
|
||||||
--text-primary: #ffffff;
|
|
||||||
--text-secondary: #808080;
|
|
||||||
--shadow: rgba(0, 0, 0, 0.3);
|
|
||||||
--shadow-elevated: rgba(0, 0, 0, 0.5);
|
|
||||||
--border: #3a3a3a;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
font-family: 'Roboto', sans-serif;
|
|
||||||
background-color: var(--bg-primary);
|
|
||||||
color: var(--text-primary);
|
|
||||||
min-height: 100vh;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 20px;
|
|
||||||
transition: background-color 0.3s ease, color 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 400px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
background-color: var(--bg-card);
|
|
||||||
border-radius: 16px;
|
|
||||||
padding: 32px;
|
|
||||||
box-shadow: 0 4px 20px var(--shadow);
|
|
||||||
transition: background-color 0.3s ease, box-shadow 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header {
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 12px;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo-icon {
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
background: linear-gradient(135deg, var(--orange), #ff8c00);
|
|
||||||
border-radius: 12px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo-icon .material-icons {
|
|
||||||
font-size: 28px;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 32px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: var(--text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtitle {
|
|
||||||
color: var(--text-secondary);
|
|
||||||
font-size: 14px;
|
|
||||||
margin-top: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-group {
|
|
||||||
position: relative;
|
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-group .material-icons {
|
|
||||||
position: absolute;
|
|
||||||
left: 16px;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
color: var(--text-secondary);
|
|
||||||
transition: color 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-group input {
|
|
||||||
width: 100%;
|
|
||||||
padding: 16px 16px 16px 52px;
|
|
||||||
font-size: 16px;
|
|
||||||
font-family: 'Roboto', sans-serif;
|
|
||||||
border: 2px solid var(--border);
|
|
||||||
border-radius: 12px;
|
|
||||||
background-color: var(--bg-secondary);
|
|
||||||
color: var(--text-primary);
|
|
||||||
outline: none;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-group input::placeholder {
|
|
||||||
color: var(--text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-group input:focus {
|
|
||||||
border-color: var(--orange);
|
|
||||||
background-color: var(--bg-card);
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-group input:focus + .material-icons,
|
|
||||||
.input-group:focus-within .material-icons {
|
|
||||||
color: var(--orange);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
width: 100%;
|
|
||||||
padding: 16px 24px;
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 500;
|
|
||||||
font-family: 'Roboto', sans-serif;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
border: none;
|
|
||||||
border-radius: 12px;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 8px;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary {
|
|
||||||
background: linear-gradient(135deg, var(--orange), #ff8c00);
|
|
||||||
color: white;
|
|
||||||
box-shadow: 0 4px 15px rgba(255, 163, 26, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 6px 20px rgba(255, 163, 26, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary:active {
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary:disabled {
|
|
||||||
opacity: 0.6;
|
|
||||||
cursor: not-allowed;
|
|
||||||
transform: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.spinner {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
|
||||||
border-top-color: white;
|
|
||||||
border-radius: 50%;
|
|
||||||
animation: spin 0.8s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes spin {
|
|
||||||
to { transform: rotate(360deg); }
|
|
||||||
}
|
|
||||||
|
|
||||||
.results {
|
|
||||||
margin-top: 24px;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.results.show {
|
|
||||||
display: block;
|
|
||||||
animation: fadeIn 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fadeIn {
|
|
||||||
from { opacity: 0; transform: translateY(10px); }
|
|
||||||
to { opacity: 1; transform: translateY(0); }
|
|
||||||
}
|
|
||||||
|
|
||||||
.result-card {
|
|
||||||
background-color: var(--bg-secondary);
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 20px;
|
|
||||||
border-left: 4px solid var(--orange);
|
|
||||||
}
|
|
||||||
|
|
||||||
.result-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 12px;
|
|
||||||
padding: 12px 0;
|
|
||||||
border-bottom: 1px solid var(--border);
|
|
||||||
}
|
|
||||||
|
|
||||||
.result-item:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
padding-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.result-item:first-child {
|
|
||||||
padding-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.result-item .material-icons {
|
|
||||||
color: var(--orange);
|
|
||||||
font-size: 20px;
|
|
||||||
margin-top: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.result-label {
|
|
||||||
font-size: 12px;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.5px;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.result-value {
|
|
||||||
font-size: 16px;
|
|
||||||
color: var(--text-primary);
|
|
||||||
word-break: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
.error-message {
|
|
||||||
background-color: rgba(244, 67, 54, 0.1);
|
|
||||||
border: 1px solid rgba(244, 67, 54, 0.3);
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 16px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
color: #f44336;
|
|
||||||
}
|
|
||||||
|
|
||||||
.error-message .material-icons {
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.searched-number {
|
|
||||||
font-size: 14px;
|
|
||||||
color: var(--orange);
|
|
||||||
font-weight: 500;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.searched-number .material-icons {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.result-card + .result-card,
|
|
||||||
.result-card + .error-message,
|
|
||||||
.error-message + .result-card,
|
|
||||||
.error-message + .error-message {
|
|
||||||
margin-top: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="card">
|
<div class="main-layout">
|
||||||
<div class="header">
|
<div class="left-column">
|
||||||
<div class="logo">
|
<div class="card">
|
||||||
<div class="logo-icon">
|
<div class="header">
|
||||||
<span class="material-icons">contacts</span>
|
<div class="logo">
|
||||||
|
<div class="logo-icon">
|
||||||
|
<span class="material-icons">contacts</span>
|
||||||
|
</div>
|
||||||
|
<h1>E-Dir</h1>
|
||||||
|
</div>
|
||||||
|
<p class="subtitle">Dhiraagu Directory Lookup</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form id="searchForm" class="search-form-row">
|
||||||
|
<div class="input-group">
|
||||||
|
<input
|
||||||
|
type="tel"
|
||||||
|
id="phoneNumber"
|
||||||
|
placeholder="Enter phone number"
|
||||||
|
autocomplete="tel"
|
||||||
|
required
|
||||||
|
>
|
||||||
|
<span class="material-icons">phone</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit" class="btn btn-primary btn-icon" id="searchBtn" title="Search">
|
||||||
|
<span class="material-icons">search</span>
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2 class="section-title">Search History</h2>
|
||||||
|
<button class="btn btn-danger btn-icon" id="clearHistoryBtn" title="Clear History">
|
||||||
|
<span class="material-icons">delete</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="search-box">
|
||||||
|
<input type="text" id="tableSearch" placeholder="Search history...">
|
||||||
|
<span class="material-icons">filter_list</span>
|
||||||
|
<button class="clear-search" id="clearSearchBtn">
|
||||||
|
<span class="material-icons">close</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="results-count" id="resultsCount"></div>
|
||||||
|
|
||||||
|
<div class="table-container desktop-table">
|
||||||
|
<table id="historyTable">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th class="sortable" data-sort="phone">Phone</th>
|
||||||
|
<th class="sortable" data-sort="result">Result</th>
|
||||||
|
<th class="sortable" data-sort="timestamp">Date/Time</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody id="historyTableBody">
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<div id="emptyState" class="empty-state">
|
||||||
|
<span class="material-icons">history</span>
|
||||||
|
<h3>No search history yet</h3>
|
||||||
|
<p>Your searches will appear here</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mobile-table" id="mobileTableContainer">
|
||||||
|
<div class="table-container">
|
||||||
|
<table id="mobileHistoryTable">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th class="sortable" data-sort="phone">Phone</th>
|
||||||
|
<th class="sortable" data-sort="result">Result</th>
|
||||||
|
<th class="sortable" data-sort="timestamp">Date/Time</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody id="mobileTableBody">
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="emptyStateMobile" class="empty-state mobile-table">
|
||||||
|
<span class="material-icons">history</span>
|
||||||
|
<h3>No search history yet</h3>
|
||||||
|
<p>Your searches will appear here</p>
|
||||||
</div>
|
</div>
|
||||||
<h1>E-Dir</h1>
|
|
||||||
</div>
|
</div>
|
||||||
<p class="subtitle">Dhiraagu Directory Lookup</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<form id="searchForm">
|
<div class="right-column">
|
||||||
<div class="input-group">
|
<div class="card">
|
||||||
<input
|
<div class="section-header">
|
||||||
type="tel"
|
<h2 class="section-title">Emergency Numbers</h2>
|
||||||
id="phoneNumber"
|
</div>
|
||||||
placeholder="Enter phone number"
|
<div class="emergency-grid">
|
||||||
autocomplete="tel"
|
<a href="tel:119" class="emergency-card emergency-critical">
|
||||||
required
|
<span class="material-icons">local_police</span>
|
||||||
>
|
<div class="emergency-info">
|
||||||
<span class="material-icons">phone</span>
|
<span class="emergency-name">Police</span>
|
||||||
|
<span class="emergency-number">119</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="tel:118" class="emergency-card emergency-critical">
|
||||||
|
<span class="material-icons">local_fire_department</span>
|
||||||
|
<div class="emergency-info">
|
||||||
|
<span class="emergency-name">Fire</span>
|
||||||
|
<span class="emergency-number">118</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="tel:102" class="emergency-card emergency-critical">
|
||||||
|
<span class="material-icons">emergency</span>
|
||||||
|
<div class="emergency-info">
|
||||||
|
<span class="emergency-name">Ambulance</span>
|
||||||
|
<span class="emergency-number">102</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="tel:191" class="emergency-card emergency-critical">
|
||||||
|
<span class="material-icons">sailing</span>
|
||||||
|
<div class="emergency-info">
|
||||||
|
<span class="emergency-name">Coast Guard</span>
|
||||||
|
<span class="emergency-number">191</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="tel:1676" class="emergency-card">
|
||||||
|
<span class="material-icons">health_and_safety</span>
|
||||||
|
<div class="emergency-info">
|
||||||
|
<span class="emergency-name">HPA</span>
|
||||||
|
<span class="emergency-number">1676</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="tel:1412" class="emergency-card">
|
||||||
|
<span class="material-icons">child_care</span>
|
||||||
|
<div class="emergency-info">
|
||||||
|
<span class="emergency-name">Child Helpline</span>
|
||||||
|
<span class="emergency-number">1412</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<details class="emergency-section">
|
||||||
|
<summary>Public Services</summary>
|
||||||
|
<div class="emergency-grid">
|
||||||
|
<a href="tel:104" class="emergency-card">
|
||||||
|
<span class="material-icons">bolt</span>
|
||||||
|
<div class="emergency-info">
|
||||||
|
<span class="emergency-name">STELCO</span>
|
||||||
|
<span class="emergency-number">104</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="tel:105" class="emergency-card">
|
||||||
|
<span class="material-icons">water_drop</span>
|
||||||
|
<div class="emergency-info">
|
||||||
|
<span class="emergency-name">MWSC</span>
|
||||||
|
<span class="emergency-number">105</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="tel:1402" class="emergency-card">
|
||||||
|
<span class="material-icons">account_balance</span>
|
||||||
|
<div class="emergency-info">
|
||||||
|
<span class="emergency-name">NSPA</span>
|
||||||
|
<span class="emergency-number">1402</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="tel:1400" class="emergency-card">
|
||||||
|
<span class="material-icons">medical_services</span>
|
||||||
|
<div class="emergency-info">
|
||||||
|
<span class="emergency-name">Aasandha</span>
|
||||||
|
<span class="emergency-number">1400</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="tel:1415" class="emergency-card">
|
||||||
|
<span class="material-icons">receipt_long</span>
|
||||||
|
<div class="emergency-info">
|
||||||
|
<span class="emergency-name">MIRA</span>
|
||||||
|
<span class="emergency-number">1415</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="tel:1416" class="emergency-card">
|
||||||
|
<span class="material-icons">inventory</span>
|
||||||
|
<div class="emergency-info">
|
||||||
|
<span class="emergency-name">Customs</span>
|
||||||
|
<span class="emergency-number">1416</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="tel:1414" class="emergency-card">
|
||||||
|
<span class="material-icons">how_to_vote</span>
|
||||||
|
<div class="emergency-info">
|
||||||
|
<span class="emergency-name">Elections</span>
|
||||||
|
<span class="emergency-number">1414</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="tel:1410" class="emergency-card">
|
||||||
|
<span class="material-icons">psychology</span>
|
||||||
|
<div class="emergency-info">
|
||||||
|
<span class="emergency-name">Drug Rehab</span>
|
||||||
|
<span class="emergency-number">1410</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="tel:110" class="emergency-card">
|
||||||
|
<span class="material-icons">contact_phone</span>
|
||||||
|
<div class="emergency-info">
|
||||||
|
<span class="emergency-name">Directory Enquiries</span>
|
||||||
|
<span class="emergency-number">110</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details class="emergency-section">
|
||||||
|
<summary>Medical</summary>
|
||||||
|
<div class="emergency-grid">
|
||||||
|
<a href="tel:3335335" class="emergency-card">
|
||||||
|
<span class="material-icons">local_hospital</span>
|
||||||
|
<div class="emergency-info">
|
||||||
|
<span class="emergency-name">IGMH</span>
|
||||||
|
<span class="emergency-number">3335335</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="tel:3313553" class="emergency-card">
|
||||||
|
<span class="material-icons">local_hospital</span>
|
||||||
|
<div class="emergency-info">
|
||||||
|
<span class="emergency-name">ADK</span>
|
||||||
|
<span class="emergency-number">3313553</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="tel:3351610" class="emergency-card">
|
||||||
|
<span class="material-icons">local_hospital</span>
|
||||||
|
<div class="emergency-info">
|
||||||
|
<span class="emergency-name">Tree Top</span>
|
||||||
|
<span class="emergency-number">3351610</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details class="emergency-section">
|
||||||
|
<summary>Travel</summary>
|
||||||
|
<div class="emergency-grid">
|
||||||
|
<a href="tel:3322211" class="emergency-card">
|
||||||
|
<span class="material-icons">flight</span>
|
||||||
|
<div class="emergency-info">
|
||||||
|
<span class="emergency-name">Flight Info</span>
|
||||||
|
<span class="emergency-number">3322211</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
<a href="tel:3335544" class="emergency-card">
|
||||||
|
<span class="material-icons">flight_takeoff</span>
|
||||||
|
<div class="emergency-info">
|
||||||
|
<span class="emergency-name">Maldivian</span>
|
||||||
|
<span class="emergency-number">3335544</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<button type="submit" class="btn btn-primary" id="searchBtn">
|
|
||||||
<span class="material-icons">search</span>
|
|
||||||
<span>Search</span>
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<div class="results" id="results"></div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<div class="toast" id="toast">
|
||||||
const form = document.getElementById('searchForm');
|
<span class="material-icons" id="toastIcon"></span>
|
||||||
const phoneInput = document.getElementById('phoneNumber');
|
<span id="toastMessage"></span>
|
||||||
const searchBtn = document.getElementById('searchBtn');
|
</div>
|
||||||
const resultsDiv = document.getElementById('results');
|
|
||||||
|
|
||||||
form.addEventListener('submit', async (e) => {
|
<div class="confirm-modal" id="confirmModal">
|
||||||
e.preventDefault();
|
<div class="confirm-card">
|
||||||
|
<h3 class="confirm-title">Clear History?</h3>
|
||||||
|
<p class="confirm-message">Are you sure you want to clear all search history? This action cannot be undone.</p>
|
||||||
|
<div class="confirm-actions">
|
||||||
|
<button class="btn btn-outline" id="cancelClearBtn">Cancel</button>
|
||||||
|
<button class="btn btn-danger-filled" id="confirmClearBtn">Clear</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
const phoneNumber = phoneInput.value.trim();
|
<div class="confirm-modal" id="qrModal">
|
||||||
if (!phoneNumber) return;
|
<div class="confirm-card qr-card">
|
||||||
|
<h3 class="confirm-title" id="qrTitle">QR Code</h3>
|
||||||
|
<div class="qr-container" id="qrContainer"></div>
|
||||||
|
<div class="confirm-actions">
|
||||||
|
<button class="btn btn-outline" id="closeQrBtn">Close</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
// Show loading state
|
<script src="qrcode.js"></script>
|
||||||
searchBtn.disabled = true;
|
<script src="script.js"></script>
|
||||||
searchBtn.innerHTML = '<div class="spinner"></div><span>Searching...</span>';
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await fetch(`https://dhiraagu-edir-proxy.shihaam.me/${encodeURIComponent(phoneNumber)}`);
|
|
||||||
const data = await response.json();
|
|
||||||
|
|
||||||
if (response.ok && data && data.dirEnquiryEntry) {
|
|
||||||
if (data.dirEnquiryEntry === 'Number not found') {
|
|
||||||
displayError(phoneNumber, 'Number not found');
|
|
||||||
} else {
|
|
||||||
displayResult(phoneNumber, data.dirEnquiryEntry);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
displayError(phoneNumber, 'No results found');
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
displayError(phoneNumber, 'Failed to fetch data. Please try again.');
|
|
||||||
} finally {
|
|
||||||
searchBtn.disabled = false;
|
|
||||||
searchBtn.innerHTML = '<span class="material-icons">search</span><span>Search</span>';
|
|
||||||
phoneInput.value = '';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
function displayResult(searchedNumber, entry) {
|
|
||||||
const html = `
|
|
||||||
<div class="result-card">
|
|
||||||
<div class="searched-number">
|
|
||||||
<span class="material-icons">phone</span>
|
|
||||||
<span>${escapeHtml(searchedNumber)}</span>
|
|
||||||
</div>
|
|
||||||
<div class="result-item">
|
|
||||||
<span class="material-icons">person</span>
|
|
||||||
<div>
|
|
||||||
<div class="result-label">Directory Entry</div>
|
|
||||||
<div class="result-value">${escapeHtml(entry)}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
resultsDiv.insertAdjacentHTML('afterbegin', html);
|
|
||||||
resultsDiv.classList.add('show');
|
|
||||||
}
|
|
||||||
|
|
||||||
function displayError(searchedNumber, message) {
|
|
||||||
const html = `
|
|
||||||
<div class="error-message">
|
|
||||||
<span class="material-icons">error</span>
|
|
||||||
<div>
|
|
||||||
<div class="searched-number" style="color: #f44336; margin-bottom: 4px;">
|
|
||||||
<span class="material-icons">phone</span>
|
|
||||||
<span>${escapeHtml(searchedNumber)}</span>
|
|
||||||
</div>
|
|
||||||
<span>${escapeHtml(message)}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
resultsDiv.insertAdjacentHTML('afterbegin', html);
|
|
||||||
resultsDiv.classList.add('show');
|
|
||||||
}
|
|
||||||
|
|
||||||
function escapeHtml(text) {
|
|
||||||
const div = document.createElement('div');
|
|
||||||
div.textContent = text;
|
|
||||||
return div.innerHTML;
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -0,0 +1,416 @@
|
|||||||
|
const form = document.getElementById('searchForm');
|
||||||
|
const phoneInput = document.getElementById('phoneNumber');
|
||||||
|
const searchBtn = document.getElementById('searchBtn');
|
||||||
|
const tableSearch = document.getElementById('tableSearch');
|
||||||
|
const clearSearchBtn = document.getElementById('clearSearchBtn');
|
||||||
|
const clearHistoryBtn = document.getElementById('clearHistoryBtn');
|
||||||
|
const historyTableBody = document.getElementById('historyTableBody');
|
||||||
|
const emptyState = document.getElementById('emptyState');
|
||||||
|
const resultsCount = document.getElementById('resultsCount');
|
||||||
|
const toast = document.getElementById('toast');
|
||||||
|
const toastMessage = document.getElementById('toastMessage');
|
||||||
|
const toastIcon = document.getElementById('toastIcon');
|
||||||
|
const confirmModal = document.getElementById('confirmModal');
|
||||||
|
const cancelClearBtn = document.getElementById('cancelClearBtn');
|
||||||
|
const confirmClearBtn = document.getElementById('confirmClearBtn');
|
||||||
|
const mobileTableContainer = document.getElementById('mobileTableContainer');
|
||||||
|
const mobileTableBody = document.getElementById('mobileTableBody');
|
||||||
|
const emptyStateMobile = document.getElementById('emptyStateMobile');
|
||||||
|
const qrModal = document.getElementById('qrModal');
|
||||||
|
const qrContainer = document.getElementById('qrContainer');
|
||||||
|
const qrTitle = document.getElementById('qrTitle');
|
||||||
|
const closeQrBtn = document.getElementById('closeQrBtn');
|
||||||
|
|
||||||
|
let searchHistory = [];
|
||||||
|
let currentSort = { column: 'timestamp', direction: 'desc' };
|
||||||
|
|
||||||
|
const HISTORY_KEY = 'edir_search_history';
|
||||||
|
|
||||||
|
function loadHistory() {
|
||||||
|
const stored = localStorage.getItem(HISTORY_KEY);
|
||||||
|
if (stored) {
|
||||||
|
searchHistory = JSON.parse(stored);
|
||||||
|
}
|
||||||
|
renderTable();
|
||||||
|
}
|
||||||
|
|
||||||
|
function saveHistory() {
|
||||||
|
localStorage.setItem(HISTORY_KEY, JSON.stringify(searchHistory));
|
||||||
|
}
|
||||||
|
|
||||||
|
function addToHistory(phone, result, status) {
|
||||||
|
const entry = {
|
||||||
|
id: Date.now(),
|
||||||
|
phone,
|
||||||
|
result,
|
||||||
|
status,
|
||||||
|
timestamp: Date.now()
|
||||||
|
};
|
||||||
|
searchHistory.unshift(entry);
|
||||||
|
saveHistory();
|
||||||
|
renderTable();
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearHistory() {
|
||||||
|
searchHistory = [];
|
||||||
|
localStorage.removeItem(HISTORY_KEY);
|
||||||
|
renderTable();
|
||||||
|
showToast('History cleared', 'success');
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatDate(timestamp) {
|
||||||
|
const date = new Date(timestamp);
|
||||||
|
const datePart = date.toLocaleDateString('en-US', {
|
||||||
|
month: 'short',
|
||||||
|
day: 'numeric',
|
||||||
|
year: 'numeric'
|
||||||
|
});
|
||||||
|
const timePart = date.toLocaleTimeString('en-US', {
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit',
|
||||||
|
hour12: true
|
||||||
|
});
|
||||||
|
return `<span class="date-part">${datePart}</span><span class="time-part">${timePart}</span>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getStatusBadge(status) {
|
||||||
|
const badges = {
|
||||||
|
success: '<span class="status-badge status-success">Found</span>',
|
||||||
|
not_found: '<span class="status-badge status-not-found">Not Found</span>',
|
||||||
|
error: '<span class="status-badge status-error">Error</span>'
|
||||||
|
};
|
||||||
|
return badges[status] || badges.error;
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderTable(filteredHistory = null) {
|
||||||
|
const data = filteredHistory || getSortedHistory();
|
||||||
|
historyTableBody.innerHTML = '';
|
||||||
|
mobileTableBody.innerHTML = '';
|
||||||
|
|
||||||
|
if (data.length === 0) {
|
||||||
|
emptyState.style.display = 'block';
|
||||||
|
mobileTableContainer.style.display = 'none';
|
||||||
|
emptyStateMobile.style.display = '';
|
||||||
|
resultsCount.textContent = filteredHistory ? 'No results found' : '';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
emptyState.style.display = 'none';
|
||||||
|
mobileTableContainer.style.display = '';
|
||||||
|
emptyStateMobile.style.display = 'none';
|
||||||
|
resultsCount.textContent = `Showing ${data.length} ${data.length === 1 ? 'result' : 'results'}`;
|
||||||
|
|
||||||
|
data.forEach((entry, index) => {
|
||||||
|
let resultHtml;
|
||||||
|
if (entry.status === 'not_found') {
|
||||||
|
resultHtml = getStatusBadge(entry.status);
|
||||||
|
} else if (entry.status === 'error') {
|
||||||
|
resultHtml = `${escapeHtml(entry.result)}<div style="margin-top: 8px;">${getStatusBadge(entry.status)}<button class="retry-btn" data-phone="${escapeHtml(entry.phone)}" data-id="${entry.id}" title="Retry"><span class="material-icons">refresh</span></button></div>`;
|
||||||
|
} else {
|
||||||
|
resultHtml = escapeHtml(entry.result);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Desktop table row
|
||||||
|
const row = document.createElement('tr');
|
||||||
|
row.innerHTML = `
|
||||||
|
<td class="phone-number">
|
||||||
|
<div class="phone-cell">
|
||||||
|
<div class="phone-icons">
|
||||||
|
<a href="tel:${escapeHtml(entry.phone)}" class="phone-icon-btn" title="Call">
|
||||||
|
<span class="material-icons">phone</span>
|
||||||
|
</a>
|
||||||
|
<button class="phone-icon-btn qr-btn" title="QR Code">
|
||||||
|
<span class="material-icons">qr_code_2</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<span class="phone-text">${escapeHtml(entry.phone)}</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="result">${resultHtml}</td>
|
||||||
|
<td class="datetime">${formatDate(entry.timestamp)}</td>
|
||||||
|
`;
|
||||||
|
row.querySelector('.qr-btn').addEventListener('click', () => showQrCode(entry.phone));
|
||||||
|
const resultCell = row.querySelector('.result');
|
||||||
|
if (entry.status === 'success') {
|
||||||
|
resultCell.classList.add('copyable');
|
||||||
|
resultCell.addEventListener('click', () => copyToClipboard(entry.result));
|
||||||
|
}
|
||||||
|
const retryBtn = row.querySelector('.retry-btn');
|
||||||
|
if (retryBtn) {
|
||||||
|
retryBtn.addEventListener('click', () => retrySearch(entry.id, entry.phone, retryBtn));
|
||||||
|
}
|
||||||
|
historyTableBody.appendChild(row);
|
||||||
|
|
||||||
|
// Mobile table row
|
||||||
|
const mobileRow = document.createElement('tr');
|
||||||
|
mobileRow.innerHTML = `
|
||||||
|
<td class="phone-number">
|
||||||
|
<div class="phone-cell">
|
||||||
|
<div class="phone-icons">
|
||||||
|
<a href="tel:${escapeHtml(entry.phone)}" class="phone-icon-btn" title="Call">
|
||||||
|
<span class="material-icons">phone</span>
|
||||||
|
</a>
|
||||||
|
<button class="phone-icon-btn qr-btn" title="QR Code">
|
||||||
|
<span class="material-icons">qr_code_2</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<span class="phone-text">${escapeHtml(entry.phone)}</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="result">${resultHtml}</td>
|
||||||
|
<td class="datetime">${formatDate(entry.timestamp)}</td>
|
||||||
|
`;
|
||||||
|
mobileRow.querySelector('.qr-btn').addEventListener('click', () => showQrCode(entry.phone));
|
||||||
|
const mobileResultCell = mobileRow.querySelector('.result');
|
||||||
|
if (entry.status === 'success') {
|
||||||
|
mobileResultCell.classList.add('copyable');
|
||||||
|
mobileResultCell.addEventListener('click', () => copyToClipboard(entry.result));
|
||||||
|
}
|
||||||
|
const mobileRetryBtn = mobileRow.querySelector('.retry-btn');
|
||||||
|
if (mobileRetryBtn) {
|
||||||
|
mobileRetryBtn.addEventListener('click', () => retrySearch(entry.id, entry.phone, mobileRetryBtn));
|
||||||
|
}
|
||||||
|
mobileTableBody.appendChild(mobileRow);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function getSortedHistory() {
|
||||||
|
const sorted = [...searchHistory];
|
||||||
|
sorted.sort((a, b) => {
|
||||||
|
let comparison = 0;
|
||||||
|
if (currentSort.column === 'phone') {
|
||||||
|
comparison = a.phone.localeCompare(b.phone);
|
||||||
|
} else if (currentSort.column === 'result') {
|
||||||
|
comparison = a.result.localeCompare(b.result);
|
||||||
|
} else if (currentSort.column === 'timestamp') {
|
||||||
|
comparison = a.timestamp - b.timestamp;
|
||||||
|
} else if (currentSort.column === 'status') {
|
||||||
|
comparison = a.status.localeCompare(b.status);
|
||||||
|
}
|
||||||
|
return currentSort.direction === 'asc' ? comparison : -comparison;
|
||||||
|
});
|
||||||
|
return sorted;
|
||||||
|
}
|
||||||
|
|
||||||
|
function filterHistory(searchTerm) {
|
||||||
|
if (!searchTerm.trim()) {
|
||||||
|
renderTable();
|
||||||
|
clearSearchBtn.classList.remove('show');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const term = searchTerm.toLowerCase();
|
||||||
|
const filtered = searchHistory.filter(entry =>
|
||||||
|
entry.phone.toLowerCase().includes(term) ||
|
||||||
|
entry.result.toLowerCase().includes(term)
|
||||||
|
);
|
||||||
|
|
||||||
|
renderTable(filtered);
|
||||||
|
clearSearchBtn.classList.add('show');
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleSort(column) {
|
||||||
|
if (currentSort.column === column) {
|
||||||
|
currentSort.direction = currentSort.direction === 'asc' ? 'desc' : 'asc';
|
||||||
|
} else {
|
||||||
|
currentSort.column = column;
|
||||||
|
currentSort.direction = 'asc';
|
||||||
|
}
|
||||||
|
|
||||||
|
document.querySelectorAll('th').forEach(th => {
|
||||||
|
th.classList.remove('sort-asc', 'sort-desc');
|
||||||
|
});
|
||||||
|
document.querySelectorAll(`th[data-sort="${column}"]`).forEach(th => {
|
||||||
|
th.classList.add(currentSort.direction === 'asc' ? 'sort-asc' : 'sort-desc');
|
||||||
|
});
|
||||||
|
|
||||||
|
const searchTerm = tableSearch.value;
|
||||||
|
if (searchTerm.trim()) {
|
||||||
|
filterHistory(searchTerm);
|
||||||
|
} else {
|
||||||
|
renderTable();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function showToast(message, type = 'success') {
|
||||||
|
toastMessage.textContent = message;
|
||||||
|
toast.className = `toast ${type}`;
|
||||||
|
toastIcon.textContent = type === 'success' ? 'check_circle' : 'error';
|
||||||
|
toast.classList.add('show');
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
toast.classList.remove('show');
|
||||||
|
}, 3000);
|
||||||
|
}
|
||||||
|
|
||||||
|
function escapeHtml(text) {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.textContent = text;
|
||||||
|
return div.innerHTML;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function copyToClipboard(text) {
|
||||||
|
try {
|
||||||
|
await navigator.clipboard.writeText(text);
|
||||||
|
showToast('Copied to clipboard', 'success');
|
||||||
|
} catch (err) {
|
||||||
|
showToast('Failed to copy', 'error');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function retrySearch(entryId, phoneNumber, button) {
|
||||||
|
button.classList.add('loading');
|
||||||
|
|
||||||
|
let apiNumber = phoneNumber;
|
||||||
|
if (/^\+960\d{7}$/.test(phoneNumber)) {
|
||||||
|
apiNumber = phoneNumber.slice(4);
|
||||||
|
} else if (/^960\d{7}$/.test(phoneNumber)) {
|
||||||
|
apiNumber = phoneNumber.slice(3);
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(`https://dhiraagu-edir-proxy.shihaam.me/${encodeURIComponent(apiNumber)}`);
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
const entryIndex = searchHistory.findIndex(e => e.id === entryId);
|
||||||
|
if (entryIndex === -1) return;
|
||||||
|
|
||||||
|
if (response.ok && data && data.dirEnquiryEntry) {
|
||||||
|
if (data.dirEnquiryEntry === 'Number not found') {
|
||||||
|
searchHistory[entryIndex].result = 'Number not found';
|
||||||
|
searchHistory[entryIndex].status = 'not_found';
|
||||||
|
} else {
|
||||||
|
searchHistory[entryIndex].result = data.dirEnquiryEntry;
|
||||||
|
searchHistory[entryIndex].status = 'success';
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
searchHistory[entryIndex].result = 'No results found';
|
||||||
|
searchHistory[entryIndex].status = 'error';
|
||||||
|
}
|
||||||
|
searchHistory[entryIndex].timestamp = Date.now();
|
||||||
|
saveHistory();
|
||||||
|
renderTable();
|
||||||
|
showToast('Retry successful', 'success');
|
||||||
|
} catch (error) {
|
||||||
|
button.classList.remove('loading');
|
||||||
|
showToast('Retry failed', 'error');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function showQrCode(phone) {
|
||||||
|
const telUrl = `tel:${phone}`;
|
||||||
|
qrTitle.textContent = phone;
|
||||||
|
qrContainer.innerHTML = '';
|
||||||
|
const isLightMode = window.matchMedia('(prefers-color-scheme: light)').matches;
|
||||||
|
new QRCode(qrContainer, {
|
||||||
|
text: telUrl,
|
||||||
|
width: 200,
|
||||||
|
height: 200,
|
||||||
|
colorDark: isLightMode ? '#e07800' : '#ff8c00',
|
||||||
|
colorLight: isLightMode ? '#ffffff' : '#111111',
|
||||||
|
correctLevel: QRCode.CorrectLevel.H
|
||||||
|
});
|
||||||
|
qrModal.classList.add('show');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Only allow numbers and + in phone input
|
||||||
|
phoneInput.addEventListener('input', (e) => {
|
||||||
|
e.target.value = e.target.value.replace(/[^0-9+]/g, '');
|
||||||
|
});
|
||||||
|
|
||||||
|
form.addEventListener('submit', async (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
const phoneNumber = phoneInput.value.trim();
|
||||||
|
if (!phoneNumber) return;
|
||||||
|
|
||||||
|
// Strip +960 or 960 prefix for API call if it's a valid Maldivian number
|
||||||
|
let apiNumber = phoneNumber;
|
||||||
|
if (/^\+960\d{7}$/.test(phoneNumber)) {
|
||||||
|
apiNumber = phoneNumber.slice(4); // Remove +960
|
||||||
|
} else if (/^960\d{7}$/.test(phoneNumber)) {
|
||||||
|
apiNumber = phoneNumber.slice(3); // Remove 960
|
||||||
|
}
|
||||||
|
|
||||||
|
searchBtn.disabled = true;
|
||||||
|
searchBtn.innerHTML = '<div class="spinner"></div>';
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(`https://dhiraagu-edir-proxy.shihaam.me/${encodeURIComponent(apiNumber)}`);
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
if (response.ok && data && data.dirEnquiryEntry) {
|
||||||
|
if (data.dirEnquiryEntry === 'Number not found') {
|
||||||
|
addToHistory(phoneNumber, 'Number not found', 'not_found');
|
||||||
|
} else {
|
||||||
|
addToHistory(phoneNumber, data.dirEnquiryEntry, 'success');
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
addToHistory(phoneNumber, 'No results found', 'error');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
addToHistory(phoneNumber, 'Failed to fetch data', 'error');
|
||||||
|
} finally {
|
||||||
|
searchBtn.disabled = false;
|
||||||
|
searchBtn.innerHTML = '<span class="material-icons">search</span>';
|
||||||
|
phoneInput.value = '';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
tableSearch.addEventListener('input', (e) => {
|
||||||
|
filterHistory(e.target.value);
|
||||||
|
});
|
||||||
|
|
||||||
|
clearSearchBtn.addEventListener('click', () => {
|
||||||
|
tableSearch.value = '';
|
||||||
|
filterHistory('');
|
||||||
|
tableSearch.focus();
|
||||||
|
});
|
||||||
|
|
||||||
|
document.querySelectorAll('th.sortable').forEach(th => {
|
||||||
|
th.addEventListener('click', () => {
|
||||||
|
handleSort(th.dataset.sort);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
clearHistoryBtn.addEventListener('click', () => {
|
||||||
|
if (searchHistory.length === 0) {
|
||||||
|
showToast('No history to clear', 'error');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
confirmModal.classList.add('show');
|
||||||
|
});
|
||||||
|
|
||||||
|
cancelClearBtn.addEventListener('click', () => {
|
||||||
|
confirmModal.classList.remove('show');
|
||||||
|
});
|
||||||
|
|
||||||
|
confirmClearBtn.addEventListener('click', () => {
|
||||||
|
confirmModal.classList.remove('show');
|
||||||
|
clearHistory();
|
||||||
|
});
|
||||||
|
|
||||||
|
confirmModal.addEventListener('click', (e) => {
|
||||||
|
if (e.target === confirmModal) {
|
||||||
|
confirmModal.classList.remove('show');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
closeQrBtn.addEventListener('click', () => {
|
||||||
|
qrModal.classList.remove('show');
|
||||||
|
});
|
||||||
|
|
||||||
|
qrModal.addEventListener('click', (e) => {
|
||||||
|
if (e.target === qrModal) {
|
||||||
|
qrModal.classList.remove('show');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener('keydown', (e) => {
|
||||||
|
if (e.ctrlKey && e.key === 'f') {
|
||||||
|
e.preventDefault();
|
||||||
|
tableSearch.focus();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
loadHistory();
|
||||||
+1064
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user