med/media/templates/media/find_medium.html

{% extends "base.html" %}

{% block content %}
    <form id="form" action="#" onsubmit="searchISBN()">
        <label for="isbn" id="id_isbn_label">ISBN :</label>
        <input type="text" id="isbn" autofocus>
        <input type="hidden" id="old-isbn">
        <input type="submit" id="isbn_search">
        <input type="checkbox" id="mark_as_present" checked onchange="document.getElementById('isbn').focus()" />
        <label for="mark_as_present">Marquer automatiquement comme présent si trouvé et que je cherche par ISBN</label>
    </form>
    <ul id="result"></ul>
{% endblock %}

{% block extrajavascript %}
    <script>
    function markAsPresent(type, id, present=true) {
        let request = new XMLHttpRequest();
        request.open("GET", "/media/mark-as-present/" + type + "/" + id + "/" + (present ? "" : "?absent=1"), true);
        request.onload = function() {
            document.getElementById("isbn").value = document.getElementById("old-isbn").value;
            searchISBN();
        };
        request.send();
    }

    function searchISBN() {
        let isbn = document.getElementById("isbn").value;
        let result_div = document.getElementById("result");
        let markAsPresent = document.getElementById("mark_as_present").checked;

        result_div.innerHTML = "<li id='recap-isbn'>Recherche : " + isbn + "</li>";

        document.getElementById("isbn").value = "";
        document.getElementById("old-isbn").value = isbn;
        document.getElementById("isbn").focus();

        let bd_request = new XMLHttpRequest();
        bd_request.open('GET', '/api/media/bd/?search=' + isbn, true);
        bd_request.onload = function () {
            let data = JSON.parse(this.response);
            data.results.forEach(bd => {
                let present = bd.present;
                if (markAsPresent && isbn === bd.isbn) {
                    present = true;
                    let presentRequest = new XMLHttpRequest();
                    presentRequest.open("GET", "/media/mark-as-present/bd/" + bd.id + "/", true);
                    presentRequest.send();
                }
                result_div.innerHTML += "<li id='bd_" + bd.id + "'>" +
                    "<a href='/database/media/bd/" + bd.id + "/change/'>BD : "
                    + bd.title + (bd.subtitle ? " - " + bd.subtitle : "") + "</a>"
                    + (present ? " (<a class='absent' href='#' onclick=\"markAsPresent('bd', " + bd.id + ", false)\">marquer comme absent</a>)"
                        : " (absent, <a class='present' href='#' onclick=\"markAsPresent('bd', " + bd.id + ")\">marquer comme présent</a>)") + "</li>";
            });
        }
        bd_request.send();

        let manga_request = new XMLHttpRequest();
        manga_request.open('GET', '/api/media/manga/?search=' + isbn, true);
        manga_request.onload = function () {
            let data = JSON.parse(this.response);
            data.results.forEach(manga => {
                let present = manga.present;
                if (markAsPresent && isbn === manga.isbn) {
                    present = true;
                    let presentRequest = new XMLHttpRequest();
                    presentRequest.open("GET", "/media/mark-as-present/manga/" + manga.id + "/", true);
                    presentRequest.send();
                }
                result_div.innerHTML += "<li id='manga_" + manga.id + "'>" +
                    "<a href='/database/media/manga/" + manga.id + "/change/'>Manga : "
                    + manga.title + (manga.subtitle ? " - " + manga.subtitle : "") + "</a>"
                    + (present ? " (<a class='absent' href='#' onclick=\"markAsPresent('manga', " + manga.id + ", false)\">marquer comme absent</a>)"
                        : " (absent, <a class='present' href='#' onclick=\"markAsPresent('manga', " + manga.id + ")\">marquer comme présent</a>)") + "</li>";
            });
        }
        manga_request.send();

        let cd_request = new XMLHttpRequest();
        cd_request.open('GET', '/api/media/cd/?search=' + isbn, true);
        cd_request.onload = function () {
            let data = JSON.parse(this.response);
            data.results.forEach(cd => {
                let present = cd.present;
                result_div.innerHTML += "<li id='cd_" + cd.id + "'>" +
                    "<a href='/database/media/cd/" + cd.id + "/change/'>CD : " + cd.title + "</a>"
                    + (present ? " (<a class='absent' href='#' onclick=\"markAsPresent('cd', " + cd.id + ", false)\">marquer comme absent</a>)"
                        : " (absent, <a class='present' href='#' onclick=\"markAsPresent('cd', " + cd.id + ")\">marquer comme présent</a>)") + "</li>";
            });
        }
        cd_request.send();

        let vinyle_request = new XMLHttpRequest();
        vinyle_request.open('GET', '/api/media/vinyle/?search=' + isbn, true);
        vinyle_request.onload = function () {
            let data = JSON.parse(this.response);
            data.results.forEach(vinyle => {
                let present = markAsPresent || vinyle.present;
                result_div.innerHTML += "<li id='vinyle_" + vinyle.id + "'>" +
                    "<a href='/database/media/vinyle/" + vinyle.id + "/change/'>Vinyle : " + vinyle.title + "</a>"
                    + (present ? " (<a class='absent' href='#' onclick=\"markAsPresent('vinyle', " + vinyle.id + ", false)\">marquer comme absent</a>)"
                        : " (absent, <a class='present' href='#' onclick=\"markAsPresent('vinyle', " + vinyle.id + ")\">marquer comme présent</a>)") + "</li>";
            });
        }
        vinyle_request.send();

        let roman_request = new XMLHttpRequest();
        roman_request.open('GET', '/api/media/roman/?search=' + isbn, true);
        roman_request.onload = function () {
            let data = JSON.parse(this.response);
            data.results.forEach(roman => {
                let present = roman.present;
                if (markAsPresent && isbn === roman.isbn) {
                    present = true;
                    let presentRequest = new XMLHttpRequest();
                    presentRequest.open("GET", "/media/mark-as-present/roman/" + roman.id + "/", true);
                    presentRequest.send();
                }
                result_div.innerHTML += "<li id='roman_" + roman.id + "'>" +
                    "<a href='/database/media/roman/" + roman.id + "/change/'>Roman : " + roman.title + "</a>"
                    + (present ? " (<a class='absent' href='#' onclick=\"markAsPresent('roman', " + roman.id + ", false)\">marquer comme absent</a>)"
                        : " (absent, <a class='present' href='#' onclick=\"markAsPresent('roman', " + roman.id + ")\">marquer comme présent</a>)") + "</li>";
            });
        }
        roman_request.send();

        let future_request = new XMLHttpRequest();
        future_request.open('GET', '/api/media/future/?search=' + isbn, true);
        future_request.onload = function () {
            let data = JSON.parse(this.response);
            data.results.forEach(future => {
                let present = future.present;
                if (markAsPresent && isbn === future.isbn) {
                    present = true;
                    let presentRequest = new XMLHttpRequest();
                    presentRequest.open("GET", "/media/mark-as-present/future/" + bd.id + "/", true);
                    presentRequest.send();
                }
                result_div.innerHTML += "<li id='future_" + future.id + "'>" +
                    "<a href='/database/media/future/" + future.id + "/change/'>Medium non traité : " + future.title + "</a>"
                    + (present ? " (<a class='absent' href='#' onclick=\"markAsPresent('future', " + future.id + ", false)\">marquer comme absent</a>)"
                        : " (absent, <a class='present' href='#' onclick=\"markAsPresent('future', " + future.id + ")\">marquer comme présent</a>)") + "</li>";
            });
        }
        future_request.send();
    }
    </script>
{% endblock %}