167 lines
5.8 KiB
HTML
167 lines
5.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fa" dir="rtl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>شبیه ساز سنسور خاک</title>
|
|
<style>
|
|
:root {
|
|
--bg: linear-gradient(135deg, #f4efe6 0%, #dce8d5 100%);
|
|
--card: rgba(255, 252, 246, 0.92);
|
|
--ink: #203126;
|
|
--muted: #5a6b60;
|
|
--accent: #2f6a4f;
|
|
--accent-dark: #1e4936;
|
|
--border: rgba(47, 106, 79, 0.18);
|
|
--shadow: 0 24px 60px rgba(32, 49, 38, 0.16);
|
|
}
|
|
* { box-sizing: border-box; }
|
|
body {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
font-family: Tahoma, sans-serif;
|
|
background: var(--bg);
|
|
color: var(--ink);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 24px;
|
|
}
|
|
.shell {
|
|
width: min(980px, 100%);
|
|
background: var(--card);
|
|
border: 1px solid var(--border);
|
|
border-radius: 28px;
|
|
box-shadow: var(--shadow);
|
|
overflow: hidden;
|
|
}
|
|
.hero {
|
|
padding: 32px;
|
|
background: linear-gradient(135deg, rgba(47,106,79,.95), rgba(85,130,96,.88));
|
|
color: #f9f6ee;
|
|
}
|
|
.hero h1 { margin: 0 0 12px; font-size: clamp(28px, 5vw, 42px); }
|
|
.hero p { margin: 0; line-height: 1.8; max-width: 700px; }
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 24px;
|
|
padding: 24px;
|
|
}
|
|
.panel {
|
|
border: 1px solid var(--border);
|
|
border-radius: 22px;
|
|
padding: 20px;
|
|
background: rgba(255,255,255,.68);
|
|
}
|
|
label {
|
|
display: block;
|
|
font-weight: bold;
|
|
margin-bottom: 8px;
|
|
}
|
|
input, textarea {
|
|
width: 100%;
|
|
border: 1px solid rgba(32,49,38,.14);
|
|
border-radius: 14px;
|
|
padding: 12px 14px;
|
|
font: inherit;
|
|
background: rgba(255,255,255,.9);
|
|
color: var(--ink);
|
|
}
|
|
textarea { min-height: 320px; resize: vertical; direction: ltr; text-align: left; }
|
|
.hint {
|
|
color: var(--muted);
|
|
font-size: 14px;
|
|
margin-top: 8px;
|
|
line-height: 1.8;
|
|
}
|
|
button {
|
|
border: 0;
|
|
background: var(--accent);
|
|
color: #fff;
|
|
padding: 14px 18px;
|
|
border-radius: 14px;
|
|
font: inherit;
|
|
cursor: pointer;
|
|
min-width: 180px;
|
|
}
|
|
button:hover { background: var(--accent-dark); }
|
|
pre {
|
|
margin: 0;
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
background: #18241c;
|
|
color: #d9f4e2;
|
|
border-radius: 18px;
|
|
padding: 16px;
|
|
min-height: 220px;
|
|
direction: ltr;
|
|
text-align: left;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main class="shell">
|
|
<section class="hero">
|
|
<h1>ارسال استاتیک داده سنسور خاک</h1>
|
|
<p>
|
|
این صفحه بدون هیچ اتصال به دیتابیس، یک payload استاتیک از داده های سنسور خاک را با متد POST
|
|
و هدر <code>api_key</code> به API مقصد ارسال می کند.
|
|
</p>
|
|
</section>
|
|
|
|
<section class="grid">
|
|
<form class="panel" id="sender-form">
|
|
<label for="target_url">آدرس API مقصد</label>
|
|
<input id="target_url" name="target_url" value="{{ default_url }}" required>
|
|
|
|
<label for="api_key" style="margin-top: 16px;">API Key</label>
|
|
<input id="api_key" name="api_key" value="{{ default_api_key }}" required>
|
|
|
|
<label for="payload" style="margin-top: 16px;">JSON ارسالی</label>
|
|
<textarea id="payload" readonly>{{ default_payload }}</textarea>
|
|
<p class="hint">
|
|
فیلدها شامل uuid، رطوبت خاک، دمای خاک، pH، EC، نیتروژن، فسفر و پتاسیم هستند و فعلا همه به صورت استاتیک تعریف شده اند.
|
|
</p>
|
|
|
|
<div style="margin-top: 18px; display: flex; gap: 12px; flex-wrap: wrap;">
|
|
<button type="submit">ارسال به API</button>
|
|
</div>
|
|
</form>
|
|
|
|
<section class="panel">
|
|
<label>نتیجه درخواست</label>
|
|
<pre id="result">هنوز درخواستی ارسال نشده است.</pre>
|
|
<p class="hint">
|
|
در پاسخ، payload ارسالی، هدرهای ارسال شده و پاسخ API مقصد نمایش داده می شود.
|
|
</p>
|
|
</section>
|
|
</section>
|
|
</main>
|
|
|
|
<script>
|
|
const form = document.getElementById('sender-form');
|
|
const result = document.getElementById('result');
|
|
|
|
form.addEventListener('submit', async (event) => {
|
|
event.preventDefault();
|
|
result.textContent = 'در حال ارسال...';
|
|
|
|
const formData = new FormData(form);
|
|
|
|
try {
|
|
const response = await fetch('/api/ingest/forward/', {
|
|
method: 'POST',
|
|
body: formData,
|
|
});
|
|
|
|
const data = await response.json();
|
|
result.textContent = JSON.stringify(data, null, 2);
|
|
} catch (error) {
|
|
result.textContent = JSON.stringify({ error: error.message }, null, 2);
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|