Compare commits
No commits in common. "main" and "pages" have entirely different histories.
@ -1,8 +0,0 @@
|
|||||||
--- run Thu Aug 27 06:43:16 AM UTC 2026 :: npm start --silent
|
|
||||||
|
|
||||||
up to date in 393ms
|
|
||||||
Dashboard running on port 3000
|
|
||||||
--- run Thu Aug 27 06:53:37 AM UTC 2026 :: npm start --silent
|
|
||||||
|
|
||||||
up to date in 333ms
|
|
||||||
Dashboard running on port 3000
|
|
||||||
@ -1 +0,0 @@
|
|||||||
578
|
|
||||||
33
data.json
33
data.json
@ -1,33 +0,0 @@
|
|||||||
{
|
|
||||||
"orders": [
|
|
||||||
{"id": 86844268, "address": "г.Костанай, ул.КАРБЫШЕВА, дом 13, кв(оф) 20", "channel": "ЦАП", "operator": "Борецкая Настя", "status": "в работе", "note": ""},
|
|
||||||
{"id": 86950503, "address": "г.Костанай Улица ВОРОШИЛОВА дом 54/ кв. 44/", "channel": "УП", "operator": "Аманбаева Жанат", "status": "выполнен", "note": ""},
|
|
||||||
{"id": 86921257, "address": "г.Костанай, ул.МИРОШНИЧЕНКО АЛЕКСАНДРА, дом 10, кв(оф) 69", "channel": "ЦАП", "operator": "Шохман Лена", "status": "выполнен", "note": ""},
|
|
||||||
{"id": 86932019, "address": "г.Костанай, мкр.Наурыз, дом 3/А, кв(оф) 10", "channel": "ЦАП", "operator": "Шохман Лена", "status": "выполнен", "note": "после 17:00"},
|
|
||||||
{"id": 86931896, "address": "г.Костанай, ул.ВОИНОВ ИНТЕРНАЦИОНАЛИСТОВ, дом 2, кв(оф) 66", "channel": "Дилер", "operator": "", "status": "выполнен", "note": "30.04 установка с 14.00-16.00"},
|
|
||||||
{"id": 86931637, "address": "г.Костанай, ул.СЕЙФУЛЛИНА, дом 2/А, кв(оф) 51", "channel": "ЦАП", "operator": "Мухамеджанова Фаризат", "status": "выполнен", "note": ""},
|
|
||||||
{"id": 86928438, "address": "г.Костанай, ул.ДОЩАНОВА ОМАРА, дом 133/Б, кв(оф) 21", "channel": "ПСС", "operator": "Байнакатов Султан", "status": "выполнен", "note": ""},
|
|
||||||
{"id": 86917938, "address": "г.Костанай, ул.ТЕКСТИЛЬЩИКОВ, дом 9/А, кв(оф) 14", "channel": "Дилер", "operator": "", "status": "выполнен", "note": ""},
|
|
||||||
{"id": 86927827, "address": "г.Костанай, ул.Шакшак Жанибек батыр, дом 45/Г, кв(оф) 105", "channel": "", "operator": "", "status": "в работе", "note": ""},
|
|
||||||
{"id": 86949844, "address": "г.Костанай, ул.Султана Баймагамбетова, дом 3/А, кв(оф) 27", "channel": "", "operator": "", "status": "выполнен", "note": ""},
|
|
||||||
{"id": 86939780, "address": "г.Костанай Улица Герасимова Д. дом 7/ кв. 47", "channel": "ЦАП", "operator": "", "status": "в работе", "note": "Примечание VCIP:[пересоздать в 16.00 идет объединение програмно]]"},
|
|
||||||
{"id": 86955974, "address": "г.Костанай, ул.МАЙЛИНА, дом 83, кв(оф) 34", "channel": "", "operator": "", "status": "в работе", "note": ""},
|
|
||||||
{"id": 87055596, "address": "п.Карабалык, ул.КОСМОНАВТОВ, дом 22, кв(оф) 7", "channel": "", "operator": "Магамбетов Талгат", "status": "в работе", "note": ""},
|
|
||||||
{"id": 86730778, "address": "г.Петропавловск, ул.Георгия Жукова, дом 36, кв(оф) 14", "channel": "ЦАП", "operator": "Латыпов Руслан", "status": "выполнен", "note": ""},
|
|
||||||
{"id": 86889241, "address": "г. Петропавловск улица Горького 173 кв 52", "channel": "ЦАП", "operator": "Белоусова Виктория", "status": "выполнен", "note": ""},
|
|
||||||
{"id": 86894019, "address": " г.Петропавловск Улица Нурсултана Назарбаева дом 127/ кв. 63/", "channel": "ЦАП", "operator": "Латыпов Руслан", "status": "выполнен", "note": ""},
|
|
||||||
{"id": 86844130, "address": "г.Петропавловск, ул.ЗАВОДСКАЯ, дом 23, кв(оф) 500", "channel": "ЦАП", "operator": "Белоусова Виктория", "status": "ОТКАЗ", "note": "(по согл. ЦАП)"},
|
|
||||||
{"id": 86901154, "address": "г.Петропавловск, ул.Александра Попова, дом 42, кв(оф) 58", "channel": "ПСС", "operator": "ZHANKESH.A", "status": "ОТКАЗ", "note": "ОТКАЗ (абоненту не нужен интернет,очень дорого, аб. хочет только телевидиние. будут искать оператора который предоставляет услуги только телевидиние без интернета)"},
|
|
||||||
{"id": 86909513, "address": "г.Петропавловск, ул.Зои Космодемьянской, дом 7, кв(оф) 24", "channel": "OAPI", "operator": "", "status": "выполнен", "note": ""},
|
|
||||||
{"id": 86915894, "address": "г. Петропавловск улица Уалиханова дом 19 кВ 144", "channel": "ЦАП", "operator": "Белоуосва Виктроия", "status": "выполнен", "note": ""},
|
|
||||||
{"id": 86842967, "address": "г.Петропавловск, ул.Орда, дом 17/Д", "channel": "ЦАП", "operator": "Белоуосва Виктроия", "status": "выполнен", "note": ""},
|
|
||||||
{"id": 86891330, "address": "г.Петропавловск улица Казына дом 12 ", "channel": "ЦАП", "operator": "Белоуосва Виктроия", "status": "выполнен", "note": ""},
|
|
||||||
{"id": 86911676, "address": "г.Петропавловск, ул.Магжана Жумабаева, дом 76, кв(оф) 24", "channel": "ПСС", "operator": "ZHANKESH.A", "status": "выполнен", "note": ""},
|
|
||||||
{"id": 86918617, "address": "г.Петропавловск, ул.Абая, дом 71, кв(оф) 64", "channel": "ПСС", "operator": "Кокичева Диана", "status": "выполнен", "note": ""},
|
|
||||||
{"id": 86918931, "address": "г.Петропавловск, ул.Шокана Уалиханова, дом 48, кв(оф) 7", "channel": "ПСС", "operator": "ZHANKESH.A", "status": "выполнен", "note": ""},
|
|
||||||
{"id": 86895490, "address": "г.Петропавловск, ул.Георгия Жукова, дом 40, кв(оф) 55", "channel": "Дилер", "operator": "", "status": "выполнен", "note": ""},
|
|
||||||
{"id": 86931868, "address": "г.Петропавловск ул. Шокана Уалиханова дом 27 А кв. 9", "channel": "Онлайн", "operator": "Кудайберген Дамир", "status": "ОТКАЗ", "note": "не верно указан адрес"},
|
|
||||||
{"id": 86925108, "address": "г.Петропавловск ул. СТУДЕНЧЕСКАЯ дом 6 кв. 40", "channel": "Дилер", "operator": "", "status": "выполнен", "note": ""},
|
|
||||||
{"id": 86938401, "address": "г.Петропавловск ул. Магжана Жумабаева дом 95 кв. 49", "channel": "", "operator": "", "status": "выполнен", "note": ""}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
596
index.html
596
index.html
@ -3,480 +3,170 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||||
<title>Дашборд заказов - Аналитика</title>
|
<title>Мой проект</title>
|
||||||
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🚀</text></svg>">
|
||||||
<style>
|
<style>
|
||||||
:root{--ink:#0F1218;--cyan:#00E5FF;--cyan-50:#E8FCFF;--white:#fff;--gray-500:#5B6573;--gray-100:#F2F4F7;--success:#10B981;--warning:#F59E0B;--danger:#EF4444;--purple:#8B5CF6}
|
:root{--ink:#0F1218;--cyan:#00E5FF;--cyan-50:#E8FCFF;--white:#fff;--gray-500:#5B6573;--gray-100:#F2F4F7;--gradient:linear-gradient(135deg,#00E5FF 0%,#0099FF 100%)}
|
||||||
*{box-sizing:border-box;margin:0;padding:0}
|
*{box-sizing:border-box;margin:0;padding:0}
|
||||||
body{font:14px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;color:var(--ink);background:#f8f9fa}
|
body{font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;color:var(--ink);background:var(--white);overflow-x:hidden}
|
||||||
.container{max-width:1600px;margin:0 auto;padding:24px}
|
.container{max-width:1140px;margin:0 auto;padding:0 24px}
|
||||||
.header{background:var(--ink);color:var(--white);padding:20px 24px;margin-bottom:24px;border-radius:12px}
|
.hero{background:var(--ink);color:var(--white);padding:140px 0;position:relative;overflow:hidden}
|
||||||
.header h1{font-size:24px;font-weight:700}
|
.hero::before{content:'';position:absolute;top:-50%;right:-20%;width:600px;height:600px;background:radial-gradient(circle,rgba(0,229,255,0.15) 0%,transparent 70%);border-radius:50%}
|
||||||
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin-bottom:24px}
|
.hero .container{position:relative;z-index:1}
|
||||||
.stat-card{background:var(--white);border-radius:12px;padding:20px;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
|
.hero h1{font-size:clamp(40px,7vw,64px);font-weight:800;line-height:1.05;margin-bottom:24px;letter-spacing:-0.02em}
|
||||||
.stat-label{font-size:12px;color:var(--gray-500);margin-bottom:8px;text-transform:uppercase}
|
.hero p{font-size:clamp(18px,2.5vw,22px);color:#9aa3b2;max-width:600px;margin-bottom:40px;line-height:1.7}
|
||||||
.stat-value{font-size:28px;font-weight:700;color:var(--ink)}
|
.hero-btns{display:flex;gap:16px;flex-wrap:wrap}
|
||||||
.stat-card.primary .stat-value{color:var(--cyan)}
|
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--cyan);color:var(--ink);padding:16px 32px;border-radius:10px;font-weight:700;text-decoration:none;cursor:pointer;border:none;font-size:17px;transition:all 0.3s ease}
|
||||||
.stat-card.success .stat-value{color:var(--success)}
|
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,229,255,0.3)}
|
||||||
.stat-card.warning .stat-value{color:var(--warning)}
|
.btn-secondary{background:transparent;border:2px solid var(--cyan);color:var(--cyan)}
|
||||||
.stat-card.danger .stat-value{color:var(--danger)}
|
.btn-secondary:hover{background:var(--cyan);color:var(--ink)}
|
||||||
.stat-card.purple .stat-value{color:var(--purple)}
|
.section{padding:100px 0}
|
||||||
.charts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-bottom:24px}
|
.section h2{font-size:clamp(32px,5vw,42px);font-weight:700;margin-bottom:16px;text-align:center}
|
||||||
.chart-panel{background:var(--white);border-radius:12px;padding:24px;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
|
.section-subtitle{text-align:center;color:var(--gray-500);max-width:600px;margin:0 auto 60px;font-size:18px}
|
||||||
.chart-panel h3{font-size:16px;font-weight:700;margin-bottom:16px}
|
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:32px}
|
||||||
.chart-container{height:250px;position:relative}
|
.card{background:var(--gray-100);border-radius:20px;padding:40px;transition:all 0.3s ease;position:relative;overflow:hidden}
|
||||||
.bar-chart{display:flex;align-items:flex-end;gap:4px;height:200px;padding-top:20px}
|
.card:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(0,0,0,0.1)}
|
||||||
.bar{flex:1;background:var(--cyan);border-radius:4px 4px 0 0;min-width:20px;position:relative;transition:opacity 0.3s}
|
.card-icon{font-size:48px;margin-bottom:24px;display:block}
|
||||||
.bar:hover{opacity:0.7}
|
.card h3{font-size:24px;font-weight:700;margin-bottom:16px}
|
||||||
.bar-label{position:absolute;bottom:-25px;left:50%;transform:translateX(-50%);font-size:10px;white-space:nowrap}
|
.card p{color:var(--gray-500);line-height:1.7}
|
||||||
.bar-value{position:absolute;top:-20px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:600}
|
.about{background:var(--cyan-50)}
|
||||||
.pie-chart{width:200px;height:200px;border-radius:50%;margin:0 auto;position:relative}
|
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
|
||||||
.legend{display:grid;gap:8px;margin-top:16px}
|
.about-img{width:100%;height:400px;object-fit:cover;border-radius:20px;box-shadow:0 20px 40px rgba(0,0,0,0.15)}
|
||||||
.legend-item{display:flex;align-items:center;gap:8px;font-size:12px}
|
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px}
|
||||||
.legend-color{width:16px;height:16px;border-radius:4px}
|
.stat{background:var(--white);padding:32px;border-radius:16px;text-align:center}
|
||||||
.main-grid{display:grid;grid-template-columns:1fr 450px;gap:24px}
|
.stat-num{font-size:42px;font-weight:800;color:var(--cyan);display:block;margin-bottom:8px}
|
||||||
.panel{background:var(--white);border-radius:12px;padding:24px;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
|
.stat-label{color:var(--gray-500);font-size:14px;text-transform:uppercase;letter-spacing:1px}
|
||||||
.panel h2{font-size:18px;font-weight:700;margin-bottom:20px;display:flex;align-items:center;gap:10px}
|
.form-section{background:var(--ink);color:var(--white)}
|
||||||
.table-container{overflow-x:auto;max-height:500px;overflow-y:auto}
|
.form-section h2{color:var(--white)}
|
||||||
.table{width:100%;border-collapse:collapse;font-size:13px}
|
.form-section .section-subtitle{color:#9aa3b2}
|
||||||
.table th,.table td{padding:10px 8px;text-align:left;border-bottom:1px solid var(--gray-100);white-space:nowrap}
|
.form{max-width:500px;margin:0 auto;display:grid;gap:20px}
|
||||||
.table th{font-size:12px;font-weight:600;color:var(--gray-500);text-transform:uppercase;position:sticky;top:0;background:var(--white)}
|
.form input,.form textarea{width:100%;padding:18px;border:2px solid #2a2f3a;background:transparent;border-radius:12px;font-size:17px;font-family:inherit;color:var(--white);transition:border-color 0.3s}
|
||||||
.table tr:hover{background:var(--cyan-50)}
|
.form input:focus,.form textarea:focus{outline:none;border-color:var(--cyan)}
|
||||||
.table td:nth-child(2){max-width:250px;white-space:normal}
|
.form input::placeholder,.form textarea::placeholder{color:#5a6170}
|
||||||
.badge{display:inline-block;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:600}
|
.form textarea{min-height:140px;resize:vertical}
|
||||||
.badge-в_работе{background:#FEF3C7;color:#92400E}
|
.form .btn{width:100%}
|
||||||
.badge-выполнен{background:#DCFCE7;color:#166534}
|
.contacts{text-align:center}
|
||||||
.badge-ОТКАЗ{background:#FEE2E2;color:#991B1B}
|
.contact-item{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:20px;font-size:18px}
|
||||||
.form-group{margin-bottom:14px}
|
.contact-icon{width:50px;height:50px;background:var(--cyan-50);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px}
|
||||||
.form-group label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--gray-500)}
|
.footer{background:#0a0c10;color:var(--white);text-align:center;padding:60px 24px}
|
||||||
.form-group input,.form-group select,.form-group textarea{width:100%;padding:10px;border:1px solid var(--gray-100);border-radius:8px;font-size:14px;font-family:inherit}
|
.footer p{color:#5a6170;font-size:14px}
|
||||||
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--cyan)}
|
.reveal{opacity:0;transform:translateY(30px);transition:all 0.8s ease}
|
||||||
.form-group textarea{min-height:80px;resize:vertical}
|
.reveal.in{opacity:1;transform:none}
|
||||||
.btn{display:inline-block;background:var(--cyan);color:var(--ink);padding:12px 20px;border-radius:8px;font-weight:700;text-decoration:none;cursor:pointer;border:none;font-size:14px;width:100%}
|
@media(max-width:900px){.about-grid{grid-template-columns:1fr}.stats{grid-template-columns:1fr}}
|
||||||
.btn:hover{opacity:0.9}
|
@media(max-width:640px){.container{padding:0 20px}.section{padding:60px 0}.hero{padding:100px 0}.hero-btns{flex-direction:column}.btn{width:100%}}
|
||||||
.btn-sm{padding:5px 10px;font-size:12px;width:auto}
|
|
||||||
.btn-danger{background:var(--danger);color:var(--white)}
|
|
||||||
.btn-edit{background:var(--warning);color:var(--ink)}
|
|
||||||
.actions{display:flex;gap:6px}
|
|
||||||
.empty{text-align:center;padding:40px;color:var(--gray-500)}
|
|
||||||
.filter-row{display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap}
|
|
||||||
.filter-row input,.filter-row select{padding:8px 12px;border:1px solid var(--gray-100);border-radius:6px;font-size:13px}
|
|
||||||
.search-input{flex:1;min-width:200px}
|
|
||||||
.date-filter{display:flex;gap:8px;align-items:center;margin-bottom:16px}
|
|
||||||
.date-filter input{padding:8px 12px;border:1px solid var(--gray-100);border-radius:6px;font-size:13px}
|
|
||||||
@media(max-width:1100px){.main-grid{grid-template-columns:1fr}.charts-grid{grid-template-columns:1fr}}
|
|
||||||
@media(max-width:640px){.stats{grid-template-columns:1fr}.container{padding:16px}}
|
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
<section class="hero">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="header">
|
<h1 class="reveal">Заголовок вашего проекта</h1>
|
||||||
<h1>📊 Дашборд заказов - Костанай/Петропавловск</h1>
|
<p class="reveal">Краткое описание — расскажите, что вы предлагаете и какую проблему решаете для клиента. 2-3 предложения, которые цепляют.</p>
|
||||||
|
<div class="hero-btns reveal">
|
||||||
|
<a href="#form" class="btn">Оставить заявку</a>
|
||||||
|
<a href="#about" class="btn btn-secondary">Узнать больше</a>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section" id="features">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="reveal">Почему выбирают нас</h2>
|
||||||
|
<p class="section-subtitle reveal">Мы предлагаем лучшие условия на рынке и гарантируем результат</p>
|
||||||
|
<div class="cards">
|
||||||
|
<div class="card reveal">
|
||||||
|
<span class="card-icon">⚡</span>
|
||||||
|
<h3>Быстро</h3>
|
||||||
|
<p>Выполняем работу в кратчайшие сроки без потери качества. Ценим ваше время.</p>
|
||||||
|
</div>
|
||||||
|
<div class="card reveal">
|
||||||
|
<span class="card-icon">💎</span>
|
||||||
|
<h3>Качественно</h3>
|
||||||
|
<p>Используем проверенные решения и современные технологии. Гарантия на все услуги.</p>
|
||||||
|
</div>
|
||||||
|
<div class="card reveal">
|
||||||
|
<span class="card-icon">🤝</span>
|
||||||
|
<h3>Надёжно</h3>
|
||||||
|
<p>Работаем официально, несём ответственность за результат. Сотни довольных клиентов.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section about" id="about">
|
||||||
|
<div class="container">
|
||||||
|
<div class="about-grid">
|
||||||
|
<div class="reveal">
|
||||||
|
<h2>О нашем проекте</h2>
|
||||||
|
<p style="color:var(--gray-500);margin-bottom:24px;line-height:1.8">Расскажите здесь историю вашего проекта, компании или о себе. Почему вы начали этим заниматься и что вами движет.</p>
|
||||||
|
<p style="color:var(--gray-500);margin-bottom:32px;line-height:1.8">Добавьте информацию о команде, опыте работы, подходе к клиентам. Люди любят истории и искренность.</p>
|
||||||
<div class="stats">
|
<div class="stats">
|
||||||
<div class="stat-card primary">
|
<div class="stat">
|
||||||
<div class="stat-label">Всего заказов</div>
|
<span class="stat-num">500+</span>
|
||||||
<div class="stat-value" id="stat-total">0</div>
|
<span class="stat-label">Клиентов</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-card warning">
|
<div class="stat">
|
||||||
<div class="stat-label">В работе</div>
|
<span class="stat-num">5 лет</span>
|
||||||
<div class="stat-value" id="stat-active">0</div>
|
<span class="stat-label">Опыта</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-card success">
|
<div class="stat">
|
||||||
<div class="stat-label">Выполнено</div>
|
<span class="stat-num">100%</span>
|
||||||
<div class="stat-value" id="stat-completed">0</div>
|
<span class="stat-label">Гарантия</span>
|
||||||
</div>
|
|
||||||
<div class="stat-card danger">
|
|
||||||
<div class="stat-label">Отказы</div>
|
|
||||||
<div class="stat-value" id="stat-rejected">0</div>
|
|
||||||
</div>
|
|
||||||
<div class="stat-card purple">
|
|
||||||
<div class="stat-label">Конверсия</div>
|
|
||||||
<div class="stat-value" id="stat-conversion">0%</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<img src="https://picsum.photos/seed/project/600/400" alt="О проекте" class="about-img reveal">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<div class="charts-grid">
|
<section class="section form-section" id="form">
|
||||||
<div class="chart-panel">
|
<div class="container">
|
||||||
<h3>📈 Динамика по дням</h3>
|
<h2 class="reveal">Свяжитесь с нами</h2>
|
||||||
<div class="chart-container">
|
<p class="section-subtitle reveal">Оставьте заявку и мы свяжемся с вами в течение 15 минут</p>
|
||||||
<div class="bar-chart" id="daily-chart"></div>
|
<form class="form reveal" action="https://formsubmit.co/your@email.com" method="POST">
|
||||||
</div>
|
<input type="text" name="name" placeholder="Ваше имя" required>
|
||||||
</div>
|
<input type="tel" name="phone" placeholder="Телефон" required>
|
||||||
<div class="chart-panel">
|
<textarea name="message" placeholder="Сообщение или вопрос"></textarea>
|
||||||
<h3>📊 Статусы заказов</h3>
|
<button type="submit" class="btn">Отправить заявку</button>
|
||||||
<div class="chart-container" style="display:flex;align-items:center;justify-content:center">
|
|
||||||
<div class="pie-chart" id="status-pie" style="background:conic-gradient(var(--cyan) 0deg 0deg,#10B981 0deg 0deg,#F59E0B 0deg 0deg)"></div>
|
|
||||||
</div>
|
|
||||||
<div class="legend" id="status-legend"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="charts-grid">
|
|
||||||
<div class="chart-panel">
|
|
||||||
<h3>📱 Каналы продаж</h3>
|
|
||||||
<div class="chart-container">
|
|
||||||
<div class="bar-chart" id="channel-chart"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="chart-panel">
|
|
||||||
<h3>👥 Топ операторов</h3>
|
|
||||||
<div class="chart-container">
|
|
||||||
<div class="bar-chart" id="operator-chart"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="main-grid">
|
|
||||||
<div class="panel">
|
|
||||||
<h2>📋 Все заказы</h2>
|
|
||||||
<div class="filter-row">
|
|
||||||
<input type="text" class="search-input" id="search" placeholder="Поиск по адресу или № заказа...">
|
|
||||||
<select id="filter-channel">
|
|
||||||
<option value="">Все каналы</option>
|
|
||||||
<option value="ЦАП">ЦАП</option>
|
|
||||||
<option value="УП">УП</option>
|
|
||||||
<option value="Дилер">Дилер</option>
|
|
||||||
<option value="ПСС">ПСС</option>
|
|
||||||
<option value="OAPI">OAPI</option>
|
|
||||||
<option value="Онлайн">Онлайн</option>
|
|
||||||
</select>
|
|
||||||
<select id="filter-status">
|
|
||||||
<option value="">Все статусы</option>
|
|
||||||
<option value="в работе">В работе</option>
|
|
||||||
<option value="выполнен">Выполнен</option>
|
|
||||||
<option value="ОТКАЗ">ОТКАЗ</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="table-container">
|
|
||||||
<table class="table">
|
|
||||||
<thead>
|
|
||||||
<tr><th>№ заказа</th><th>Адрес</th><th>Канал</th><th>Оператор</th><th>Статус</th><th>Примечание</th><th>Действия</th></tr>
|
|
||||||
</thead>
|
|
||||||
<tbody id="table-body"></tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
<div id="empty" class="empty" style="display:none">Нет записей</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="panel">
|
|
||||||
<h2 id="form-title">➕ Добавить заказ</h2>
|
|
||||||
<form id="form">
|
|
||||||
<div class="form-group">
|
|
||||||
<label>№ заказа *</label>
|
|
||||||
<input type="text" name="id" placeholder="86844268" required>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Адрес *</label>
|
|
||||||
<input type="text" name="address" placeholder="г.Костанай, ул...." required>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Канал продаж</label>
|
|
||||||
<select name="channel">
|
|
||||||
<option value="">Выбрать...</option>
|
|
||||||
<option value="ЦАП">ЦАП</option>
|
|
||||||
<option value="УП">УП</option>
|
|
||||||
<option value="Дилер">Дилер</option>
|
|
||||||
<option value="ПСС">ПСС</option>
|
|
||||||
<option value="OAPI">OAPI</option>
|
|
||||||
<option value="Онлайн">Онлайн</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Оператор</label>
|
|
||||||
<input type="text" name="operator" placeholder="ФИО оператора">
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Статус *</label>
|
|
||||||
<select name="status" required>
|
|
||||||
<option value="в работе">В работе</option>
|
|
||||||
<option value="выполнен">Выполнен</option>
|
|
||||||
<option value="ОТКАЗ">ОТКАЗ</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Примечание</label>
|
|
||||||
<textarea name="note" placeholder="Комментарий к заказу"></textarea>
|
|
||||||
</div>
|
|
||||||
<button type="submit" class="btn" id="submit-btn">Добавить</button>
|
|
||||||
<button type="button" class="btn btn-danger" id="cancel-btn" style="display:none;margin-top:8px">Отмена</button>
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section contacts">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="reveal">Контакты</h2>
|
||||||
|
<p class="section-subtitle reveal">Мы всегда на связи и готовы ответить на любые вопросы</p>
|
||||||
|
<div class="reveal">
|
||||||
|
<div class="contact-item">
|
||||||
|
<span class="contact-icon">📍</span>
|
||||||
|
<span>г. Алматы, ул. Примерная, 100</span>
|
||||||
|
</div>
|
||||||
|
<div class="contact-item">
|
||||||
|
<span class="contact-icon">📞</span>
|
||||||
|
<span>+7 (777) 123-45-67</span>
|
||||||
|
</div>
|
||||||
|
<div class="contact-item">
|
||||||
|
<span class="contact-icon">✉️</span>
|
||||||
|
<span>hello@example.com</span>
|
||||||
|
</div>
|
||||||
|
<div class="contact-item">
|
||||||
|
<span class="contact-icon">🕐</span>
|
||||||
|
<span>Пн-Пт: 9:00 - 18:00</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer class="footer">
|
||||||
|
<p>© 2026 Мой проект. Все права защищены.</p>
|
||||||
|
</footer>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
let editingId = null;
|
var io=new IntersectionObserver(function(entries){
|
||||||
let allOrders = [];
|
entries.forEach(function(e){if(e.isIntersecting)e.target.classList.add('in');});
|
||||||
|
},{threshold:0.15});
|
||||||
function getStatusClass(status) {
|
document.querySelectorAll('.reveal').forEach(function(el){io.observe(el);});
|
||||||
if (status === 'в работе') return 'badge-в_работе';
|
|
||||||
if (status === 'выполнен') return 'badge-выполнен';
|
|
||||||
if (status === 'ОТКАЗ') return 'badge-ОТКАЗ';
|
|
||||||
return '';
|
|
||||||
}
|
|
||||||
|
|
||||||
function extractDateFromId(id) {
|
|
||||||
const idStr = String(id);
|
|
||||||
if (idStr.length >= 6) {
|
|
||||||
const day = idStr.slice(4, 6);
|
|
||||||
const month = idStr.slice(2, 4);
|
|
||||||
const year = '20' + idStr.slice(0, 2);
|
|
||||||
return year + '-' + month + '-' + day;
|
|
||||||
}
|
|
||||||
return new Date().toISOString().slice(0, 10);
|
|
||||||
}
|
|
||||||
|
|
||||||
function groupByDate(orders) {
|
|
||||||
const groups = {};
|
|
||||||
orders.forEach(o => {
|
|
||||||
const date = extractDateFromId(o.id);
|
|
||||||
if (!groups[date]) groups[date] = 0;
|
|
||||||
groups[date]++;
|
|
||||||
});
|
|
||||||
return Object.entries(groups).sort((a, b) => a[0].localeCompare(b[0]));
|
|
||||||
}
|
|
||||||
|
|
||||||
function groupByChannel(orders) {
|
|
||||||
const groups = {};
|
|
||||||
orders.forEach(o => {
|
|
||||||
const ch = o.channel || 'Без канала';
|
|
||||||
if (!groups[ch]) groups[ch] = 0;
|
|
||||||
groups[ch]++;
|
|
||||||
});
|
|
||||||
return Object.entries(groups).sort((a, b) => b[1] - a[1]);
|
|
||||||
}
|
|
||||||
|
|
||||||
function groupByOperator(orders) {
|
|
||||||
const groups = {};
|
|
||||||
orders.forEach(o => {
|
|
||||||
const op = o.operator || 'Без оператора';
|
|
||||||
if (!groups[op]) groups[op] = 0;
|
|
||||||
groups[op]++;
|
|
||||||
});
|
|
||||||
return Object.entries(groups).sort((a, b) => b[1] - a[1]).slice(0, 10);
|
|
||||||
}
|
|
||||||
|
|
||||||
function groupByStatus(orders) {
|
|
||||||
const groups = {'в работе': 0, 'выполнен': 0, 'ОТКАЗ': 0};
|
|
||||||
orders.forEach(o => {
|
|
||||||
if (groups[o.status] !== undefined) groups[o.status]++;
|
|
||||||
});
|
|
||||||
return groups;
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderDailyChart(data) {
|
|
||||||
const container = document.getElementById("daily-chart");
|
|
||||||
if (data.length === 0) {
|
|
||||||
container.innerHTML = '<div style="color:#999;text-align:center;padding:40px">Нет данных</div>';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const max = Math.max(...data.map(d => d[1]));
|
|
||||||
container.innerHTML = data.map(d => {
|
|
||||||
const height = (d[1] / max) * 180;
|
|
||||||
const date = d[0].slice(5) + '.' + d[0].slice(0, 4);
|
|
||||||
return '<div class="bar" style="height:' + height + 'px"><span class="bar-value">' + d[1] + '</span><span class="bar-label">' + date + '</span></div>';
|
|
||||||
}).join("");
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderChannelChart(data) {
|
|
||||||
const container = document.getElementById("channel-chart");
|
|
||||||
if (data.length === 0) {
|
|
||||||
container.innerHTML = '<div style="color:#999;text-align:center;padding:40px">Нет данных</div>';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const max = Math.max(...data.map(d => d[1]));
|
|
||||||
container.innerHTML = data.map(d => {
|
|
||||||
const height = (d[1] / max) * 180;
|
|
||||||
return '<div class="bar" style="height:' + height + 'px;background:#8B5CF6"><span class="bar-value">' + d[1] + '</span><span class="bar-label" style="transform:translateX(-50%) rotate(-45deg);font-size:9px">' + d[0].slice(0, 8) + '</span></div>';
|
|
||||||
}).join("");
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderOperatorChart(data) {
|
|
||||||
const container = document.getElementById("operator-chart");
|
|
||||||
if (data.length === 0) {
|
|
||||||
container.innerHTML = '<div style="color:#999;text-align:center;padding:40px">Нет данных</div>';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const max = Math.max(...data.map(d => d[1]));
|
|
||||||
container.innerHTML = data.map(d => {
|
|
||||||
const height = (d[1] / max) * 180;
|
|
||||||
return '<div class="bar" style="height:' + height + 'px;background:#F59E0B"><span class="bar-value">' + d[1] + '</span><span class="bar-label" style="transform:translateX(-50%) rotate(-45deg);font-size:9px">' + d[0].slice(0, 10) + '</span></div>';
|
|
||||||
}).join("");
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderStatusPie(statuses) {
|
|
||||||
const total = statuses['в работе'] + statuses['выполнен'] + statuses['ОТКАЗ'];
|
|
||||||
if (total === 0) return;
|
|
||||||
|
|
||||||
const activeDeg = (statuses['в работе'] / total) * 360;
|
|
||||||
const completedDeg = (statuses['выполнен'] / total) * 360;
|
|
||||||
const rejectedDeg = (statuses['ОТКАЗ'] / total) * 360;
|
|
||||||
|
|
||||||
const pie = document.getElementById("status-pie");
|
|
||||||
pie.style.background = 'conic-gradient(#F59E0B 0deg ' + activeDeg + 'deg, #10B981 ' + activeDeg + 'deg ' + (activeDeg + completedDeg) + 'deg, #EF4444 ' + (activeDeg + completedDeg) + 'deg 360deg)';
|
|
||||||
|
|
||||||
const legend = document.getElementById("status-legend");
|
|
||||||
legend.innerHTML = [
|
|
||||||
{label: 'В работе', count: statuses['в работе'], color: '#F59E0B'},
|
|
||||||
{label: 'Выполнен', count: statuses['выполнен'], color: '#10B981'},
|
|
||||||
{label: 'ОТКАЗ', count: statuses['ОТКАЗ'], color: '#EF4444'}
|
|
||||||
].map(item => '<div class="legend-item"><div class="legend-color" style="background:' + item.color + '"></div><span>' + item.label + ': ' + item.count + '</span></div>').join("");
|
|
||||||
}
|
|
||||||
|
|
||||||
async function load() {
|
|
||||||
const res = await fetch("/api/data");
|
|
||||||
const data = await res.json();
|
|
||||||
allOrders = data.orders || [];
|
|
||||||
renderTable(allOrders);
|
|
||||||
updateStats(allOrders);
|
|
||||||
updateCharts(allOrders);
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateStats(orders) {
|
|
||||||
const total = orders.length;
|
|
||||||
const active = orders.filter(o => o.status === "в работе").length;
|
|
||||||
const completed = orders.filter(o => o.status === "выполнен").length;
|
|
||||||
const rejected = orders.filter(o => o.status === "ОТКАЗ").length;
|
|
||||||
const conversion = total > 0 ? Math.round((completed / total) * 100) : 0;
|
|
||||||
|
|
||||||
document.getElementById("stat-total").textContent = total;
|
|
||||||
document.getElementById("stat-active").textContent = active;
|
|
||||||
document.getElementById("stat-completed").textContent = completed;
|
|
||||||
document.getElementById("stat-rejected").textContent = rejected;
|
|
||||||
document.getElementById("stat-conversion").textContent = conversion + '%';
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateCharts(orders) {
|
|
||||||
renderDailyChart(groupByDate(orders));
|
|
||||||
renderChannelChart(groupByChannel(orders));
|
|
||||||
renderOperatorChart(groupByOperator(orders));
|
|
||||||
renderStatusPie(groupByStatus(orders));
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderTable(orders) {
|
|
||||||
const tbody = document.getElementById("table-body");
|
|
||||||
const empty = document.getElementById("empty");
|
|
||||||
|
|
||||||
if (orders.length === 0) {
|
|
||||||
tbody.innerHTML = "";
|
|
||||||
empty.style.display = "block";
|
|
||||||
} else {
|
|
||||||
empty.style.display = "none";
|
|
||||||
tbody.innerHTML = orders.map(order => `
|
|
||||||
<tr>
|
|
||||||
<td><strong>${order.id}</strong></td>
|
|
||||||
<td title="${order.address}">${order.address.substring(0, 50)}${order.address.length > 50 ? '...' : ''}</td>
|
|
||||||
<td>${order.channel || '-'}</td>
|
|
||||||
<td>${order.operator || '-'}</td>
|
|
||||||
<td><span class="badge ${getStatusClass(order.status)}">${order.status}</span></td>
|
|
||||||
<td title="${order.note || ''}">${(order.note || '-').substring(0, 30)}${(order.note||'').length > 30 ? '...' : ''}</td>
|
|
||||||
<td class="actions">
|
|
||||||
<button class="btn btn-sm btn-edit" onclick="editItem(${order.id})">✏️</button>
|
|
||||||
<button class="btn btn-sm btn-danger" onclick="deleteItem(${order.id})">🗑️</button>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
`).join("");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function filterTable() {
|
|
||||||
const search = document.getElementById("search").value.toLowerCase();
|
|
||||||
const channel = document.getElementById("filter-channel").value;
|
|
||||||
const status = document.getElementById("filter-status").value;
|
|
||||||
|
|
||||||
let filtered = allOrders;
|
|
||||||
|
|
||||||
if (search) {
|
|
||||||
filtered = filtered.filter(o =>
|
|
||||||
String(o.id).includes(search) ||
|
|
||||||
o.address.toLowerCase().includes(search) ||
|
|
||||||
(o.operator && o.operator.toLowerCase().includes(search))
|
|
||||||
);
|
|
||||||
}
|
|
||||||
if (channel) filtered = filtered.filter(o => o.channel === channel);
|
|
||||||
if (status) filtered = filtered.filter(o => o.status === status);
|
|
||||||
|
|
||||||
renderTable(filtered);
|
|
||||||
}
|
|
||||||
|
|
||||||
document.getElementById("search").addEventListener("input", filterTable);
|
|
||||||
document.getElementById("filter-channel").addEventListener("change", filterTable);
|
|
||||||
document.getElementById("filter-status").addEventListener("change", filterTable);
|
|
||||||
|
|
||||||
document.getElementById("form").addEventListener("submit", async (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
const form = e.target;
|
|
||||||
const data = {
|
|
||||||
id: form.id.value,
|
|
||||||
address: form.address.value,
|
|
||||||
channel: form.channel.value,
|
|
||||||
operator: form.operator.value,
|
|
||||||
status: form.status.value,
|
|
||||||
note: form.note.value
|
|
||||||
};
|
|
||||||
|
|
||||||
if (editingId) {
|
|
||||||
await fetch(`/api/data/${editingId}`, {
|
|
||||||
method: "PUT",
|
|
||||||
headers: { "Content-Type": "application/json" },
|
|
||||||
body: JSON.stringify(data)
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
await fetch("/api/data", {
|
|
||||||
method: "POST",
|
|
||||||
headers: { "Content-Type": "application/json" },
|
|
||||||
body: JSON.stringify(data)
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
form.reset();
|
|
||||||
editingId = null;
|
|
||||||
document.getElementById("form-title").textContent = "➕ Добавить заказ";
|
|
||||||
document.getElementById("submit-btn").textContent = "Добавить";
|
|
||||||
document.getElementById("cancel-btn").style.display = "none";
|
|
||||||
load();
|
|
||||||
});
|
|
||||||
|
|
||||||
async function editItem(id) {
|
|
||||||
const order = allOrders.find(o => o.id === id);
|
|
||||||
if (!order) return;
|
|
||||||
|
|
||||||
const form = document.getElementById("form");
|
|
||||||
form.id.value = order.id;
|
|
||||||
form.address.value = order.address;
|
|
||||||
form.channel.value = order.channel || "";
|
|
||||||
form.operator.value = order.operator || "";
|
|
||||||
form.status.value = order.status;
|
|
||||||
form.note.value = order.note || "";
|
|
||||||
|
|
||||||
editingId = id;
|
|
||||||
document.getElementById("form-title").textContent = "✏️ Редактировать заказ";
|
|
||||||
document.getElementById("submit-btn").textContent = "Сохранить";
|
|
||||||
document.getElementById("cancel-btn").style.display = "inline-block";
|
|
||||||
}
|
|
||||||
|
|
||||||
document.getElementById("cancel-btn").addEventListener("click", () => {
|
|
||||||
document.getElementById("form").reset();
|
|
||||||
editingId = null;
|
|
||||||
document.getElementById("form-title").textContent = "➕ Добавить заказ";
|
|
||||||
document.getElementById("submit-btn").textContent = "Добавить";
|
|
||||||
document.getElementById("cancel-btn").style.display = "none";
|
|
||||||
});
|
|
||||||
|
|
||||||
async function deleteItem(id) {
|
|
||||||
if (!confirm("Удалить заказ №" + id + "?")) return;
|
|
||||||
await fetch(`/api/data/${id}`, { method: "DELETE" });
|
|
||||||
document.getElementById("form").reset();
|
|
||||||
editingId = null;
|
|
||||||
document.getElementById("form-title").textContent = "➕ Добавить заказ";
|
|
||||||
document.getElementById("submit-btn").textContent = "Добавить";
|
|
||||||
document.getElementById("cancel-btn").style.display = "none";
|
|
||||||
load();
|
|
||||||
}
|
|
||||||
|
|
||||||
load();
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
10
package-lock.json
generated
10
package-lock.json
generated
@ -1,10 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "dashboard-app",
|
|
||||||
"lockfileVersion": 3,
|
|
||||||
"requires": true,
|
|
||||||
"packages": {
|
|
||||||
"": {
|
|
||||||
"name": "dashboard-app"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,8 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "dashboard-app",
|
|
||||||
"private": true,
|
|
||||||
"type": "commonjs",
|
|
||||||
"scripts": {
|
|
||||||
"start": "node server.js"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
82
server.js
82
server.js
@ -1,82 +0,0 @@
|
|||||||
const http = require("http");
|
|
||||||
const fs = require("fs");
|
|
||||||
const path = require("path");
|
|
||||||
|
|
||||||
const PORT = process.env.PORT || 3000;
|
|
||||||
const DATA = path.join(__dirname, "data.json");
|
|
||||||
|
|
||||||
function readData() {
|
|
||||||
try { return JSON.parse(fs.readFileSync(DATA, "utf8")); } catch (_) { return { orders: [] }; }
|
|
||||||
}
|
|
||||||
function writeData(data) {
|
|
||||||
fs.writeFileSync(DATA, JSON.stringify(data, null, 2));
|
|
||||||
}
|
|
||||||
function body(req) {
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
let s = "";
|
|
||||||
req.on("data", (c) => (s += c));
|
|
||||||
req.on("end", () => { try { resolve(JSON.parse(s || "{}")); } catch (_) { resolve({}); } });
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
http.createServer(async (req, res) => {
|
|
||||||
res.setHeader("Access-Control-Allow-Origin", "*");
|
|
||||||
res.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
|
|
||||||
res.setHeader("Access-Control-Allow-Headers", "Content-Type");
|
|
||||||
|
|
||||||
if (req.method === "OPTIONS") {
|
|
||||||
res.writeHead(200);
|
|
||||||
return res.end();
|
|
||||||
}
|
|
||||||
|
|
||||||
if (req.method === "GET" && req.url === "/api/data") {
|
|
||||||
res.writeHead(200, { "Content-Type": "application/json" });
|
|
||||||
return res.end(JSON.stringify(readData()));
|
|
||||||
}
|
|
||||||
|
|
||||||
if (req.method === "POST" && req.url === "/api/data") {
|
|
||||||
const data = readData();
|
|
||||||
const item = await body(req);
|
|
||||||
item.id = parseInt(item.id) || Date.now();
|
|
||||||
data.orders.push(item);
|
|
||||||
writeData(data);
|
|
||||||
res.writeHead(200, { "Content-Type": "application/json" });
|
|
||||||
return res.end(JSON.stringify({ ok: true, item }));
|
|
||||||
}
|
|
||||||
|
|
||||||
if (req.method === "PUT" && req.url.startsWith("/api/data/")) {
|
|
||||||
const id = parseInt(req.url.split("/").pop());
|
|
||||||
const data = readData();
|
|
||||||
const idx = data.orders.findIndex(i => i.id === id);
|
|
||||||
if (idx !== -1) {
|
|
||||||
const update = await body(req);
|
|
||||||
data.orders[idx] = { ...data.orders[idx], ...update };
|
|
||||||
writeData(data);
|
|
||||||
res.writeHead(200, { "Content-Type": "application/json" });
|
|
||||||
return res.end(JSON.stringify({ ok: true }));
|
|
||||||
}
|
|
||||||
res.writeHead(404, { "Content-Type": "application/json" });
|
|
||||||
return res.end(JSON.stringify({ error: "Not found" }));
|
|
||||||
}
|
|
||||||
|
|
||||||
if (req.method === "DELETE" && req.url.startsWith("/api/data/")) {
|
|
||||||
const id = parseInt(req.url.split("/").pop());
|
|
||||||
const data = readData();
|
|
||||||
data.orders = data.orders.filter(i => i.id !== id);
|
|
||||||
writeData(data);
|
|
||||||
res.writeHead(200, { "Content-Type": "application/json" });
|
|
||||||
return res.end(JSON.stringify({ ok: true }));
|
|
||||||
}
|
|
||||||
|
|
||||||
let file = req.url === "/" ? "/index.html" : req.url.split("?")[0];
|
|
||||||
const full = path.join(__dirname, file);
|
|
||||||
if (full.startsWith(__dirname) && fs.existsSync(full) && fs.statSync(full).isFile()) {
|
|
||||||
const ext = path.extname(full);
|
|
||||||
const type = ext === ".css" ? "text/css" : ext === ".js" ? "application/javascript" : ext === ".svg" ? "image/svg+xml" : "text/html";
|
|
||||||
res.writeHead(200, { "Content-Type": type + "; charset=utf-8" });
|
|
||||||
return res.end(fs.readFileSync(full));
|
|
||||||
}
|
|
||||||
|
|
||||||
res.writeHead(404, { "Content-Type": "text/html" });
|
|
||||||
res.end("Not found");
|
|
||||||
}).listen(PORT, () => console.log("Dashboard running on port " + PORT));
|
|
||||||
Loading…
Reference in New Issue
Block a user