<!doctype html>
<html lang="en">
<head>
<title>Tim's Language Helper</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style>
    table.main, th, td.col_ctl, td.col_meaning {
        border: 1px solid red;
        border-collapse: collapse;
        padding:5px;
    }
    td.col_meaning {
        width:850px;
    }
    td.col_word {
        border-top: 1px solid red;
        border-bottom: 1px solid red;
        border-left: 1px solid red;
        border-collapse: collapse;
    }

    td.col_meaning_btn {
        border-top: 1px solid red;
        border-bottom: 1px solid red;
        border-right: 1px solid red;
        border-collapse: collapse;
    }
    table.meaning, td.meaning {
        border: none;
        border-collapse: collapse;
    }

    p.debug {
        display: none;
    }
    div.footer {
        display: none;
    }
    
    div.cover {
     position: fixed;
     left: 0px;
     top: 0px;
     width: 100%;
     height:100%;
     background: rgba(100, 255, 255, 0.3);
     z-index: 1;
     display: none;
    }
    div.word_input, div.meaning_input{
     position: relative;
     left: 100px;
     top: 200px;
     opacity: 1;
    }
    table.word_input, table.meaning_input {
        padding: 50px;
        border: 2px solid red;
        background-color: white;
    }
    .part_of_speech {
        color:gray;
    }
    
    .i_meaning {
        display: none;
    }
    
    .slt_pos {
        display: none;
    }
    
    .cnf_img {
        display: none;
    }

</style>
<script>

// global variables
g_from_language = ""
g_from_language_name = ""
g_to_language = ""
g_to_language_name = ""

    function validate_selection() {
        
        error_text = ""
        
        // validate the selection of from and to languages is okay
        
        // set language in global variable for other functions
        slt_frm = document.getElementById("slt_from_language")
        g_from_language = slt_frm.options[slt_frm.options.selectedIndex].value
        g_from_language_name = slt_frm.options[slt_frm.options.selectedIndex].text
        
        slt_to = document.getElementById("slt_to_language")
        g_to_language = slt_to.options[slt_to.options.selectedIndex].value 
        g_to_language_name = slt_to.options[slt_to.options.selectedIndex].text
        
        if (g_from_language == '0') {
            error_text += "From language not selected\n"
        }
        if (g_to_language == '0') {
            error_text += "To language not selected\n"
        }
        if (g_from_language == g_to_language) {
            error_text += "From language and To language must not be same\n"
        }
        return error_text
    }

    function show_words() {

        // validate the selection of from and to languages is okay
        error_text = validate_selection()

        if (error_text == "") {
            getWords(g_from_language, g_to_language)
        } else {
            alert("Error found: " + error_text) 
        }

    }
    
    // AJAX request to get word list
    function getWords(from_language, to_language) {
        const xhttp = new XMLHttpRequest();
        xhttp.onload = function() {
            //document.getElementById("words").innerHTML = this.responseText;
            display_word_list(this.responseText)
        }
        request = "get_words_json.php?from_language=" + from_language + "&to_language=" + to_language
        xhttp.open("GET", request, true);
        xhttp.send();
    }

    // show imput field to add additional meamimg
    function show_add_meaning() {
        id_bits = event.target.id.split("_")
        if (id_bits.length != 3) {
            alert("invalid id on button:" + event.target.id)
            return
        }
        document.getElementById("i_fw_" + id_bits[2] + "_new").style.display = "block"
    }

    // hide screen to allow user to add word
    function hide_add_meaning() {
        document.getElementById("meaning_input_div").style.display = "none"
    }
    
    
     function edit_meaning(event) {
        alert("edit meaning:" + event.target.id)
    }

    function new_meaning(event) {
        // show dropdown for part of speech and confirmaton button when input field clicked
        document.getElementById("slt_" + event.target.id).style.display = "block"       
        document.getElementById("cnf_" + event.target.id).style.display = "block"
    }

    function confirm_meaning(event) {
        cnf_id = event.target.id
        bits = cnf_id.split("_")
        inp_id = cnf_id.substr(4)
        meaning = document.getElementById(inp_id).value
        slt_pos = document.getElementById("slt_" + inp_id)
        part_of_speech_id = slt_pos.options[slt_pos.options.selectedIndex].value
        add_meaning(bits[3], meaning, part_of_speech_id)
    }

    // AJAX request to add meaning to word
    function add_meaning(from_word_id, meaning, part_of_speech_id) {

        if (meaning.trim() == "") {
            alert("Error: Meaning cannot be blank")
        } else {
            const xhttp = new XMLHttpRequest();
            xhttp.onload = function() {
                //alert(this.responseText)
                result = JSON.parse(this.responseText)
            }
            request = "add_meaning.php?from_word_id=" + from_word_id + "&to_word=" + meaning + "&to_word_lang=" + g_to_language + "&part_of_speech_id=" + part_of_speech_id
            xhttp.open("GET", request, true);
            xhttp.send();
        }
    }
    
    // show screen to allow user to add word (pops up input fields and protects rest of screen)
    function show_add_word() {
        // validate the selection of from and to languages is okay
        error_text = validate_selection()

        if (error_text == "") {
        document.getElementById("word_input_lang").innerHTML = "Enter new " + g_from_language_name + " word - check keyboard matches...</b>"
        document.getElementById("word_input_div").style.display = "block"
        } else {
            alert("Error found: " + error_text) 
        }
    }

    // hide the add word screen 
    function hide_add_word() {
        document.getElementById("word_input_div").style.display = "none"
    }

    // AJAX request to add word
    function add_word() {
        word = document.getElementById("i_word").value
        //alert("word entered is: " + word)
        if (word.trim() == "") {
            document.getElementById("message").innerHTML = "Error: Word cannot be blank"
        } else {
            const xhttp = new XMLHttpRequest();
            xhttp.onload = function() {
                result = JSON.parse(this.responseText)
                document.getElementById("message").innerHTML = result.word.status;
            }
            request = "add_word.php?word=" + word + "&language=" + g_from_language
            xhttp.open("GET", request, true);
            xhttp.send();
        }
    }

    function display_word_list(word_list_json) {
        word_list = JSON.parse(word_list_json)
        const work_table = document.createDocumentFragment();
        const t = document.createElement('table');
        t.id = "word_table"
        t.className = "main"
            row = document.createElement('tr');
        cell = document.createElement('th')
        cell.className = "colhdr_ctl"
        row.appendChild(cell)

        cell = document.createElement('th')
        cell.className = "colhdr_word"
        cell.textContent = "Word (" + g_from_language_name + ")"
        row.appendChild(cell)

        cell = document.createElement('th')
        cell.className = "colhdr_add_meaning"
        row.appendChild(cell)
        
        cell = document.createElement('th')
        cell.className = "colhdr_meaning"
        cell.textContent = "Meaning (" + g_to_language_name + ")"
        row.appendChild(cell)
        
        t.appendChild(row)
        
        for(i = 0; i < word_list.words.length; i++) {
            var cells = new Array()
            w = word_list.words[i]
            row = document.createElement('tr');

            // create 1st cell for control button
            x = cells.push(document.createElement('td')) - 1;
            cells[x].className = "col_ctl"
            btn = document.createElement('button')
            btn.textContent = "?"
            btn.id = "fw_" + w.id + "_" + w.word_language;
            cells[x].appendChild(btn)
            
            // create 2nd cell for word value
            x = cells.push(document.createElement('td')) - 1;
            cells[x].id = "w_" + w.word_id
            cells[x].className = "col_word"
            cells[x].innerHTML = w.word;
            
            // create 3rd cell for button to add meaning
            x = cells.push(document.createElement('td')) - 1;
            cells[x].className = "col_meaning_btn"

            // button to add new meaning (only if a meaning already there because if no meaning an input field is provided)
            if (w.meanings.length > 0) {
                btn2 = document.createElement('button')
                btn2.className = "meaning"
                btn2.id = "btn_fw_" + w.word_id
                btn2.addEventListener("click", show_add_meaning)
                btn2.innerHTML = "+"
                cells[x].appendChild(btn2)
            }
            
            // create 4th cell for meanings
            x = cells.push(document.createElement('td')) - 1;
            cells[x].className = "col_meaning"
            t2 = document.createElement('table')
            t2.className = "meaning"
            if (w.meanings.length > 0) {
                //alert("w.meanings.length:=" + w.meanings.length)
                for (y = 0; y < w.meanings.length; y++) {
                    r2 = document.createElement('tr')
                    c1 = document.createElement('td')
                    c1.className = "meaning"
                    
                    txt = ""
                    if (w.meanings[y].part_of_speech_abbr == "-") {
                        txt = w.meanings[y].meaning
                    } else {
                        txt = '<span class="part_of_speech">(' + w.meanings[y].part_of_speech_abbr + ')&nbsp;</span>' + w.meanings[y].meaning
                    }
                    c1.innerHTML = txt
                    
                    c2 = document.createElement('td')
                    c2.className = "meaning"
                    
                    edit_img = document.createElement('img')
                    edit_img.setAttribute("src", "https://img.icons8.com/office/16/edit.png");
                    edit_img.setAttribute("width", "12");
                    edit_img.setAttribute("height", "12");
                    edit_img.setAttribute("alt", "edit");
                    edit_img.id = "btn_fw_" + w.word_id + "_tw_" + w.meanings[y].meaning;
                    edit_img.addEventListener("click", edit_meaning)
                    c2.appendChild(edit_img)

                    r2.appendChild(c1)
                    r2.appendChild(c2)
                    t2.appendChild(r2)
                }
                
                cells[x].appendChild(t2)
            } 
            
            // provide input field for new meaning 
            i2 = document.createElement('input')
            i2.setAttribute("type", "text")
            i2.id = "i_fw_" + w.word_id + "_new"
            if (w.meanings.length > 0) {
                i2.className = "i_meaning"
            }
            i2.addEventListener("click", new_meaning)
            // add hidden dropdown for part of speech
            sltPoS = document.createElement("select")
            sltPoS.id = "slt_i_fw_" + w.word_id + "_new"
            sltPoS.className = "slt_pos"
            sltPoS.innerHTML = '<option value="0">Unspecified</option><option value="1">Noun</option><option value="2">Verb</option><option value="3">Determiner</option><option value="4">Preposition</option><option value="5">Adjective</option><option value="6">Adverb</option><option value="7">Conjunction</option><option value="8">Interjection</option><option value="9">Pronoun</option>'
            // add hidden confirmation button
            cnf = document.createElement('button')
            cnf.innerHTML = "&#x2705;"
            cnf.className = "cnf_img"
            cnf.id = "cnf_i_fw_" + w.word_id + "_new"
            cnf.addEventListener("click", confirm_meaning)
            cells[x].appendChild(i2)
            cells[x].appendChild(sltPoS)
            cells[x].appendChild(cnf)

            
            // add cells to row
            for (x=0; x < cells.length; x++) {
                row.appendChild(cells[x])
            }
            
            t.appendChild(row)
        }
        work_table.appendChild(t);
        e = document.getElementById("words")
        // clear any current words shown
        while (e.hasChildNodes()) {
            e.removeChild(e.firstChild);
        }
        document.getElementById("words").appendChild(work_table);
        document.getElementById("footer").style.display = "block"
    }

</script>
</head>
<body>

<h1>Tim's Language Helper</h1>
<h2>Word Check</h2>

    <br/>From Language: <select id="slt_from_language">
        <option value="0">--- Select ---</option>
        <option value="1">English</option>
        <option value="2">Greek</option>
        <option value="3">French</option>
    </select>
    <br/>To Language: <select id="slt_to_language">
        <option value="0">--- Select ---</option>
        <option value="1">English</option>
        <option value="2">Greek</option>
        <option value="3">French</option>
    </select>
    <br/><button onclick="show_words()">Show Words</button>
    &nbsp;&nbsp;&nbsp;<button onclick="show_add_word()">Add Word</button>

<div id="words"></div>

<!-- Input block usually hidden but when showing blocks input in other parts -->
<div class="cover" id="word_input_div">
    <div class="word_input">
        <table class="word_input">
            <thead>
                <tr>
                    <th id="word_input_lang"></th>
                </tr>
            </thead>
            <tbody>
            <tr>
        <td class="word_input">
            <br/>Enter new word: <input type="text" id="i_word"/>
        <br/><button onclick="add_word()">Add Word</button>
        &nbsp;&nbsp;&nbsp;<button onclick="hide_add_word()">Cancel</button></td>
            </tr>
            <tr>
                <td id="message">Check Keyboard matches Language...</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<div id="footer" class="footer">
    Icons by <a href="https://icons8.com/">Icons8</a>
</div>
</body>
</html>