aswi2021mr-proper-gitlab/application/view/modals/detailModal.html @ d5eddb45

<div id="detail-modal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Detail záznamu</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <div class="container">
                    <div class="row">
                        <div class="col-xs-12 col-sm-4">
                            <label>Lemma:</label>
                        </div>
                        <div class="col-xs-12 col-sm-8">
                            <i id="lemma"></i>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12 col-sm-4">
                            <label>Slovní tvar:</label>
                        </div>
                        <div class="col-xs-12 col-sm-8">
                            <i id="word"></i>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12 col-sm-4">
                            <label>Datum přídání:</label>
                        </div>
                        <div class="col-xs-12 col-sm-8">
                            <i id="date"></i>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12 col-sm-4">
                            <label>Poznámka 1:</label>
                        </div>
                        <div class="col-xs-12 col-sm-8">
                            <i id="description"></i>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12 col-sm-4">
                            <label>Poznámka 2:</label>
                        </div>
                        <div class="col-xs-12 col-sm-8">
                            <i id="description2"></i>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12 col-sm-4">
                            <label>Poznámka 3:</label>
                        </div>
                        <div class="col-xs-12 col-sm-8">
                            <i id="description3"></i>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12 col-sm-4">
                            <label>Rukopisy:</label>
                        </div>
                        <div class="col-xs-12 col-sm-8">
                            <i id="manuscript"></i>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12 col-sm-4">
                            <label>Pozice:</label>
                        </div>
                        <div class="col-xs-12 col-sm-8">
                            <i id="position"></i>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12 col-sm-4">
                            <label>Vlastní jméno:</label>
                        </div>
                        <div class="col-xs-12 col-sm-8">
                            <i id="namedentity"></i>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12 col-sm-4">
                            <label>Kontext:</label>
                        </div>
                        <div class="col-xs-12 col-sm-8">
                            <i id="context"></i>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12 col-sm-4">
                            <label>Slovní druh:</label>
                        </div>
                        <div class="col-xs-12 col-sm-8">
                            <i id="wordclass"></i>
                        </div>
                    </div>

                    <!-- conditional render -->
                    <div class="row" id="person-wrapper">
                        <div class="col-xs-12 col-sm-4">
                            <label>Osoba:</label>
                        </div>
                        <div class="col-xs-12 col-sm-8">
                            <i id="person"></i>
                        </div>
                    </div>
                    <div class="row" id="case-wrapper">
                        <div class="col-xs-12 col-sm-4">
                            <label>Pád:</label>
                        </div>
                        <div class="col-xs-12 col-sm-8">
                            <i id="case"></i>
                        </div>
                    </div>
                    <div class="row" id="countability-wrapper">
                        <div class="col-xs-12 col-sm-4">
                            <label>Číslo:</label>
                        </div>
                        <div class="col-xs-12 col-sm-8">
                            <i id="countability"></i>
                        </div>
                    </div>
                    <div class="row" id="mood-wrapper">
                        <div class="col-xs-12 col-sm-4">
                            <label>Způsob:</label>
                        </div>
                        <div class="col-xs-12 col-sm-8">
                            <i id="mood"></i>
                        </div>
                    </div>
                    <div class="row" id="time-wrapper">
                        <div class="col-xs-12 col-sm-4">
                            <label>Čas:</label>
                        </div>
                        <div class="col-xs-12 col-sm-8">
                            <i id="time"></i>
                        </div>
                    </div>
                    <div class="row" id="v-type-wrapper">
                        <div class="col-xs-12 col-sm-4">
                            <label>Slovesný rod:</label>
                        </div>
                        <div class="col-xs-12 col-sm-8">
                            <i id="v-type"></i>
                        </div>
                    </div>
                    <div class="row" id="vid-wrapper">
                        <div class="col-xs-12 col-sm-4">
                            <label>Slovesný vid:</label>
                        </div>
                        <div class="col-xs-12 col-sm-8">
                            <i id="vid"></i>
                        </div>
                    </div>
                    <div class="row" id="irregular-wrapper">
                        <div class="col-xs-12 col-sm-4">
                            <label>Neurčitý slovesný tvar:</label>
                        </div>
                        <div class="col-xs-12 col-sm-8">
                            <i id="irregular"></i>
                        </div>
                    </div>
                    <div class="row" id="gender-wrapper">
                        <div class="col-xs-12 col-sm-4">
                            <label>Rod:</label>
                        </div>
                        <div class="col-xs-12 col-sm-8">
                            <i id="gender"></i>
                        </div>
                    </div>
                    <div class="row" id="shape-wrapper">
                        <div class="col-xs-12 col-sm-4">
                            <label>Tvar:</label>
                        </div>
                        <div class="col-xs-12 col-sm-8">
                            <i id="shape"></i>
                        </div>
                    </div>
                    <div class="row" id="grade-wrapper">
                        <div class="col-xs-12 col-sm-4">
                            <label>Stupeň:</label>
                        </div>
                        <div class="col-xs-12 col-sm-8">
                            <i id="grade"></i>
                        </div>
                    </div>
                    <div class="row" id="type-wrapper">
                        <div class="col-xs-12 col-sm-4">
                            <label>Druh:</label>
                        </div>
                        <div class="col-xs-12 col-sm-8">
                            <i id="type"></i>
                        </div>
                    </div>
                    <div class="row" id="k-type-wrapper">
                        <div class="col-xs-12 col-sm-4">
                            <label>Typ:</label>
                        </div>
                        <div class="col-xs-12 col-sm-8">
                            <i id="k-type"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Zavřít</button>
            </div>
        </div>
    </div>
</div>

<script>
    $('#detail-modal').on('show.bs.modal', function (event) {
        const button = $(event.relatedTarget);
        const pseudo_id = button.data('pseudo-id') ;// Extract info from data-* attributes

        const data_obj = data[pseudo_id];
        let modal = $(this);

        modal.find('#word').text(data_obj.word);
        modal.find('#lemma').text(data_obj.lemma.lemma);
        modal.find('#description').text(data_obj.description === ""? "-" :  data_obj.description);
        modal.find('#description2').text(data_obj.description2 === ""? "-" :  data_obj.description2);
        modal.find('#description3').text(data_obj.description3 === ""? "-" :  data_obj.description3);
        modal.find('#date').text(convertDate(data_obj.date));
        modal.find('#manuscript').text(renderManuscript(data_obj.manuscript, false));
        modal.find('#position').text(data_obj.position1 + (data_obj.position2 ? ("/" + data_obj.position2 + (data_obj.positiondetail ? "/"  + data_obj.positiondetail :  "")) : ""));
        modal.find('#namedentity').text(data_obj.namedentity === 1? "ano" :  "ne");
        modal.find('#context').text(data_obj.context === ""? "-" :  data_obj.context);

        const morphem = data_obj.tag.tag;
        analyzeMorphem(modal, morphem);
    });

    function analyzeMorphem(modal, morphem) {
        modal.find('#wordclass').text(codeToWordclass[morphem.charAt(0)]);

        let movedNode;
        let beforeNode;
        if(morphem.charAt(0) === 'V') {
            movedNode = document.getElementById("case-wrapper");
            beforeNode = document.getElementById(null);
            movedNode.parentNode.insertBefore(movedNode, beforeNode);
        } else {
            movedNode = document.getElementById("case-wrapper");
            beforeNode = document.getElementById("countability-wrapper");
            movedNode.parentNode.insertBefore(movedNode, beforeNode);
        }

        (morphem.charAt(1) === '-') ? modal.find('#case-wrapper').hide() :
            modal.find('#case-wrapper').show();
        modal.find('#case').text(codeToCase[morphem.charAt(1)]);

        (morphem.charAt(2) === '-') ? modal.find('#countability-wrapper').hide() :
            modal.find('#countability-wrapper').show();
        modal.find('#countability').text(codeToCountability[morphem.charAt(2)]);

        (morphem.charAt(3) === '-') ? modal.find('#gender-wrapper').hide() :
            modal.find('#gender-wrapper').show();
        modal.find('#gender').text(codeToGender[morphem.charAt(3)]);

        (morphem.charAt(4) === '-') ? modal.find('#grade-wrapper').hide() :
            modal.find('#grade-wrapper').show();
        modal.find('#grade').text(codeToGrade[morphem.charAt(4)]);

        (morphem.charAt(5) === '-') ? modal.find('#shape-wrapper').hide() :
            modal.find('#shape-wrapper').show();
        modal.find('#shape').text(codeToShape[morphem.charAt(5)]);

        if(morphem.charAt(7) === '-'){
            modal.find('#k-type-wrapper').hide();
            modal.find('#type-wrapper').hide();
            modal.find('#mood-wrapper').hide();
            modal.find('#irregular-wrapper').hide();
        } else {
            if(morphem.charAt(0) === 'J') {
                modal.find('#mood-wrapper').hide();
                modal.find('#type-wrapper').hide();
                modal.find('#irregular-wrapper').hide();

                modal.find('#k-type-wrapper').show();
                modal.find('#k-type').text(codeToKType[morphem.charAt(7)]);
            } else if(morphem.charAt(0) === 'P') {
                modal.find('#k-type-wrapper').hide();
                modal.find('#mood-wrapper').hide();
                modal.find('#irregular-wrapper').hide();

                modal.find('#type-wrapper').show();
                modal.find('#type').text(codeToType[morphem.charAt(7)]);
            } else if(morphem.charAt(0) === 'V') {
                modal.find('#k-type-wrapper').hide();
                modal.find('#type-wrapper').hide();

                if(codeToMood[morphem.charAt(7)] !== undefined){
                    modal.find('#irregular-wrapper').hide();
                    modal.find('#mood-wrapper').show();
                    modal.find('#mood').text(codeToMood[morphem.charAt(7)]);
                } else {
                    modal.find('#mood-wrapper').hide();
                    modal.find('#irregular-wrapper').show();
                    modal.find('#irregular').text(codeToIrregular[morphem.charAt(7)]);
                }
            } else {
                modal.find('#k-type-wrapper').hide();
                modal.find('#type-wrapper').hide();
                modal.find('#mood-wrapper').hide();
                modal.find('#irregular-wrapper').hide();
            }
        }

        (morphem.charAt(8) === '-') ? modal.find('#person-wrapper').hide() :
            modal.find('#person-wrapper').show();
        modal.find('#person').text(morphem.charAt(8) + ".");

        (morphem.charAt(9) === '-') ? modal.find('#time-wrapper').hide() :
            modal.find('#time-wrapper').show();
        modal.find('#time').text(codeToTime[morphem.charAt(9)]);

        (morphem.charAt(10) === '-') ? modal.find('#v-type-wrapper').hide() :
            modal.find('#v-type-wrapper').show();
        modal.find('#v-type').text(codeToVType[morphem.charAt(10)]);

        (morphem.charAt(11) === '-') ? modal.find('#vid-wrapper').hide() :
            modal.find('#vid-wrapper').show();
        modal.find('#vid').text(codeToVid[morphem.charAt(11)]);
    }

    //CONVERTORS
    function convertDate(date) {
        let newDate = "";
        date = date.replace(" 00:00:00", "");
        let splitDate = date.split("-");

        newDate += splitDate[2] + ". " + splitDate[1] + ". " + splitDate[0];
        return newDate;
    }

    const codeToWordclass = {
        "N": "substantivum",
        "A": "adjektivum",
        "P": "pronomen",
        "C": "numeralie",
        "V": "verbum",
        "D": "adverbium",
        "R": "prepozice",
        "J": "konjunkce",
        "I": "interjekce",
        "T": "partikule"
    };

    const wordclassToNum = {
        "N": 0,
        "A": 1,
        "P": 2,
        "C": 3,
        "V": 4,
        "D": 5,
        "R": 6,
        "J": 7,
        "I": 8,
        "T": 9
    };

    const codeToManuscript = {
        "0":  "rukopis Vídeňský",
        "1":  "zlomky Hanušovy",
        "2":  "zlomky Hradecké",
        "3":  "rukopis Cambridžský",
        "4":  "rukopis Františkánský",
        "5":  "zlomek Olomoucký",
        "6":  "fragment Strahovský",
        "7":  "zlomky Klementinsko-Křižovnické",
        "8":  "zlomky Mnichovské",
        "9":  "rukopis Lobkovický",
        "10": "rukopis Pelclův",
        "11": "rukopis Cerronský",
        "12": "rukopis Fürstenberský",
        "13": "rukopis Zebererův",
        "14": "vydání Pavla Ješína z Bezdězi, Praha 1620",
        "15": "básně připsané při Pulkavově kronice v rukopisu Litoměřickém",
    };

    const codeToManuscriptShort = {
        "0":  "V",
        "1":  "H",
        "2":  "Hr",
        "3":  "C",
        "4":  "F",
        "5":  "O",
        "6":  "S",
        "7":  "K",
        "8":  "M",
        "9":  "L",
        "10": "P",
        "11": "Cr",
        "12": "Fs",
        "13": "Z",
        "14": "Js",
        "15": "Pl",
    };

    const codeToCase = {
        "1": "nominativ",
        "2": "genitiv",
        "3": "dativ",
        "4": "akuzativ",
        "5": "vokativ",
        "6": "lokál",
        "7": "instrumentál"
    };

    const codeToCountability = {
        "S": "singulár",
        "P": "plurál",
        "D": "duál"
    };

    const codeToGender = {
            "M": "maskulinum",
            "F": "femininum",
            "N": "neutrum"
    };

    const codeToGrade = {
        "1": "pozitiv",
        "2": "komparativ",
        "3": "superlativ"
    };

    const codeToKType = {
        "V": "větná",
        "C": "členská",
        "N": "navazovací",
        "P": "spojení s přechodníkem"
    };

    const codeToShape = {
        "C": "složený",
        "N": "jmenný"
    };

    const codeToVid = {
        "P": "perfektivum",
        "I": "imperfektivum",
    };

    const codeToVType = {
        "A": "aktivum",
        "P": "pasivum",
    };

    const codeToTime= {
        "P": "prézens",
        "A": "aorist",
        "R": "préteritum",
        "I": "imperfektum",
        "H": "plusquamperfektum",
        "F": "futurum"
    };

    const codeToType = {
        "P": "posesivum",
        "S": "personale",
        "D": "demonstrativum",
        "Q": "interogativum",
        "J": "relativum",
        "Z": "indefinitum",
        "L": "limitativum",
        "W": "negativum",
    };

    const codeToMood = {
        "d": "indikativ",
        "i": "imperativ",
        "c": "kondicionál"
    };

    const codeToIrregular = {
        "f": "infinitiv",
        "S": "supinum",
        "e": "přech. přítomný",
        "m": "přech. minulý",
        "A": "part. perf. akt.",
        "P": "part. perf. akt."
    };
</script>