Untitled

let currentMissileDetails;

console.log("bruh")

document.addEventListener('DOMContentLoaded', function () {
    const urlParams = new URLSearchParams(window.location.search);
    const missileName = urlParams.get('name');

    fetchAndDisplayMissileDetails(missileName);
});

async function fetchAndDisplayMissileDetails(missileName) {
    try {
        const response = await fetch(`https://wt-api-wv7h.onrender.com/missiles/${missileName}`);
        const missileDetails = await response.json();
        currentMissileDetails = missileDetails;
        displayMissileDetails(missileDetails);
    } catch (error) {
        console.error('Error fetching missile details:', error);
    }
}

document.addEventListener('DOMContentLoaded', function () {
    var goBackButton = document.getElementById('goBackButton');
    goBackButton.addEventListener('click', function () {
        window.history.back();
    });
});
/* add or remove line wether it exists or not in the current object */


function displayMissileDetails(missileDetails) {
    const missileDetailsContainer = document.getElementById('missileDetails');
    
    let detailsHTML = `<h1>${missileDetails.name}</h1>`;
    
    if (missileDetails.mass) {
        detailsHTML += `<p>Mass: ${missileDetails.mass}</p>`;
    }
    if (missileDetails.guidance) {
        detailsHTML += `<p>Guidance: ${missileDetails.guidance}</p>`;
    }
    if (missileDetails.signal) {
        detailsHTML += `<p>Signal: ${missileDetails.signal}</p>`
    }
    if (missileDetails.aspect) {
        detailsHTML += `<p>Aspect: ${missileDetails.aspect}</p>`;
    }
    if (missileDetails.rearAspectLockRange) {
        detailsHTML += `<p>Lock range(rear-aspect): ${missileDetails.rearAspectLockRange}</p>`
    }
    if (missileDetails.launchRange) {
        detailsHTML += `<p>Launch range: ${missileDetails.launchRange}</p>`;
    }
    if (missileDetails.maxSpeed) {
        detailsHTML += `<p>Maximum Speed: ${missileDetails.maxSpeed}</p>`
    }
    if (missileDetails.maxOverload) {
        detailsHTML += `<p>Maximum overload: ${missileDetails.maxOverload}</p>`
    }
    if (missileDetails.guidanceTime) {
        detailsHTML += `<p>Missile guidance time: ${missileDetails.guidanceTime}</p>`
    }
    if (missileDetails.explosiveMass) {
        detailsHTML += `<p>Explosive Mass: ${missileDetails.explosiveMass}</p>`
    }
    if (missileDetails.guidanceAirToGround) {
        detailsHTML += `<p>Guidance: ${missileDetails.guidanceAirToGround}</p>`
    }
    if(missileDetails.maxSpeedAirToGround) {
        detailsHTML += `<p>Maximum speed: ${missileDetails.maxSpeedAirToGround}</p>`
    }
    if (missileDetails.guidanceTimeAirToGround) {
        detailsHTML += `<p>Missile guidance time: ${missileDetails.guidanceTimeAirToGround}</p>`
    }
    if (missileDetails.firingRange) {
        detailsHTML += `<p>Firing Range: ${missileDetails.firingRange}</p>`
    }
    if (missileDetails.armorPenetration) {
        detailsHTML += `<p>Armour penetration: ${missileDetails.armorPenetration}</p>`
    }

    const editButton = document.createElement('button');
    editButton.textContent = 'Edit';
    editButton.addEventListener('click', enableEditMode);
    missileDetailsContainer.innerHTML = detailsHTML;
    missileDetailsContainer.appendChild(editButton);

}


/* --- This entire idea of creating new input boxes was made by chagpt and it failed ---*/
function enableEditMode() {
    const missileDetailsContainer = document.getElementById('missileDetails');
    missileDetailsContainer.innerHTML = '';

    const inputFieldsContainer = document.createElement('div'); 

    for (const prop in missileDetails) {
        if (missileDetails.hasOwnProperty(prop)) {

            if (prop === '_id' || prop === 'name') {
                continue;
            }

            const label = document.createElement('label');
            label.textContent = prop.charAt(0).toUpperCase() + prop.slice(1);
            const input = document.createElement('input');
            input.type = 'text';
            input.value = missileDetails[prop];
            input.id = `edited${prop}Input`;

            inputFieldsContainer.appendChild(label);
            inputFieldsContainer.appendChild(input);
        }
    }
    const saveChangesButton = document.createElement('button');
    saveChangesButton.textContent = 'Save Changes';
    saveChangesButton.addEventListener('click', saveChanges);
    missileDetailsContainer.appendChild(inputFieldsContainer);
    missileDetailsContainer.appendChild(saveChangesButton);
}
function saveChanges() {
    const missileDetailsContainer = document.getElementById('missileDetails');

    for (const prop in missileDetails) {
        if (missileDetails.hasOwnProperty(prop) && prop !== '_id' && prop !== 'name') {
            const editedValue = document.getElementById(`edited${prop}Input`).value;
            missileDetails[prop] = editedValue;
        }
    }

    fetch(`https://wt-api-wv7h.onrender.com/missiles/${missileDetails._id}`, {
        method: 'PATCH',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(missileDetails),
    })
    .then(response => response.json())
    .then(data => {
        console.log('Success:', data);
        displayMissileDetails(missileDetails);
    })
    .catch(error => {
        console.error('Error:', error);
    });
}