modelepwa/MobiParc/js/mobiparc.js

//$(function () {

    // JS s'execute: Retire l'avertissement 'Javascript est requis'
    document.body.classList.remove("nojs");

    if ('serviceWorker' in navigator) {
        console.log("[ServiceWorker] Installe");
        navigator.serviceWorker.register('../sw.js');
    }

    Handlebars.registerHelper('lower', function (options) {
        return options.fn(this).toLowerCase();
    });

    Handlebars.registerHelper('repuri', function (find, replace, options) {
        return encodeURI(options.fn(this).replace(find, replace).toString());
    });

    Handlebars.registerHelper('todate', function (options) {
        var d = options.fn(this);
        var dt = new Date(Number.parseInt(d)*1);
        return dt.toLocaleString();
    });

    Handlebars.registerHelper('timestamp', function (options) {
        return Number.parseInt(options.fn(this));
    });

    Handlebars.registerHelper('if_eq', function (a, opts) {
        var b = localStorage.hasOwnProperty("contact") ? localStorage.getItem("contact"): "";
        if (a === b) // Or === depending on your needs
            return opts.fn(this);
        else
            return opts.inverse(this);
    });

    // Main <div>
    var main = document.getElementsByClassName('main')[0];

    // ???
    var template = Handlebars.compile(document.getElementById(getUrldest()).innerHTML);


    function createGuid() {
        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
            var r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8);
            return v.toString(16);
        });
    }
    function uuidv4() {
        return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
            (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
        )
    }
  
    var contacts;
    function callback(response) {
        contacts = response;
       // localStorage.setItem("contacts", JSON.stringify(response))
    }

    $.ajax({
        url: "data/contacts.json", success: function (result) {
            callback(result);
        }
    });

    try {
        getLocation();
    }
    catch (e) {
        console.log("error loc");
    }
    
    Date.prototype.getWeekNumber = function () {
        var d = new Date(Date.UTC(this.getFullYear(), this.getMonth(), this.getDate()));
        var dayNum = d.getUTCDay() || 7;
        d.setUTCDate(d.getUTCDate() + 4 - dayNum);
        var yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
        return Math.ceil((((d - yearStart) / 86400000) + 1) / 7)
    };

    $('.bt-menu').on('click', 'svg', function () {
        $(this).closest('nav').find('div:not(:first)').toggleClass('sidebar');
    });

    $(document).on('click', '.sidebar', function () {
        $(this).closest('nav').find('div:not(:first)').toggleClass('sidebar');
    });

    //param first

    //suppression

    //gestion offline
    if (navigator.onLine) {
        $(".data-sync").removeAttr("disabled");
    }
    else {
        if (!$(".data-sync").is(":disabled"))
        {
            $(".data-sync").attr("disabled")
        }
    }

    //syncro
    $(".data-sync").on("click", function () {

        var db = open.result;
        var txs = db.transaction("anomalies", "readonly");
        var stores = txs.objectStore("anomalies");
        console.log("post all : ");
        stores.openCursor().onsuccess = function (event) {
            //var data =  { data: event.target.result };
            var cursor = event.target.result;
            if (cursor) {
                //cursor.model = "anomaly";

                cursor.value.model = "anomaly";
                var id = cursor.value.tstamp;
                var posting = $.post("/api/canalbis", { data: JSON.stringify(cursor.value) });

                // Put the results in a div
                posting.done(function (data) {
                    if (data == 'ole') {

                        var tx = db.transaction("anomalies", "readwrite");
                        var store = tx.objectStore("anomalies");
                        store.delete(id).onsuccess = function (evt) {
                            $('.sync-result').append("Sync ok anomalie : " + id + "<br>");
                        };
                    }
                });
                cursor.continue();
            }
            else {
                console.log("end anomalies");
            }


            //$.post("/api/canalbis", { data: JSON.stringify({anomaly: event.target.result}) });
           // main.innerHTML = template(data);
        };


        txs = db.transaction("vannes", "readonly");
        stores = txs.objectStore("vannes");
        console.log("post all : ");
        stores.openCursor().onsuccess = function (event) {
            var cursor = event.target.result;
            if (cursor) {
                //cursor.model = "anomaly";

                cursor.value.model = "valve";
                var id = cursor.value.tstamp;
                var posting = $.post("/api/canalbis", { data: JSON.stringify(cursor.value) });

                // Put the results in a div
                posting.done(function (data) {
                    if (data == 'ole') {

                        var tx = db.transaction("vannes", "readwrite");
                        var store = tx.objectStore("vannes");
                        store.delete(id).onsuccess = function (evt) {
                            $('.sync-result').append("Sync ok vanne : " + id +"<br>");
                        };
                    }
                });
                cursor.continue();
            }
            else {
                console.log("end valve");
            }

            //var data = { data: event.target.result };

            //$.post("/api/canalbis", { data: JSON.stringify({ valve: event.target.result }) });
            // main.innerHTML = template(data);
        };


        txs = db.transaction("interventions", "readonly");
        stores = txs.objectStore("interventions");
        console.log("post all : ");
        //stores.getAll().onsuccess = function (event) {
        stores.openCursor().onsuccess = function (event) {
            var cursor = event.target.result;
            if (cursor) {
                //cursor.model = "anomaly";

                cursor.value.model = "interventions";
                var id = cursor.value.tstamp;
                var posting = $.post("/api/canalbis", { data: JSON.stringify(cursor.value) });

                // Put the results in a div
                posting.done(function (data) {
                    if (data == 'ole') {

                        var tx = db.transaction("interventions", "readwrite");
                        var store = tx.objectStore("interventions");
                        store.delete(id).onsuccess = function (evt) {
                            $('.sync-result').append("Sync ok intervention : " + id + "<br>");
                        };
                    }
                });

                cursor.continue();
            }
            else {
                console.log("end interventions");
            }
        };


        txs = db.transaction("niveaux", "readonly");
        stores = txs.objectStore("niveaux");
        console.log("post all : ");
        //stores.getAll().onsuccess = function (event) {
        stores.openCursor().onsuccess = function (event) {
            var cursor = event.target.result;
            if (cursor) {
                //cursor.model = "anomaly";

                cursor.value.model = "level";
                var id = cursor.value.tstamp;
                var posting = $.post("/api/canalbis", { data: JSON.stringify(cursor.value) });

                // Put the results in a div
                posting.done(function (data) {
                    if (data == 'ole') {
                    
                        var tx = db.transaction("niveaux", "readwrite");
                        var store = tx.objectStore("niveaux");
                        store.delete(id).onsuccess = function (evt) {
                            $('.sync-result').append("Sync ok niveau : " + id + "<br>");
                        };}
                });
               
                cursor.continue();
            }
            else {
                console.log("end level");
            }

            //var data = { data: event.target.result };

            //$.post("/api/canalbis", { data: JSON.stringify({level: event.target.result}) });
            // main.innerHTML = template(data);
        };

        //location.reload();
    })

    $(window).on('hashchange', function () {

        var href = $(this).attr('href');

        $('html, body').animate({ scrollTop: 0 }, 200);

        var urldest = getUrldest();

        template = Handlebars.compile(document.getElementById(urldest).innerHTML);

        try {
            getLocation();
        }
        catch (e) {
            console.log("error loc");
        }

        if (urldest != 'interventions' && urldest != 'contacts') {

            $(".main").empty();
            try {
                var db = open.result;
                var txs = db.transaction(urldest, "readonly");
                var stores = txs.objectStore(urldest);
                console.log("Got all " + urldest + ": ");
                stores.getAll().onsuccess = function (event) {
                    var data = { data: event.target.result };

                    main.innerHTML = template(data);
                };
                //console.log(data);
                // $(".main").html(template({}));
            }
            catch (e) {

                main.innerHTML = template({});
            }

        }

        if (urldest == 'interventions') {

            //$.ajax({
            //    url: "", success: function (result) {
            var contactInter = contacts;
            console.log(contactInter);
                    if (localStorage.hasOwnProperty("contact")) contactInter.intervention = localStorage.getItem("contact");
                    $(".main").html(template(contactInter));


            //    }
            //});


        }


        if (urldest == 'contacts') {

            //$.ajax({
            //    url: "", success: function (result) {

                    $(".main").html(template(contacts));

            //    }
            //});
        }

    });

    var imgdata;
//a finir


    $("body").on("click", ".btn-duplicate", function (event) {
        event.preventDefault();
      
      //  var copie = $('#img-group-1').clone();

        var copie = $('.input-group-img').find('div:first-child').clone();


        var inputlenght = createGuid();  //$('.input-file-img').length + 1;

        var grpId = $(copie).attr('id') +  "-" + inputlenght;

        $(copie).attr('id', grpId);

        console.log(inputlenght);

        var inputName = $(copie).find('.input-file-img').attr('name') + "-" + inputlenght;

        $(copie).find('.input-file-img').val('');

        $(copie).find('.input-file-img').attr('name', inputName);

        var hiddenName = $(copie).find('.hidden-file-img').attr('name') + "-" + inputlenght;

        $(copie).find('.hidden-file-img').attr('name', hiddenName);

        $(copie).find('.hidden-file-img').val('');

        $(copie).find('img').attr('src', '');

        copie.appendTo('.input-group-img');

        var imginputs = document.querySelectorAll('.input-file-img');

        Array.from(imginputs).forEach(img => {
            img.addEventListener('change', handleFileSelect, false);
        });

    });


    $("body").on("click", ".file-del", function (event) {
        event.preventDefault();
        if ($(this).closest('div').attr('id') == 'img-group') {
            $(this).closest('div').find('img').attr('src', '');
            $(this).closest('div').find('.input-file-img').val('');
            $(this).closest('div').find('.hidden-file-img').val('');
        }
        else  $(this).closest('div').remove();

    });

    $("body").on("click", ".intervention-start, .intervention-end", function (event) {


        console.log("intervention");

        var data = new Object();
        data.tstamp = Date.now();
        data.user = JSON.parse(localStorage.getItem("params")).user;
        data.event = $(this).data("type");
        var db = open.result;
        var txs = db.transaction("interventions", "readwrite");
        var stores = txs.objectStore("interventions");
        stores.put(data);

    })

    $("body").on("click", ".data-del", function (event) {

       // console.log($(this).data("id") + " " + $(this).data("type"));
        var id = $(this).data("id");
        var datatype = $(this).data("type");
        //console.log(id + " " + datatype);

        var r = confirm("Supprimer cet élément!");
        if (r == true) {

            var db = open.result;
            var tx = db.transaction(datatype, "readwrite");
            var store = tx.objectStore(datatype);

            store.delete(id).onsuccess = function (evt) {
               // console.log(id + " " + datatype);
                location.reload();
            };
        } 
    });


    $("body").on("click", ".send-message", function (event) {
        event.preventDefault();
        var form = $(this).closest("form");

        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition);
            } else {
                return "Geolocation is not supported by this browser.";
            }
        }

        function showPosition(position) {
            //{ lat: position.coords.latitude, lng : position.coords.longitude };

            $("input[name='lat']:hidden").val(position.coords.latitude);
            $("input[name='lng']:hidden").val(position.coords.longitude);

        }

        var pp = getLocation();

        //var data = form.serializeArray().reduce(function (a, x) { a[x.name] = x.value; return a; }, { tstamp: Date.now(), file: imgdata });

        var data = form.serializeArray().reduce(function (a, x) { a[x.name] = x.value; return a; }, { tstamp: Date.now()});


        var request = indexedDB.open("Contenu", 3);

        request.onerror = function () {
            form.find(".send-result").html("Une erreur c'est produite.");
        };

        request.onsuccess = function () {
            var db = request.result;
            var tx = db.transaction("emails", "readwrite");
            var store = tx.objectStore("emails");
            store.put(data);
            form.find(".send-result").html("Votre message est pris en compte.");
        }

    });


    //$(function () {
    $(".modal-open, .modal-background, .modal-close").click(function () {
        console.log("modal");
        $(".modal-content,.modal-background").toggleClass("active");
        if ($(this).hasClass("modal-close")) location.reload();// $(this).closest("form").find(".send-result").html("");
    });


 
    /* retour haut de page*/
    //document.addEventListener('DOMContentLoaded', function () {
    window.onscroll = function (ev) {
        document.getElementById("cRetour").className = (window.pageYOffset > 100) ? "cVisible" : "cInvisible";
    };
    //});

   

    $('#cRetour').on('click', function () {

        $('html, body').animate({ scrollTop: 0 }, 200);

    });




    $(".main").empty();
    var urldest = getUrldest();
    try{
        var db = open.result;
        var txs = db.transaction(urldest, "readonly");
        var stores = txs.objectStore(urldest);
        console.log("Got all " + urldest + ": ");
        stores.getAll().onsuccess = function (event) {
            var data = { data: event.target.result };

            main.innerHTML = template(data);

        };}
    catch (e) {

        main.innerHTML = template({});
       
        
    }

    
    
   


    $("body").on("click", ".del", function (event) {

        var del = $(this);
        var r = confirm("Supprimer la selection!");
        if (r == true) {

            $(del).prop("disabled",true);

            $(".ui-selected").each(function () {
                var elt = $(this);
                var id = $(elt).data("id");
                var datatype = $(elt).data("type");
                //console.log(id + " " + datatype);
                    var db = open.result;
                    var tx = db.transaction(datatype, "readwrite");
                    var store = tx.objectStore(datatype);
                    store.delete(id).onsuccess = function (evt) {
                        // console.log(id + " " + datatype);
                        $(elt).remove();

                    };

            });

        }
        });

   


///////////////////////});




/**
 * Checks that an element has a non-empty `name` and `value` property.
 * @param  {Element} element  the element to check
 * @return {Bool}             true if the element is an input, false if not
 */
var isValidElement = function isValidElement(element) {
    return element.name && element.value;
};

/**
 * Checks if an element’s value can be saved (e.g. not an unselected checkbox).
 * @param  {Element} element  the element to check
 * @return {Boolean}          true if the value should be added, false if not
 */
var isValidValue = function isValidValue(element) {
    return !['checkbox', 'radio'].includes(element.type) || element.checked;
};

/**
 * Checks if an input is a checkbox, because checkboxes allow multiple values.
 * @param  {Element} element  the element to check
 * @return {Boolean}          true if the element is a checkbox, false if not
 */
var isCheckbox = function isCheckbox(element) {
    return element.type === 'checkbox';
};


//var isHidden = function isHidden(element) {
//    return element.type === 'hidden';
//};

/**
 * Checks if an input is a `select` with the `multiple` attribute.
 * @param  {Element} element  the element to check
 * @return {Boolean}          true if the element is a multiselect, false if not
 */
var isMultiSelect = function isMultiSelect(element) {
    return element.options && element.multiple;
};

/**
 * Retrieves the selected options from a multi-select as an array.
 * @param  {HTMLOptionsCollection} options  the options for the select
 * @return {Array}                          an array of selected option values
 */
var getSelectValues = function getSelectValues(options) {
    return [].reduce.call(options, function (values, option) {
        return option.selected ? values.concat(option.value) : values;
    }, []);
};

/**
 * A more verbose implementation of `formToJSON()` to explain how it works.
 *
 * NOTE: This function is unused, and is only here for the purpose of explaining how
 * reducing form elements works.
 *
 * @param  {HTMLFormControlsCollection} elements  the form elements
 * @return {Object}                               form data as an object literal
 */
var formToJSON_deconstructed = function formToJSON_deconstructed(elements) {

    // This is the function that is called on each element of the array.
    var reducerFunction = function reducerFunction(data, element) {

        // Add the current field to the object.
        data[element.name] = element.value;

        // For the demo only: show each step in the reducer’s progress.
        console.log(JSON.stringify(data));

        return data;
    };

    // This is used as the initial value of `data` in `reducerFunction()`.
    var reducerInitialValue = {};

    // To help visualize what happens, log the inital value, which we know is `{}`.
    console.log('Initial `data` value:', JSON.stringify(reducerInitialValue));

    // Now we reduce by `call`-ing `Array.prototype.reduce()` on `elements`.
    var formData = [].reduce.call(elements, reducerFunction, reducerInitialValue);

    // The result is then returned for use elsewhere.
    return formData;
};

/**
 * Retrieves input data from a form and returns it as a JSON object.
 * @param  {HTMLFormControlsCollection} elements  the form elements
 * @return {Object}                               form data as an object literal
 */
var formToJSON = function formToJSON(elements) {
    return [].reduce.call(elements, function (data, element) {

        // Make sure the element has the required properties and should be added.
        if (isValidElement(element) && isValidValue(element)) {

            /*
             * Some fields allow for more than one value, so we need to check if this
             * is one of those fields and, if so, store the values as an array.
             */
            if (isCheckbox(element)) {
                data[element.name] = (data[element.name] || []).concat(element.value);
            } else if (isMultiSelect(element)) {
                data[element.name] = getSelectValues(element);
            } else {
                data[element.name] = element.value;
            }
        }

        return data;
    }, {});
};



var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB || window.shimIndexedDB;

// Open (or create) the database
var open = indexedDB.open("CanalBis", 3);

// Create the schema
open.onupgradeneeded = function () {
    var db = open.result;
    //creation anomalies
    var store = db.createObjectStore("anomalies", { keyPath: "tstamp" });

    //creation niveaux
    var store = db.createObjectStore("niveaux", { keyPath: "tstamp" });

    //creation vannes
    var store = db.createObjectStore("vannes", { keyPath: "tstamp" });


    //creation interventions
    var store = db.createObjectStore("interventions", { keyPath: "tstamp" });


};



/**
 * A handler function to prevent default submission and run our custom script.
 * @param  {Event} event  the submit event triggered by the user
 * @return {void}
 */

var form;

var handleFormSubmit = function handleFormSubmit(event) {

    // Stop the form from submitting since we’re handling that with AJAX.
    event.preventDefault();

    // Call our function to get the form data.
    var data = formToJSON(form.elements);

    // Demo only: print the form data onscreen as a formatted JSON object.
    var dataContainer = document.getElementsByClassName('results-display')[0];

    // Use `JSON.stringify()` to make the output valid, human-readable JSON.
    dataContainer.textContent = JSON.stringify(data, null, "  ");

    
    // ...this is where we’d actually do something with the form data...


    if ($(form).hasClass("param")) {
        localStorage.setItem("params", JSON.stringify(data));
        //console.log("localstorage");

    }

    if ($(form).hasClass("anomalie")) {
        data.tstamp = Date.now();
        data.user = localStorage.hasOwnProperty("params") ? JSON.parse(localStorage.getItem("params")).user : "";
        
          var db = open.result;
          var txs = db.transaction("anomalies", "readwrite");
          var stores = txs.objectStore("anomalies");
          stores.put(data);


          $(".main").empty();

          console.log("Got all anomalies: ");
          stores.getAll().onsuccess = function (event) {
              var data = { data: event.target.result };
              var template = Handlebars.compile(document.getElementById("anomalies").innerHTML);
              $(".main").html(template(data));
          };

    }


    if ($(form).hasClass("vanne")) {
        data.tstamp = Date.now();
        data.user = JSON.parse(localStorage.getItem("params")).user;
        data.campaign = JSON.parse(localStorage.getItem("params")).year_week;
        var db = open.result;
        var txs = db.transaction("vannes", "readwrite");
        var stores = txs.objectStore("vannes");
        stores.put(data);


        $(".main").empty();

        console.log("Got all vannes: ");
        stores.getAll().onsuccess = function (event) {
            var data = { data: event.target.result };
            var template = Handlebars.compile(document.getElementById("vannes").innerHTML);
            $(".main").html(template(data));
        };
    }


    if ($(form).hasClass("niveau")) {
        data.tstamp = Date.now();
        data.user = JSON.parse(localStorage.getItem("params")).user;
        data.campaign = JSON.parse(localStorage.getItem("params")).year_week;
        var db = open.result;
        var txs = db.transaction("niveaux", "readwrite");
        var stores = txs.objectStore("niveaux");
        stores.put(data);


        $(".main").empty();

        console.log("Got all niveaux: ");
        stores.getAll().onsuccess = function (event) {
            var data = { data: event.target.result };
            var template = Handlebars.compile(document.getElementById("niveaux").innerHTML);
            $(".main").html(template(data));
        };
    }


    console.log(data);

    

};

/*
 * This is where things actually get started. We find the form element using
 * its class name, then attach the `handleFormSubmit()` function to the 
 * `submit` event.
 */


function handleFileSelect(evt) {

    console.log(evt.target.name);

    console.log(evt.target.id);

    var preview = $(this).closest('div').find('.img-preview');

    var hidden = $(this).closest('div').find('.hidden-file-img');

    console.log(evt.target.files);

    var files = evt.target.files; // FileList object
    


    // use the 1st file from the list
    var f = files[0];

    var reader = new FileReader();

    // Closure to capture the file information.
    reader.onload = (function (theFile) {
        return function (e) {

            $(hidden).val( e.target.result); //{ data: e.target.result, name: f.name };
           
            $(preview).attr('src', e.target.result);
        };
    })(f);

    // Read in the image file as a data URL.
    reader.readAsDataURL(f);
    //console.log(reader.readAsDataURL(f))
}



function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
        return "Geolocation is not supported by this browser.";
    }
}

function showPosition(position) {

    $("input[name='coordinates']").val(position.coords.latitude + "," + position.coords.longitude);
    console.log(position.coords);

}

function getUrldest() {

    return (window.location.href.replace("index.html","") == "http://localhost:56343/" ? "index" : window.location.hash.slice(1));

}

new MutationObserver(function (mutations, observer) {

    //gestion des mise element selectable
    $(".selectable > tbody").selectable({
        filter: "tr",
        stop: function () {
            $(".del").removeAttr("disabled");
        }
    });


    $(".select-contact").change(function () {
        console.log("contact");
        var contact = $(this).find("option:selected").val();
        localStorage.setItem("contact", contact);
      
        var result = contacts;

                result.intervention = contact;

                console.log(result);

                var template = Handlebars.compile(document.getElementById("interventions").innerHTML);

                $(".main").html(template(result));
    });


    document.getElementsByClassName('results-display')[0].innerHTML = null;


    if ($(".main").find(".data-form").length){

        form = $(".main").find(".data-form")[0];
   
        form.addEventListener('submit', handleFormSubmit);

        var today = new Date();

        if ($(".main").find("#year_week").length) document.getElementById('year_week').value = today.getFullYear() + "_" + today.getWeekNumber();

        //if ($(".main").find("#imgfile").length) document.getElementById('imgfile').addEventListener('change', handleFileSelect, false);

        //if ($(".input-file-img").length)

          //  document.querySelector('.input-file-img').addEventListener('change', handleFileSelect, false);
        
        //{

    //$(".input-file-img").each(function (index) {
    //    document.querySelector('.input-file-img').addEventListener('change', handleFileSelect, false);

    //        });


        var imginputs = document.querySelectorAll('.input-file-img');

        Array.from(imginputs).forEach(img => {
            img.addEventListener('change', handleFileSelect, false);  });
           

        //}

        if (localStorage.hasOwnProperty('params')) { }
        else {
           // console.log("no local");
            if (!$(form).hasClass("param") && !$(form).hasClass("anomalie")) {
                $(".main .data-form").toggle();
                alert("Vous devez d'abord définir les paramètres de la campagne");
                //console.log("pas param");
            }
        }

    }

    

    //observer.disconnect();

}).observe(document.querySelector('section.main'), { childList: true });

//});