بناء لوحة تحكم تفاعلية

// KFS Smart Farm dashboard — Fetch API + Chart.js, auto refresh every 15 s (sessions 9, 11, 12, 17)
const csrf = document.querySelector('meta[name="csrf-token"]').content;
const $ = (s) => document.querySelector(s);
const COLORS = ['#13787b', '#f5a524', '#1d2256', '#c0392b'];
let chart;

async function api(url, opts = {}) {
    const res = await fetch(url, opts);
    if (res.status === 401) { location.href = '/login'; return null; }
    return res.json();
}

const fmt = (v, unit = '') => (v === null || v === undefined) ? '—' : `${v}${unit}`;
const ago = (ts) => {
    if (!ts) return 'لا توجد قراءات';
    const m = Math.round((Date.now() - new Date(ts)) / 60000);
    return m < 1 ? 'الآن' : m < 60 ? `منذ ${m} دقيقة` : `منذ ${Math.round(m / 60)} ساعة`;
};
const soilClass = (v) => v == null ? '' : v < 30 ? 'dry' : v < 55 ? 'ok' : 'wet';

async function loadNodes() {
    const data = await api('/api/v1/latest');
    if (!data) return;
    $('#nodes').innerHTML = data.nodes.map(n => `
        <article class="card node ${n.online ? '' : 'offline'}">
            <header><b>${n.name || n.node_id}</b><span class="badge ${n.online ? 'on' : 'off'}">${n.online ? 'متصل' : 'غير متصل'}</span></header>
            <div class="soil ${soilClass(n.soil_moisture_pct)}"><strong>${fmt(n.soil_moisture_pct, '%')}</strong><span>رطوبة التربة</span>
                <i style="--v:${n.soil_moisture_pct || 0}%"></i></div>
            <dl>
                <div><dt>الحرارة</dt><dd>${fmt(n.air_temp_c, ' °C')}</dd></div>
                <div><dt>رطوبة الهواء</dt><dd>${fmt(n.air_humidity_pct, '%')}</dd></div>
                <div><dt>الإضاءة</dt><dd>${fmt(n.light)}</dd></div>
                <div><dt>البطارية</dt><dd>${fmt(n.battery_v, ' V')}</dd></div>
            </dl>
            <footer class="muted small">${n.node_id} · ${ago(n.ts)}</footer>
        </article>`).join('');
}

async function loadChart() {
    const metric = $('#metric').value, hours = $('#hours').value;
    const data = await api(`/api/v1/readings?hours=${hours}`);
    if (!data) return;
    const byNode = {};
    data.readings.forEach(r => { (byNode[r.node_id] ||= []).push({x: r.ts, y: r[metric]}); });
    const datasets = Object.entries(byNode).map(([node, pts], i) => ({
        label: node, data: pts, borderColor: COLORS[i % COLORS.length], backgroundColor: 'transparent',
        pointRadius: 0, borderWidth: 2, tension: .3, spanGaps: false,
    }));
    if (!chart) {
        chart = new Chart($('#chart'), {
            type: 'line', data: {datasets},
            options: {
                animation: false, interaction: {mode: 'nearest', intersect: false},
                scales: {x: {type: 'category', ticks: {maxTicksLimit: 8, callback(v) { return this.getLabelForValue(v).slice(5, 16).replace('T', ' '); }}}},
                plugins: {legend: {position: 'bottom'}},
            },
        });
    } else {
        chart.data.datasets = datasets;
        chart.update();
    }
}

async function loadPredictions() {
    const nodes = [...document.querySelectorAll('#control select[name=node_id] option')].map(o => o.value);
    const out = await Promise.all(nodes.map(n => api(`/api/v1/predict/${n}`)));
    $('#predictions').innerHTML = out.map((p, i) => !p || !p.ok
        ? `<div class="pred"><b>${nodes[i]}</b><span class="muted">لا توجد بيانات كافية</span></div>`
        : `<div class="pred ${p.recommendation}">
              <b>${p.node_id}</b>
              <span class="rec">${p.recommendation === 'irrigate' ? '💧 يحتاج ري خلال 24 ساعة' : '✅ لا يحتاج ري الآن'}</span>
              <span class="prob" title="احتمال الحاجة للري"><i style="--v:${Math.round(p.probability * 100)}%"></i>${Math.round(p.probability * 100)}%</span>
              <small class="muted">${p.water_mm ? `كمية مقترحة ≈ ${p.water_mm} مم` : ''} ${p.note || ''} · ET0 غداً ${p.weather.et0_next_24h ?? '—'} مم · ${p.source}</small>
           </div>`).join('');
}

async function loadDecisions() {
    const data = await api('/api/v1/decisions');
    if (!data) return;
    $('#decisions').innerHTML = data.decisions.map(d =>
        `<li class="${d.level}"><time>${d.ts.slice(5, 16).replace('T', ' ')}</time><b>${d.node_id}</b> ${d.message} <em>${d.source}</em></li>`
    ).join('') || '<li class="muted">لا توجد قرارات بعد</li>';
}

document.querySelectorAll('#control [data-action]').forEach(btn => btn.addEventListener('click', async () => {
    const f = new FormData($('#control'));
    const body = {node_id: f.get('node_id'), actuator: f.get('actuator'), action: btn.dataset.action,
                  duration_min: Number(f.get('duration_min')), confirm: false};
    const label = `${body.action === 'on' ? 'تشغيل' : 'إيقاف'} ${body.actuator === 'pump' ? 'المضخة' : 'المروحة'} في ${body.node_id}`;
    if (!confirm(`تأكيد: ${label}${body.action === 'on' ? ` لمدة ${body.duration_min} دقيقة` : ''}؟`)) return;
    body.confirm = true;
    const res = await api('/api/v1/commands', {method: 'POST', headers: {'Content-Type': 'application/json', 'X-CSRF-Token': csrf}, body: JSON.stringify(body)});
    alert(res && res.ok ? `تم إرسال الأمر #${res.id} — سيُنفذ عند اتصال العقدة` : `خطأ: ${res && res.error}`);
    loadDecisions();
}));

['#metric', '#hours'].forEach(s => $(s).addEventListener('change', loadChart));
function refresh() { loadNodes(); loadChart(); loadDecisions(); }
refresh(); loadPredictions();
setInterval(refresh, 15000);
setInterval(loadPredictions, 300000);

<div id="soil" style="font:700 3rem system-ui">—</div>
<div id="state"></div>
<script src="https://unpkg.com/mqtt@5.3.5/dist/mqtt.min.js"></script>
<script>
  // Mosquitto must have:  listener 9001 / protocol websockets  (see broker/mosquitto.conf)
  const client = mqtt.connect('ws://192.168.1.10:9001', { username: 'dashboard', password: '***' });
  client.on('connect', () => client.subscribe('kfs/farm/+/telemetry'));
  client.on('message', (topic, payload) => {
    const node = topic.split('/')[2];
    const d = JSON.parse(payload.toString());
    if (node !== 'greenhouse_01' || d.soil_moisture_pct == null) return;
    document.getElementById('soil').textContent = d.soil_moisture_pct.toFixed(0) + ' %';
    document.getElementById('state').textContent = d.soil_moisture_pct < 30 ? 'جاف — يلزم الري' : 'مناسب';
  });
  client.on('error', e => console.error(e));
</script>

⚠️ مستخدم المتصفح يجب أن تكون صلاحياته قراءة فقط (ACL) — أي شخص يستطيع رؤية كلمة السر في كود الصفحة. الأوامر تبقى عبر Flask API بتسجيل دخول.