modelepwa/MobiParc/js/mobiparc.js


// 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("activite", "readonly");
    var stores = txs.objectStore("activite");
    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 = "activite";
            var id = cursor.value.tstamp;
            var posting = $.post("/api/mobiparc", { data: JSON.stringify(cursor.value) });

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

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

    };
})
    
// Recharge dynamiquement le contenu HTML à chaque changement d'url
$(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 != 'activite') {

        $(".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);
            };
        }
        catch (e) {
            main.innerHTML = template({});
        }
    }
});

var imgdata;

$("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) {
        $("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()});

    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.");
    }
});

$(".modal-open, .modal-background, .modal-close").click(function () {
    console.log("modal");
    $(".modal-content,.modal-background").toggleClass("active");
    if ($(this).hasClass("modal-close")) location.reload();
});
 
/* retour haut de page*/
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("MobiParc", 3);

// Create the schema
open.onupgradeneeded = function () {
    var db = open.result;
    //creation anomalies
    var store = db.createObjectStore("activite", { 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));
    }

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

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

          console.log("Got all activite: ");
          stores.getAll().onsuccess = function (event) {
              var data = { data: event.target.result };
              var template = Handlebars.compile(document.getElementById("activite").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:62188/" ? "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();

        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");
            }
        }
    }

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