modelepwa/MobiParc/js/mobiparc.js


//### Helpers handlebars personnalisés
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);
});

// ### References

// ref a la section main
var main = document.getElementsByClassName('main')[0];


//### Initialisation

// JS s'execute: Retire l'avertissement 'Javascript est requis' (de fait, on sait que JS est actif...)
document.body.classList.remove("nojs");

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

// Nettoie la section main
$(".main").empty();

// Open (or create) the database
var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB || window.shimIndexedDB;
var open = indexedDB.open("MobiParc", 3);

// Create the schema
open.onupgradeneeded = function () {
    var db = open.result;
    var store = db.createObjectStore("activites", { keyPath: "tstamp" });
    console.log("[Activites DB] Cree");
};

// Obtient l'id de la section a afficher en fonction de l'url
function getSectionId() {
    return (window.location.hash.slice(1).length > 0 ? window.location.hash.slice(1) : "index");
};
// Memorise la section en cours
var sectionId = getSectionId();

// compile la page entiere avec handlebars
var template = Handlebars.compile(document.getElementById(sectionId).innerHTML);

// Essaie de peupler la page en cours avec les données de la base (s'il y en a a afficher)
try {
    var db = open.result;
    var txs = db.transaction(sectionId, "readonly");
    var stores = txs.objectStore(sectionId);
    console.log("Got all " + sectionId + ": ");
    stores.getAll().onsuccess = function (event) {
        var data = { data: event.target.result };
        main.innerHTML = template(data);
    };
}
catch (e) {
    main.innerHTML = template({});
}

//######### MAIN  ###############

// ### Interactions

// Affiche ou masque la sidebar
$('.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');
});

// Affiche ou masque le bouton de sync
if (navigator.onLine) {
    $(".data-sync").removeAttr("disabled");
}
else {
    if (!$(".data-sync").is(":disabled"))
    {
        $(".data-sync").attr("disabled")
    }
}

/* 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);
});

// Gere l'affichage des classes modales
$(".modal-open, .modal-background, .modal-close").click(function () {
    $(".modal-content,.modal-background").toggleClass("active");
    if ($(this).hasClass("modal-close")) location.reload();
});

// Recharge dynamiquement le contenu HTML à chaque changement d'url
$(window).on('hashchange', function () {

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

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

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

    if (sectionId != 'activites') {

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

                main.innerHTML = template(data);
            };
        }
        catch (e) {
            main.innerHTML = template({});
        }
    }
});

var addSubmitHandler = function() {
    if ($(".main").find(".data-form").length) {
        form = $(".main").find(".data-form")[0];
        form.addEventListener('submit', handleFormSubmit);
        console.log("handler added");
    }
};
addSubmitHandler();

// Observeur: suit les modifications apportees a la section main
// >> Infos: https://davidwalsh.name/mutationobserver-api
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
var mainsection = document.querySelector("section.main");
var observer = new MutationObserver(function (mutations) {
    //gestion des mise element selectable
    $(".selectable > tbody").selectable({
        filter: "tr",
        stop: function () {
            $(".del").removeAttr("disabled");
        }
    });

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

});

// Notify me of everything!
var observerConfig = {
    attributes: true,
    childList: true,
    characterData: true
};
target = document.querySelector("section.main");
observer.observe(target, observerConfig);


// Intercepte la soumision de formulaires
if ($(".main").find(".data-form").length) {
    var form = $(".main").find(".data-form")[0];

    $(form).on("submit", function (event) { // on requires jquery 1.7+
        handleFormSubmit(event);
    });
}

var form;
var handleFormSubmit = function handleFormSubmit(event) {
    console.log("handle submit");

    // 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, "  ");

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

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

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

// Gere le clic sur un bouton supprimer
$("body").on("click", ".del", function (event) {

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

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

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

// ### Synchronisation des données

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

    };
})



//###### TOOLBOX  ######

function createGuid() {
    return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
        (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
    )
}

function getLocation() {
    try {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition);
        } else {
            console.log("Geolocation is not supported by this browser.");
            return 0;
        }
    }
    catch (e) {
        console.log("Geolocation: error");
    }
}

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


// ### Serialization

/**
 * 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;
    }, {});
};