faction_war_dispatch_bot/static/dashboard.js

// dashboard.js

const friendlyMembers = new Map();
const enemyMembers = new Map();

const friendlyContainer = document.getElementById("friendly-container");
const enemyContainer = document.getElementById("enemy-container");

function createMemberCard(member) {
    const card = document.createElement("div");
    card.classList.add("member-card");
    card.dataset.id = member.id;

    // Clear innerHTML, create structured divs
    const nameDiv = document.createElement("div");
    nameDiv.classList.add("name");
    nameDiv.textContent = member.name;

    const statsDiv = document.createElement("div");
    statsDiv.classList.add("stats");
    statsDiv.innerHTML = `
        Level: ${member.level}<br>
        Estimate: ${member.estimate}<br>
        Status: <span class="status-text">${member.status || "Unknown"}</span>
    `;

    card.appendChild(nameDiv);
    card.appendChild(statsDiv);

    // Store reference to DOM element
    member.domElement = card;

    // Make card draggable
    card.draggable = true;
    card.addEventListener("dragstart", e => {
        e.dataTransfer.setData("text/plain", member.id);
    });

    // Set initial status color
    updateStatusColor(member);

    return card;
}

function updateStatusColor(member) {
    const statusSpan = member.domElement.querySelector(".status-text");
    statusSpan.classList.remove("status-ok", "status-traveling", "status-hospitalized");

    if (!member.status) return;

    const s = member.status.toLowerCase();
    if (s === "okay") statusSpan.classList.add("status-ok");
    else if (s === "traveling" || s === "abroad") statusSpan.classList.add("status-traveling");
    else if (s === "hospitalized") statusSpan.classList.add("status-hospitalized");
}

async function loadMembers(faction) {
    const url = faction === "friendly" ? "/api/friendly_members" : "/api/enemy_members";
    const response = await fetch(url);
    const members = await response.json();

    const container = faction === "friendly" ? friendlyContainer : enemyContainer;
    const map = faction === "friendly" ? friendlyMembers : enemyMembers;

    container.innerHTML = "";
    map.clear();

    members.forEach(m => {
        if (!m.status) m.status = "Unknown";
        const card = createMemberCard(m);
        map.set(m.id, m);
        container.appendChild(card);
    });

    refreshStatus(faction);
}

async function refreshStatus(faction) {
    const url = faction === "friendly" ? "/api/friendly_status" : "/api/enemy_status";
    const map = faction === "friendly" ? friendlyMembers : enemyMembers;

    try {
        const response = await fetch(url);
        const statusData = await response.json();

        Object.keys(statusData).forEach(id => {
            const member = map.get(parseInt(id));
            if (!member) return;
            member.status = statusData[id].status;

            // Update DOM
            const statusSpan = member.domElement.querySelector(".status-text");
            statusSpan.textContent = member.status;

            // Apply correct color class
            updateStatusColor(member);
        });
    } catch (err) {
        console.error("Failed to refresh status:", err);
    }
}

async function populateFriendly() {
    const id = parseInt(document.getElementById("friendly-id").value);
    if (!id) return alert("Enter a valid faction ID!");

    await fetch("/api/populate_friendly", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ faction_id: id, interval: 0 })
    });

    loadMembers("friendly");
}

async function populateEnemy() {
    const id = parseInt(document.getElementById("enemy-id").value);
    if (!id) return alert("Enter a valid faction ID!");

    await fetch("/api/populate_enemy", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ faction_id: id, interval: 0 })
    });

    loadMembers("enemy");
}

async function startFriendlyStatus() {
    const id = parseInt(document.getElementById("friendly-id").value);
    const interval = parseInt(document.getElementById("refresh-interval").value) || 10;

    await fetch("/api/start_friendly_status", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ faction_id: id, interval })
    });

    setInterval(() => refreshStatus("friendly"), interval * 1000);
}

async function startEnemyStatus() {
    const id = parseInt(document.getElementById("enemy-id").value);
    const interval = parseInt(document.getElementById("refresh-interval").value) || 10;

    await fetch("/api/start_enemy_status", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ faction_id: id, interval })
    });

    setInterval(() => refreshStatus("enemy"), interval * 1000);
}

document.getElementById("friendly-populate-btn").addEventListener("click", populateFriendly);
document.getElementById("enemy-populate-btn").addEventListener("click", populateEnemy);
document.getElementById("friendly-status-btn").addEventListener("click", startFriendlyStatus);
document.getElementById("enemy-status-btn").addEventListener("click", startEnemyStatus);