static/script.js

var selectElement = document.getElementById('languages');

// Initialize the variable with the default selected option
var lang = selectElement.value;
var started = false;
var continueExecution = true;
var displayText = {};
var previousquery = "";

// Call the function to fetch the data and save it in a variable
(async () => {
    try {
        const response = await fetch('/static/data/displayText.json');
        displayText = await response.json();
    } catch (error) {
        console.error('Error fetching data:', error);
        return null;
    }
})();

function destruct() {
    document.getElementsByTagName('progress')[0].style.display = "none";
    document.getElementsByTagName('progress')[0].value = 0;

    document.getElementsByClassName('progressMessage')[0].innerHTML = "";
    document.getElementsByClassName('progressMessage')[0].classList.remove("update-progressMessage");

    document.getElementById("map_html").srcdoc = "";

    document.getElementsByClassName("conclusion-container")[0].innerHTML = "<h3>Result:</h3>";
    document.getElementsByClassName("result-container")[0].style.display = "none";

    for (let audio in document.getElementsByTagName('audio')) {
        audio.innerHTML = "";
    }
    started = false;
    previousquery = ""
}

// Add a 'change' event listener to the <select> element
selectElement.addEventListener('change', function () {
    // Update the variable when the selection changes
    lang = selectElement.value;
    destruct();
    // Store the selected language in localStorage
    localStorage.setItem('selectedLanguage', lang);
    var langQueries = "";
    for (let query of displayText[lang]['queries']) {
        langQueries += `<option value="${query}"></option>`;
    }
    document.getElementById("queries").innerHTML = langQueries;

    document.getElementById("user_text").placeholder = displayText[lang]['enter'];
    document.getElementById("submitBtn").innerHTML = displayText[lang]['run'];
    micIcon.src = "/static/assets/micplay.svg";
    document.getElementById("error").innerHTML = "";
    // Log the updated selected option to the console (optional)
    console.log('Selected Option:', lang);

    document.getElementById('user_text').value = "";
    destruct();
});

const user_text = document.getElementById('user_text');
const suggestionBox = document.getElementById('suggestion-box');
let lastInputLength = 0; // Track input length for deletion handling

document.getElementById('checkbox_toggle').addEventListener('change', async function () {
    if (this.checked) {
        const response = await fetch('/start_webcam', {
            method: 'GET',
            headers: { 'Content-Type': 'application/json' }
        });
        interative_mode = true;

        console.log(await response.json());
    } else {
        const response = await fetch('/stop_webcam', {
            method: 'GET',
            headers: { 'Content-Type': 'application/json' }
        });
        interative_mode = false;

        console.log(await response.json());
    }
});

user_text.addEventListener('input', async function () {
    const text = this.value;

    if ((lang != 'english') && text.length > 0) {
        // Handle backspace/deletion:
        if (text.length < lastInputLength) {
            suggestionBox.style.display = 'none'; // Hide suggestions on deletion
            lastInputLength = text.length; // Update tracking
            return; // No need to fetch suggestions again
        }

        // Handle regular input or text growth:
        lastInputLength = text.length; // Update tracking

        try {
            const response = await fetch('/transliterate', {
                method: 'POST',
                body: JSON.stringify({ 'text': text, 'lang': lang }),
                headers: { 'Content-Type': 'application/json' }
            });

            const data = await response.json();
            const suggestions = data.translation;

            if (suggestions.length > 0) {
                suggestionBox.innerHTML = suggestions.map(suggestion =>
                    `<div class="suggestion">${suggestion}</div>`
                ).join('');
                suggestionBox.style.display = 'block'; // Show suggestions
            } else {
                suggestionBox.style.display = 'none'; // Hide suggestions if none found
            }
        } catch (error) {
            console.error(error);
            suggestionBox.style.display = 'none'; // Hide suggestions in case of errors
        }
    } else {
        suggestionBox.style.display = 'none'; // Hide suggestions if empty text or non-Hindi
    }
});

user_text.addEventListener('focus', async function () {
    console.log(document.getElementById('checkbox_toggle').checked);

    if (document.getElementById('checkbox_toggle').checked) {
        const response = await fetch('/start_sign', {
            method: 'GET',
            headers: { 'Content-Type': 'application/json' }
        });

        console.log(await response.json());

        async function fetchTypedText() {
            const response = await fetch('/typed_text', {
                method: 'GET',
                headers: { 'Content-Type': 'application/json' }
            });
            var result = await response.json();
            console.log(result);

            if (result['typed_text'] != "") {
                user_text.value = result['typed_text'];
            }
        }

        if (interative_mode) {
            setInterval(fetchTypedText, 1000);
        }
    }
});

suggestionBox.addEventListener('click', function (event) {
    const clickedSuggestion = event.target.closest('.suggestion');
    if (clickedSuggestion) {
        user_text.value = clickedSuggestion.textContent;
        suggestionBox.style.display = 'none'; // Hide suggestions after selection
    }
});

function removeChildrens() {
    document.getElementsByTagName('progress')[0].style.display = "none";
    document.getElementById("myForm").removeChild(document.getElementsByClassName('progressMessage')[0]);

    for (let step = 1; step <= 7; step++) {
        document.getElementById("myForm").removeChild(document.getElementById("step" + step));
    }
}

function restoreChildrens() {
    var progressMessage = document.createElement("div");
    progressMessage.className = "progressMessage";
    document.getElementById("myForm").appendChild(progressMessage);

    for (let step = 1; step <= 7; step++) {
        var progressPlayer = document.createElement("audio");
        progressPlayer.id = "step" + step;
        document.getElementById("myForm").appendChild(progressPlayer);
    }
}

function reloadAndRunQuery() {
    // Store the query in localStorage to retain it after the reload
    localStorage.setItem('queryToRun',);

    // Reload the page
    location.reload();
}
async function mapCall(selected_roi_name, lang, start_date, end_date) {
    previousQuery = user_text.value;
    console.log(previousQuery);
    console.log(selected_roi_name, lang, start_date, end_date);
    // Store the query and reload the page
    localStorage.setItem('queryToRun', JSON.stringify({
        selected_roi_name, lang, start_date, end_date
    }));
    localStorage.setItem('previousQuery', previousQuery);
    location.reload();
}

window.onload = async function () {
    // Retrieve stored language from localStorage
    const storedLanguage = localStorage.getItem('selectedLanguage');
    const selectElement = document.getElementById('languages'); // Assuming you have a select element for languages

    if (storedLanguage && selectElement) {
        // Set the stored language as the selected option
        selectElement.value = storedLanguage;
        lang = storedLanguage;  // Update the global 'lang' variable

        // Update the language-specific queries and UI
        var langQueries = "";
        if (displayText[lang] && displayText[lang]['queries']) {
            for (let query of displayText[lang]['queries']) {
                langQueries += `<option value="${query}"></option>`;
            }
            const queriesElement = document.getElementById("queries");
            if (queriesElement) {
                queriesElement.innerHTML = langQueries;
            }
        }

        const userTextElement = document.getElementById("user_text");
        const submitBtnElement = document.getElementById("submitBtn");
        const micIcon = document.getElementById("micIcon"); // Assuming you have an element for mic icon

        if (userTextElement && submitBtnElement && micIcon) {
            userTextElement.placeholder = displayText[lang]['enter'];
            submitBtnElement.innerHTML = displayText[lang]['run'];
            micIcon.src = "/static/assets/micplay.svg";
            document.getElementById("error").innerHTML = "";
        }
    }

    // Check if there's a query stored in localStorage
    const queryToRun = localStorage.getItem('queryToRun');
    const storedQuery = localStorage.getItem('previousQuery');

    if (storedQuery) {
        // Set the stored query as the value of the input tag
        const userTextElement = document.getElementById('user_text');
        if (userTextElement) {
            userTextElement.value = storedQuery;
            localStorage.removeItem('previousQuery');
        }
    }

    if (queryToRun) {
        // Parse the stored query
        const { selected_roi_name, lang, start_date, end_date } = JSON.parse(queryToRun);
        localStorage.removeItem('queryToRun');

        // Run the query with the selected language
        await runQuery(selected_roi_name, lang, start_date, end_date);
    }
}

async function runQuery(selected_roi_name, lang, start_date, end_date) {
    // Clear any previous results or processes
    destruct();

    const loaderElement = document.getElementById('loader');
    if (loaderElement) {
        loaderElement.style.display = 'block';
    }

    // Perform the fetch request
    let res = await fetch('/map', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            'selected_roi_name': selected_roi_name,
            'lang': lang,
            'start_date': start_date,
            'end_date': end_date
        })
    });
    let data = await res.json();

    if (data['status'] === 'ok') {
        document.getElementById('loader').style.display = 'none';
        const progressElement = document.getElementsByTagName('progress')[0];
        if (progressElement && progressElement.style.display === "none") {
            restoreChildrens();
            showProgressBar("");
        }

        const chart_file_path = data['chart_file_path'];
        document.getElementById('loader').style.display = 'none';
        const mapHtmlElement = document.getElementById("map_html");
        if (mapHtmlElement) {
            mapHtmlElement.srcdoc = data['map_html'];
        }

        const conclusionContainer = document.getElementsByClassName("conclusion-container")[0];
        if (conclusionContainer) {
            data['conclusion'].split('. ').forEach((sentence) => {
                let p = document.createElement("p");
                p.innerHTML = sentence + ". ";
                conclusionContainer.appendChild(p);
            });
        }

        // Set the source dynamically using JavaScript
        var source = document.createElement("source");
        source.src = data['conclusion_file_path'];
        source.type = "audio/mp3";

        const audioConclusion = document.getElementById("audioConclusion");
        if (audioConclusion) {
            audioConclusion.appendChild(source);
        }

        previousquery = user_text.value;

        if (chart_file_path !== "") {
            addChart(selected_roi_name, chart_file_path);

            var response = await fetch('/timelapse', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    'selected_roi_name': selected_roi_name
                })
            });

            const timelapse = await response.json();

            const container = document.getElementById('timeLapse');
            if (container) {
                container.src = timelapse['video_thumb_url'];
            }

        }
    } else {
        const progressElement = document.getElementsByTagName('progress')[0];
        if (progressElement && progressElement.style.display !== "none") {
            removeChildrens();
        }
        continueExecution = false;

        if (data['status'] === "") {
            document.getElementById("error").innerHTML = data['error'];
        } else {
            const doyouwant = data['status'];
            var selectionContent = document.getElementById('select-prompt');

            const promptElement = document.getElementById("prompt");
            if (promptElement) {
                promptElement.style.display = "block";

                let index = 0;

                function addCharacter() {
                    if (index < doyouwant.length) {
                        continueExecution = false;
                        selectionContent.innerHTML += doyouwant.charAt(index);
                        index++;
                        setTimeout(addCharacter, 40);
                    } else {
                        const promptContainer = document.getElementsByClassName("prompt-container")[0];
                        if (promptContainer) {
                            promptContainer.style.display = "flex";
                            setTimeout(() => {
                                promptElement.style.display = "none";
                            }, 15000);
                        }
                    }
                }

                addCharacter();

                var source = document.createElement("source");
                source.src = data['conclusion_file_path'];
                source.type = "audio/mp3";

                const doyoumeanElement = document.getElementById("doyoumean");
                if (doyoumeanElement) {
                    doyoumeanElement.appendChild(source);
                    doyoumeanElement.play();
                }

                const yesButton = document.getElementById("yes-button");
                const noButton = document.getElementById("no-button");

                if (yesButton) {
                    yesButton.addEventListener('click', () => {
                        try {
                            promptElement.style.display = "none";
                            mapCall(selected_roi_name, lang, data['conclusion'], end_date);
                        } catch (error) {
                            console.error('An error occurred:', error);
                        }
                    });
                }

                if (noButton) {
                    noButton.addEventListener('click', () => {
                        try {
                            location.reload();
                        } catch (error) {
                            console.error('An error occurred:', error);
                        }
                    });
                }
            }
        }
    }
}


document.addEventListener('DOMContentLoaded', () => {
    const micIcon = document.getElementById('micIcon');
    const submitBtn = document.getElementById('submitBtn');
    let isRecording = false;
    let audio_text = "";

    // Start or stop recording on button click
    micIcon.addEventListener('click', async () => {
        if (isRecording) {
            micIcon.src = "/static/assets/micplay.svg";
            console.log("Recording paused");
        } else {
            micIcon.src = "/static/assets/micpause.svg";
            console.log(lang);

            var source = document.createElement("source");
            source.src = "static/audio/languages/" + lang + "/ask.mp3";
            source.type = "audio/mp3";

            document.getElementById("audioPlayer").appendChild(source);
            document.getElementById("audioPlayer").play();

            console.log("started");
        }

        // isRecording = !isRecording;

        if (!isRecording) {
            isRecording = true;
            document.getElementById("error").innerHTML = "";
        } try {
            const response = await fetch('/startstop', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    'lang': lang,
                    'type_audio': isRecording ? "start" : "stop"
                })
            });

            if (isRecording) {
                const data = await response.json();
                audio_text = data['message'];
                error = data['error'];

                document.getElementById("error").innerHTML = error;

                if (error == "") {
                    user_text.value = audio_text;
                }

                micIcon.src = "/static/assets/micplay.svg";
                isRecording = false;
            }
        } catch (error) {
            micIcon.src = "/static/assets/micplay.svg";
            console.log("paused");
            isRecording = false;

            console.error('Error sending request:', error);
        }
    
    });

    submitBtn.addEventListener('click', async (event) => {
        destruct();
        document.getElementById('loader').style.display = 'block';
        event.preventDefault();
        const user_textElement = document.getElementById("user_text");
        if (!user_textElement) {
            console.error("Element with id 'user_text' not found.");
            document.getElementById("error").innerHTML = "Input field not found.";
            document.getElementById('loader').style.display = 'none';
            return;
        }
        const user_text = user_textElement.value.trim();
        const query = user_text || audio_text;

        if (!query) {

            const errorMessages = {
                english: "Please enter a query.",
                hindi: "कृपया एक प्रश्न दर्ज करें।",
                telugu: "దయచేసి ఒక ప్రశ్న నమోదు చేయండి.",
                malayalam: "ദയവായി ഒരു ചോദ്യം നൽകുക.",
                marathi: "कृपया एक प्रश्न प्रविष्ट करा.",
                tamil: "தயவுசெய்து கேள்வியை உள்ளிடவும்.",
                gujarati: "કૃપા કરીને એક પ્રશ્ન દાખલ કરો.",
                bengali: "দয়া করে একটি প্রশ্ন লিখুন।",
                kannada: "ದಯವಿಟ್ಟು ಒಂದು ಪ್ರಶ್ನೆ ನಮೂದಿಸಿ."
            };

            document.getElementById("error").innerHTML = errorMessages[lang] || errorMessages['en'];
            document.getElementById('loader').style.display = 'none';
            setTimeout(() => {
                location.reload();
             }, 5000);
            return;
        }

        try {
            const formData = new FormData(document.getElementById('myForm'));
            formData.set('lang', lang);
            formData.set('user_text', query); // Ensure that text/audio input is sent

            const response = await fetch('/', {
                method: 'POST',
                body: formData
            });

            const data = await response.json();

            if (data.selection) {

                // Process response data (like date handling, map rendering, etc.)
            if (data.selected_roi_name) {
                const res = await fetch('/date', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        'user_text': query,
                        'lang': lang
                    })
                });

                
                //mapCall(data.selected_roi_name, lang, dateData.start_date, dateData.end_date);
           
                const dateData = await res.json();
                showSelectionPrompt(data,dateData,data.selection);
                var source = document.createElement("source");
                source.src = data['audio_file_path'];
                source.type = "audio/mp3";

                document.getElementById("doyoumean").appendChild(source);
                document.getElementById("doyoumean").play();

            }}
            else{

            if (data.selected_roi_name) {
                const res = await fetch('/date', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({
                        'user_text': query,
                        'lang': lang
                    })
                });
                const dateData = await res.json();
                mapCall(data.selected_roi_name, lang, dateData.start_date, dateData.end_date);
            }
        }    
            

        } catch (error) {
            console.error('Error processing request:', error);
        } finally {
            document.getElementById('loader').style.display = 'none';
        }
    });
});

function showSelectionPrompt(data,dateData,selectionText) {
    const selectionContent = document.getElementById('select-prompt');
    selectionContent.innerHTML = '';

    document.getElementById('loader').style.display = 'none';
    document.getElementById("prompt").style.display = "block";

    let index = 0;

    

    function addCharacter() {
        if (index < selectionText.length) {
            selectionContent.innerHTML += selectionText.charAt(index);
            index++;
            setTimeout(addCharacter, 40);
        } else {
            document.getElementsByClassName("prompt-container")[0].style.display = "flex";
            
            setTimeout(() => {
                document.getElementById("prompt").style.display = "none";
                const errorMessages = {
                    english: "Please provide input.",
                    hindi: "कृपया इनपुट प्रदान करें।",
                    telugu: "దయచేసి ఇన్‌పుట్ ఇవ్వండి.",
                    malayalam: "ദയവായി ഇൻപുട്ട് നൽകുക.",
                    marathi: "कृपया इनपुट द्या.",
                    tamil: "தயவுசெய்து உள்ளீட்டை வழங்கவும்.",
                    gujarati: "કૃપા કરીને ઇનપુટ પ્રદાન કરો.",
                    bengali: "দয়া করে ইনপুট দিন।",
                    kannada: "ದಯವಿಟ್ಟು ಇನ್‌ಪುಟ್ ಒದಗಿಸಿ."
                };
                document.getElementById("error").innerHTML = errorMessages[lang] || errorMessages['en'];
                
                setTimeout(() => {
                    location.reload();
                 }, 5000);
            }, 15000);

            


        }
    }

    addCharacter();

    document.getElementById("yes-button").addEventListener('click', () => {
        try {
            document.getElementById("prompt").style.display = "none";
        } catch (error) {
            console.error('An error occurred:', error);
        }
        console.log("NRSC")
        mapCall(data.selected_roi_name, lang, dateData.start_date, dateData.end_date);
    });

    document.getElementById("no-button").addEventListener('click', () => {
        try{
            location.reload();
        } catch(error) {
            console.error('An error occurred:', error);
        }
    });


}

function showProgressBar(audio_text) {
    var progressBar = document.getElementsByTagName('progress')[0];
    var progressMessage = document.getElementsByClassName('progressMessage')[0];
    progressMessage.classList.add("update-progressMessage");
    progressBar.style.display = "block";
    progressBar.value = 0;

    var query = user_text.value;

    if (query == "") {
        query = audio_text;
    }

    var steps = [
        { percent: 10, message: displayText[lang]['steps'][0] },
        { percent: 20, message: `${displayText[lang]['query']} ${query}` },
        { percent: 30, message: displayText[lang]['steps'][1] },
        { percent: 40, message: displayText[lang]['steps'][2] },
        { percent: 60, message: displayText[lang]['steps'][3] },
        { percent: 80, message: displayText[lang]['steps'][4] },
        { percent: 100, message: displayText[lang]['steps'][5] }
    ];

    for (let step = 1; step <= 7; step++) {
        var source = document.createElement("source");
        source.src = "/static/audio/languages/" + lang + "/step" + step + ".mp3";
        source.type = "audio/mp3";

        var progressPlayer = document.getElementById("step" + step);
        progressPlayer.appendChild(source);
    }

    var currentStep = 0;

    function updateProgressBar() {
        progressBar.value = steps[currentStep].percent;
        var currentMessage = steps[currentStep].message;
        var index = 0;

        function appendCharacter() {
            if (index < currentMessage.length) {
                document.getElementById("step" + (currentStep + 1)).play();
                progressMessage.innerHTML += currentMessage.charAt(index);
                index++;
                setTimeout(appendCharacter, 30); // Adjust the timeout as needed
            } else {
                progressMessage.innerHTML += "<br/><br/>";
                if (currentStep < steps.length - 1) {
                    document.getElementById("step" + (currentStep + 1)).onended = function () {
                        currentStep++;
                        updateProgressBar();
                    };
                } else {
                    currentStep++;
                }

                if (currentStep == steps.length) {
                    document.getElementById("step" + (currentStep)).onended = function () {
                        document.getElementsByClassName("result-container")[0].style.display = "block";
                        document.getElementById("audioConclusion").play();
                    };
                }
            }
        }

        appendCharacter();
    }
    updateProgressBar();
}

function addChart(selected_roi_name, chart_file_path) {
    async function loadChartData() {
        try {
            const response = await fetch(chart_file_path);
            if (!response.ok) {
                throw new Error(`Failed to fetch chart data: ${response.statusText}`);
            }
            return await response.json();
        } catch (error) {
            console.error('Error loading chart data:', error);
            return null;
        }
    }

    async function createChart() {
        try {
            const chartData = await loadChartData();
            if (!chartData) {
                throw new Error('Failed to load chart data.');
            }

            const dates = chartData.map(item => moment(item.Date).format('MMM DD, YYYY'));
            const waterPixelCounts = chartData.map(item => item['Water Pixel Count']);

            document.getElementById('myChart').style.display = "block";

            // Create chart
            const ctx = document.getElementById('myChart').getContext('2d');
            Chart.defaults.global.defaultFontColor = 'white';
            const myChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: dates,
                    datasets: [{
                        label: `Water Spread of ${selected_roi_name}`,
                        data: waterPixelCounts,
                        backgroundColor: waterPixelCounts.map(count => {
                            if (count === Math.min(...waterPixelCounts)) {
                                return 'rgba(255, 0, 0, 1)'; // Red for minimum
                            } else if (count === Math.max(...waterPixelCounts)) {
                                return 'rgba(0, 255, 0, 1)'; // Green for maximum
                            } else {
                                return 'rgba(255, 165, 0, 0.2)';
                            }
                        }),
                        borderColor: '#FFA500',
                        borderWidth: 2
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false, // Disable default aspect ratio to allow custom width and height
                    maxWidth: 900,
                    maxHeight: 600,
                    scales: {
                        yAxes: [{
                            scaleLabel: {
                                display: true,
                                labelString: "Water Area in square kilometers",
                                fontColor: "#FFFFFF"
                            },
                            ticks: {
                                fontColor: "#FFFFFF"
                            }
                        }],
                        xAxes: [{
                            scaleLabel: {
                                display: true,
                                labelString: "Date",
                                fontColor: "#FFFFFF"
                            },
                            ticks: {
                                fontColor: "#FFFFFF"
                            }
                        }]
                    },
                    plugins: {
                        legend: {
                            labels: {
                                font: {
                                    size: 12
                                },
                                labelColor: "#FFFFFF"
                            }
                        }
                    }
                }
            });

        } catch (error) {
            console.error('Error creating chart:', error);
        }
    }

    createChart();
}