WME FixingMap Plugin

Find errors in the map

Versión del día 12/12/2018. Echa un vistazo a la versión más reciente.

Tendrás que instalar una extensión para tu navegador como Tampermonkey, Greasemonkey o Violentmonkey si quieres utilizar este script.

Necesitarás instalar una extensión como Tampermonkey o Violentmonkey para instalar este script.

Necesitarás instalar una extensión como Tampermonkey o Violentmonkey para instalar este script.

Necesitarás instalar una extensión como Tampermonkey o Userscripts para instalar este script.

Necesitará instalar una extensión como Tampermonkey para instalar este script.

Necesitarás instalar una extensión para administrar scripts de usuario si quieres instalar este script.

(Ya tengo un administrador de scripts de usuario, déjame instalarlo)

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión como Stylus para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

Necesitará instalar una extensión del gestor de estilos de usuario para instalar este estilo.

(Ya tengo un administrador de estilos de usuario, déjame instalarlo)

// ==UserScript==
// @name         WME FixingMap Plugin
// @description  Find errors in the map
// @include      /^https:\/\/(www|beta)\.waze\.com\/(?!user\/)(.{2,6}\/)?editor.*$/
// @namespace    https://www.waze.com/ar/editor
// @version      2.0.8
// @icon         data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsIAAA7CARUoSoAAAAH+SURBVGhD1Ze9TQQxEIX3rgKEhAgQIqICEqqADkhpgCIIiEkogBSoAiE6IEIcAQlQAQdv8Zx29/zzbM/6vJ+0ugku+N54vGvPLpudZVOA88WNqdLY2js1VZ+5+a0alzwoEiCn+z55MOoIjTU2XdQD5EoLjDxQC6AlDlh5kB1AUxzEyH+/36cF0JYWYuRBdIBaxAHkARVgLHGQIw+CARj5n+MLU/mZP16Z6p9ceeAMwHadle+y/fZiKp6huGANoNl1FzEhXPJg7ShRQh587h+ayo9PHvQClJIXQiFC8mAVoLS8YAsBcUYetAHYDctwcrDbe2JhxYXZ1+KO+pCFuh+SfXj9MJUdbOpYeVDkPsCQIg9UAjCjkjJOPp6ub9unmhWIAeLC5AJ05cGkAgzlgUqA0BsGMP/xYZMHk1gBlzxQ+w4Iw7cN2/nhURv4xAUqgJzb2QNYLKnyIDhCKZeOHCDOygPvCtjktVdBuh8j3cUZwNd5rRCQTxUXrAGYsckN8Xx2ZKo81vYAO/Mp91pBSx70ViBmw3ZPj+wrVlNcWAVIlWfInXMfbYCx5McUF6ICsPIlxIXZ8g9Te6lRHlCHuVrlAbUCoQCbEBeCK1CzPPAGqF0eUHvARg3ywBmA3bibxhpgCqMjRI9QTfJgLcBURkfoBZiaPLBeaFzUNj5N0zS/umsXLLJwKl8AAAAASUVORK5CYII=
// @match        https://www.waze.com/ar/editor/*
// @match        https://www.waze.com/ar/editor
// @match        https://www.waze.com/editor/*
// @match        https://www.waze.com/editor
// @grant        none
// @author       Sultan Alrefaei
// @copyright    2018 - 2019 Sultan Alrefaei <@sultan_alrefaei>
// ==/UserScript==

//Styles
var btn = "width: 50px;" 
            +"height: 30px;"
            +"border: none;"
            +"background-color: #9E9E9E;"
            +"color: white;";

var input = "padding: 5px;"
            +"padding-left: 10px;"
            +"border: 1px solid #ddd;"
            +"border-radius: 3px;"
            +"margin-top: 15px;"
            +"margin-bottom: 10px;"
            +"font-weight: bold;"
            +"font-size: 15px;"
            +"display: block;";

var friendItem = "display: block;"
                +"border-left: 5px solid #4CAF50;"
                +"padding-left: 5px;"
                +"text-decoration: none;"
                +"margin-bottom: 5px;"
                +"color: #03A9F4;"
                +"font-weight: bold;"
                +"display: block;";

var isStarted = false
var stateNode = false;
var stateRoad = false;
var stateLevel = false;
var fm_version = GM_info.script.version || "2.0.6";
var defaultLevel = 1;

//Set up objects
const nodes = W.model.nodes.objects;
const segments = W.model.segments.objects;
const cameras = W.model.cameras.objects;
const users = W.model.users.objects;

//Set up data default
var settings = {
    option: {
        stateNode: false,
        stateRoad: false,
        stateLevel: false
    },
    level: {
        val: 1
    },
    friends: []
}

window.onload = e =>{
    if (isStarted) return false;
    run_fm();
}

setTimeout(e =>{
    if (isStarted) return false;
    run_fm();
}, 10000);

const run_fm = e =>{
    isStarted = true;
    createTapUI();
    window.W.map.events.register("move", null, e =>{
        setTimeout(manager, 500);
    });

    if (typeof(Storage) !== "undefined") {

        if (JSON.parse(localStorage.getItem("settings-fm") == null)) {
            localStorage.setItem("settings-fm", JSON.stringify(settings));
        };

        checkOption();
    }
}

const checkOption = e =>{
    var objectsSettings = JSON.parse(localStorage.getItem("settings-fm"));

    if (objectsSettings.option.stateNode){
        stateNode = true;
        settings.option.stateNode = objectsSettings.option.stateNode;
        getElement("#btnNodeOn").style.backgroundColor = "#4caf50";
        getElement("#btnNodeOff").style.backgroundColor = "#9E9E9E";
        manager();
    }
    if (objectsSettings.option.stateRoad){
        stateRoad = true;
        settings.option.stateRoad = objectsSettings.option.stateRoad;
        getElement("#btnRoadOn").style.backgroundColor = "#4caf50";
        getElement("#btnRoadOff").style.backgroundColor = "#9E9E9E";
        manager();
    }
    if (objectsSettings.option.stateLevel){
        stateLevel = true;
        settings.option.stateLevel = objectsSettings.option.stateLevel;
        getElement("#btnLevelOn").style.backgroundColor = "#4caf50";
        getElement("#btnLevelOff").style.backgroundColor = "#9E9E9E";
        manager();
    }
    defaultLevel = objectsSettings.level.val || 1;
    settings.level.val = objectsSettings.level.val || 1;
}

const manager = e =>{
    if (W.map.zoom >= 3){
        if (stateNode){
            checkNIC();
        }
    }
    if (W.map.zoom >= 5){
        if (stateRoad){
            checkIRS();
        }
        if (stateLevel){
            checkLevel();
        }
    }else{
        defaultROR();
    }
}

const checkIRS = e =>{
    var segs = [];
    for (seg in segments){
        if (getElement("#" + segments[seg].attributes.geometry.id) != null){
            segs.push(segments[seg]);
        }
    }
    setTimeout(checkIROR(segs), 10);
}

const defaultROR = e =>{
    for (seg in segments){
        if (getElement("#" + segments[seg].attributes.geometry.id) != null){
            getElement("#" + segments[seg].attributes.geometry.id).setAttribute("stroke", "");
            getElement("#" + segments[seg].attributes.geometry.id).setAttribute("stroke-opacity", 0);
        }
    }
}


const checkIROR = segs =>{
    for (var s1 = 0; s1 < segs.length; s1++){
        for (var s2 = 0; s2 < segs.length; s2++){
            if (segs[s1].attributes.id != segs[s2].attributes.id && segs[s1].attributes.fromNodeID == segs[s2].attributes.fromNodeID && segs[s1].attributes.toNodeID == segs[s2].attributes.toNodeID){
                if (getElement("#" + segs[s1].attributes.geometry.id) != null){
                    getElement("#" + segs[s1].attributes.geometry.id).setAttribute("stroke", "red");
                    getElement("#" + segs[s1].attributes.geometry.id).setAttribute("stroke-opacity", 1);
                }
                if (getElement("#" + segs[s2].attributes.geometry.id) != null){
                    getElement("#" + segs[s2].attributes.geometry.id).setAttribute("stroke", "red");
                    getElement("#" + segs[s2].attributes.geometry.id).setAttribute("stroke-opacity", 1);
                }
            }
        }
    }
}

const checkNIC = e =>{
    for (node in nodes){
        if (nodes[node].attributes.segIDs.length == 1){
            if (getElement("#" + nodes[node].attributes.geometry.id) != null){
                getElement("#" + nodes[node].attributes.geometry.id).setAttribute("fill", "#525252");
                getElement("#" + nodes[node].attributes.geometry.id).setAttribute("fill-opacity", 1);

                getElement("#" + nodes[node].attributes.geometry.id).setAttribute("stroke", "red");
                getElement("#" + nodes[node].attributes.geometry.id).setAttribute("stroke-opacity", 1);
            }
        }
    }
}

const defaultNode = e =>{
    for (node in nodes){
        if (getElement("#" + nodes[node].attributes.geometry.id) != null){
            getElement("#" + nodes[node].attributes.geometry.id).setAttribute("fill", "");
            getElement("#" + nodes[node].attributes.geometry.id).setAttribute("fill-opacity", 0);

            getElement("#" + nodes[node].attributes.geometry.id).setAttribute("stroke", "");
            getElement("#" + nodes[node].attributes.geometry.id).setAttribute("stroke-opacity", 0);
        }
    }
}

const checkLevel = e =>{
    var level = getElement("#input-level") || 1;
    for ( lvl in segments){
        if (getElement("#" + segments[lvl].attributes.geometry.id) != null){
            var useridCreated = segments[lvl].attributes.createdBy;
            var useridUpdated = segments[lvl].attributes.updatedBy;

            userUpdated(useridUpdated, level);
        }
    }
}

const userCreated = (useridCreated, level) =>{
    var usersArray = [];
    if (users[useridCreated].normalizedLevel == parseInt(level.value) && checkDateSig(segments[lvl].attributes.id)){
        
        document.getElementById("users-content").style.display = "block";

        if (usersArray.length == 0){
            usersArray.push(users[useridCreated].userName);
            getElement("#users-content").innerText = usersArray;
        }else{
            for (var i = 0; i < users.length; i++){
                if (usersArray[i] == users[useridCreated].userName){
                    continue;
                }else{
                    usersArray.push(users[useridCreated].userName);
                    getElement("#users-content").innerText = usersArray;
                }
            }
        }
        getElement("#" + segments[lvl].attributes.geometry.id).setAttribute("stroke", "green");
        getElement("#" + segments[lvl].attributes.geometry.id).setAttribute("stroke-opacity", 1);
    }else{
        getElement("#users-content").style.display = "none";
    }
}

const userUpdated = (useridUpdated, level) =>{
    var usersArray = [];
    if (users[useridUpdated].normalizedLevel == parseInt(level.value) && checkDateSig(segments[lvl].attributes.id)){

        getElement("#users-content").style.display = "block";

        if (usersArray.length == 0){
            usersArray.push(users[useridUpdated].userName);
            getElement("#users-content").innerText = usersArray;
        }else{
            for (var i = 0; i < users.length; i++){
                if (usersArray[i] == users[useridUpdated].userName){
                    continue;
                }else{
                    usersArray.push(users[useridUpdated].userName);
                    getElement("#users-content").innerText = usersArray;
                }
            }
        }
        getElement("#" + segments[lvl].attributes.geometry.id).setAttribute("stroke", "green");
        getElement("#" + segments[lvl].attributes.geometry.id).setAttribute("stroke-opacity", 1);
    }else{
        getElement("#users-content").style.display = "none";
    }
}

const camerasOBJ = e =>{
    for (cam in cameras){
        if (cameras[cam].attributes.geometry.id != null){
            if (cameras[cam].attributes.speed == 100)
            getElement("#" + cameras[cam].attributes.geometry.id).setAttribute("xlink:href", "https://www.dropbox.com/s/oiydd8av9111xwq/download_cr.png?dl=1");
        }
    }
}

const createTapUI = e =>{
    const taps = getElement(".nav nav-tabs")[0];

    const tap = document.createElement("li");
    tap.innerHTML = '<a data-toggle="tab" href="#sidepanel-fm">WME {FM}</a>';
    taps.insertBefore(tap, taps.children[3].nextSibling);


    /*const tapFriends = document.createElement("li");
    tapFriends.innerHTML = '<a data-toggle="tab" href="#sidepanel-fm-friends">Friends</a>';
    taps.insertBefore(tapFriends, taps.children[4].nextSibling);*/
    
    createWindowUI();
}

const createWindowUI = e =>{
    const wins = getElement(".tab-content")[0];

    const win = document.createElement("div");
    win.setAttribute("class", "tab-pane");
    win.setAttribute("id", "sidepanel-fm");
    win.setAttribute("style", "text-align: left;");

    const title = document.createElement("h2");
    title.setAttribute("style", "margin-bottom: 15px; border-bottom: 1px solid;");
    title.innerHTML = "WME FixingMap Plugin <sup style='font-size: 15px; padding: 1.5px; background-color: #FFEB3B;'>{FM}</sup>";
    win.appendChild(title);

    wins.insertBefore(win, wins.children[0]);

    createHintUI();

    NodeController();

    RoadController();

    LevelController();

    //addFriends();

    const footer = document.createElement("div");
    footer.setAttribute("style", "margin-top: 20px; border-top: 1px solid; padding: 10px; text-align: center; color: #888888;");
    footer.innerHTML = "&copy;2018-2019 <a href='https://www.waze.com/ar/user/editor/sultan_alrefaei'>Sultan Alrefaei</a><br>Saudi Arabia<br>Version: " + fm_version;
    win.appendChild(footer);


    //---

    const friendsWindow = document.createElement("div");
    friendsWindow.setAttribute("class", "tab-pane");
    friendsWindow.setAttribute("id", "sidepanel-fm-friends");
    friendsWindow.setAttribute("style", "text-align: left;");

    wins.insertBefore(friendsWindow, wins.children[0]);

    var objectsSettings = JSON.parse(localStorage.getItem("settings-fm"));

    /*var friend = document.createElement("a");
    friend.setAttribute("style", friendItem);
    friend.setAttribute("href", "https://www.waze.com/user/editor/" + objectsSettings.friends[0].username);
    friend.innerText = objectsSettings.friends[0].username + "(" + objectsSettings.friends[0].level + ")";
    
    friendsWindow.appendChild(friend);*/
}

const createHintUI = e =>{
    const hint = document.createElement("div");
    hint.setAttribute("id", "hintUI");
    hint.setAttribute("style", "display: none; position: absolute; z-index: 1000000; background-color: #3d3d3d; width: 200px; color: #fff; border-radius: 3px; padding: 5px;");
    hint.addEventListener("click", e =>{
        e.target.remove();
    });
    document.body.appendChild(hint);
}

const NodeController = e =>{
    //Title
    const title = document.createElement("h3");
    title.setAttribute("style", "margin-top: 10px; margin-bottom: 5px;");
    
    if (location.href.includes("/ar/")){
        title.innerHTML = app_lang("Option-1", "ar").value + " <span style='padding: 1.5px; background-color: #FFEB3B; cursor: help;'>" + app_lang("Option-1", "ar").hint + "</span>";
    }else{
        title.innerHTML = app_lang("Option-1", "en").value + " <span style='padding: 1.5px; background-color: #FFEB3B; cursor: help;'>" + app_lang("Option-1", "en").hint + "</span>";
    }

    title.children[0].addEventListener("mouseenter", e =>{
        var x = e.target.offsetLeft + e.target.offsetWidth + 20;
        var y = e.target.offsetTop - (e.target.offsetHeight / 2);

        if (location.href.includes("/ar/")){
            getElement("#hintUI").innerText = app_lang("hint", "ar")["#1"].value;
        }else{
            getElement("#hintUI").innerText = app_lang("hint", "en")["#1"].value;
        }

        getElement("#hintUI").style.left = x + "px";
        getElement("#hintUI").style.top = y + "px";

        getElement("#hintUI").style.display = "block";
    });
    title.addEventListener("mouseleave", e =>{
        getElement("#hintUI").style.display = "none";
    });
    getElement("#sidepanel-fm").appendChild(title);

    //Button Off
    const btnOff = document.createElement("button");
    btnOff.setAttribute("style", btn);
    btnOff.setAttribute("id", "btnNodeOff");
    btnOff.style.backgroundColor = "#e91e63";
    btnOff.addEventListener("click", e =>{
        e.target.style.backgroundColor = "#e91e63";
        getElement("#btnNodeOn").style.backgroundColor = "#9E9E9E";
        stateNode = false;
        settings.option.stateNode = false;
        localStorage.setItem("settings-fm", JSON.stringify(settings));
        defaultNode();
    });

    if (location.href.includes("/ar/")){
        btnOff.innerHTML = app_lang("buttons", "ar")["off"];
    }else{
        btnOff.innerHTML = app_lang("buttons", "en")["off"];
    }

    getElement("#sidepanel-fm").appendChild(btnOff);

    //Button On
    const btnOn = document.createElement("button");
    btnOn.setAttribute("style", btn);
    btnOn.setAttribute("id", "btnNodeOn");
    btnOn.addEventListener("click", e =>{
        e.target.style.backgroundColor = "#4caf50";
        getElement("#btnNodeOff").style.backgroundColor = "#9E9E9E";
        stateNode = true;
        settings.option.stateNode = true;
        localStorage.setItem("settings-fm", JSON.stringify(settings));
        checkNIC();
    });
    
    if (location.href.includes("/ar/")){
        btnOn.innerHTML = app_lang("buttons", "ar")["on"];
    }else{
        btnOn.innerHTML = app_lang("buttons", "en")["on"];
    }
    
    getElement("#sidepanel-fm").appendChild(btnOn);
}

const RoadController = e =>{
    //Title
    const title = document.createElement("h3");
    title.setAttribute("style", "margin-top: 10px; margin-bottom: 5px;");
    
    if (location.href.includes("/ar/")){
        title.innerHTML = app_lang("Option-2", "ar").value + " <span style='padding: 1.5px; background-color: #FFEB3B; cursor: help;'>" + app_lang("Option-2", "ar").hint + "</span>";
    }else{
        title.innerHTML = app_lang("Option-2", "en").value + " <span style='padding: 1.5px; background-color: #FFEB3B; cursor: help;'>" + app_lang("Option-2", "en").hint + "</span>";
    }

    title.children[0].addEventListener("mouseenter", e =>{
        var x = e.target.offsetLeft + e.target.offsetWidth + 20;
        var y = e.target.offsetTop - (e.target.offsetHeight / 2);

        if (location.href.includes("/ar/")){
            getElement("#hintUI").innerText = app_lang("hint", "ar")["#2"].value;
        }else{
            getElement("#hintUI").innerText = app_lang("hint", "en")["#2"].value;
        }

        getElement("#hintUI").style.left = x + "px";
        getElement("#hintUI").style.top = y + "px";

        getElement("#hintUI").style.display = "block";
    });
    title.addEventListener("mouseleave", e =>{
        getElement("#hintUI").style.display = "none";
    });
    getElement("#sidepanel-fm").appendChild(title);

    //Button Off
    const btnOff = document.createElement("button");
    btnOff.setAttribute("style", btn);
    btnOff.setAttribute("id", "btnRoadOff");
    btnOff.style.backgroundColor = "#e91e63";
    btnOff.addEventListener("click", e =>{
        e.target.style.backgroundColor = "#e91e63";
        getElement("#btnRoadOn").style.backgroundColor = "#9E9E9E";
        stateRoad = false;
        settings.option.stateRoad = false;
        localStorage.setItem("settings-fm", JSON.stringify(settings));
        defaultROR();
    });
    
    if (location.href.includes("/ar/")){
        btnOff.innerHTML = app_lang("buttons", "ar")["off"];
    }else{
        btnOff.innerHTML = app_lang("buttons", "en")["off"];
    }


    getElement("#sidepanel-fm").appendChild(btnOff);

    //Button On
    const btnOn = document.createElement("button");
    btnOn.setAttribute("style", btn);
    btnOn.setAttribute("id", "btnRoadOn");
    btnOn.addEventListener("click", e =>{
        e.target.style.backgroundColor = "#4caf50";
        getElement("#btnRoadOff").style.backgroundColor = "#9E9E9E";
        stateRoad = true;
        settings.option.stateRoad = true;
        localStorage.setItem("settings-fm", JSON.stringify(settings));
        checkIRS();
    });
    
    if (location.href.includes("/ar/")){
        btnOn.innerHTML = app_lang("buttons", "ar")["on"];
    }else{
        btnOn.innerHTML = app_lang("buttons", "en")["on"];
    }


    getElement("#sidepanel-fm").appendChild(btnOn);
}


const LevelController = e =>{
    //Title
    const title = document.createElement("h3");
    title.setAttribute("style", "margin-top: 10px; margin-bottom: 5px;");

    if (location.href.includes("/ar/")){
        title.innerHTML = app_lang("Option-3", "ar").value + " <span style='padding: 1.5px; background-color: #FFEB3B; cursor: help;'>" + app_lang("Option-3", "ar").hint + "</span>";
    }else{
        title.innerHTML = app_lang("Option-3", "en").value + " <span style='padding: 1.5px; background-color: #FFEB3B; cursor: help;'>" + app_lang("Option-3", "en").hint + "</span>";
    }

    title.children[0].addEventListener("mouseenter", e =>{
        var x = e.target.offsetLeft + e.target.offsetWidth + 20;
        var y = e.target.offsetTop - (e.target.offsetHeight / 2);

        if (location.href.includes("/ar/")){
            getElement("#hintUI").innerText = app_lang("hint", "ar")["#3"].value;
        }else{
            getElement("#hintUI").innerText = app_lang("hint", "en")["#3"].value;
        }

        getElement("#hintUI").style.left = x + "px";
        getElement("#hintUI").style.top = y + "px";

        getElement("#hintUI").style.display = "block";
    });
    title.addEventListener("mouseleave", e =>{
        getElement("#hintUI").style.display = "none";
    });
    getElement("#sidepanel-fm").appendChild(title);

    var objectsSettings = JSON.parse(localStorage.getItem("settings-fm"));


    if (objectsSettings != null){
        defaultLevel = objectsSettings.level.val || 1;
        settings.level.val = objectsSettings.level.val || 1;
    }else{
        defaultLevel = 1;
        settings.level.val = 1;
    }
    

    //Input for level
    const inputLevel = document.createElement("input");
    inputLevel.setAttribute("type", "number");
    inputLevel.setAttribute("id", "input-level");
    inputLevel.setAttribute("placeholder", "Enter the level");
    inputLevel.setAttribute("value", defaultLevel);
    inputLevel.setAttribute("min", "1");
    inputLevel.setAttribute("max", "7");
    inputLevel.setAttribute("style", input);
    getElement("#sidepanel-fm").appendChild(inputLevel);

    //Button Off
    const btnOff = document.createElement("button");
    btnOff.setAttribute("style", btn);
    btnOff.setAttribute("id", "btnLevelOff");
    btnOff.style.backgroundColor = "#e91e63";
    btnOff.addEventListener("click", e =>{
        e.target.style.backgroundColor = "#e91e63";
        getElement("#btnLevelOn").style.backgroundColor = "#9E9E9E";
        getElement("#users-content").style.display = "none"; 
        stateLevel = false;
        settings.option.stateLevel = false;
        localStorage.setItem("settings-fm", JSON.stringify(settings));
        defaultROR();
    });
    
    if (location.href.includes("/ar/")){
        btnOff.innerHTML = app_lang("buttons", "ar")["off"];
    }else{
        btnOff.innerHTML = app_lang("buttons", "en")["off"];
    }


    getElement("#sidepanel-fm").appendChild(btnOff);

    //Button On
    const btnOn = document.createElement("button");
    btnOn.setAttribute("style", btn);
    btnOn.setAttribute("id", "btnLevelOn");
    btnOn.addEventListener("click", e =>{
        e.target.style.backgroundColor = "#4caf50";
        getElement("#btnLevelOff").style.backgroundColor = "#9E9E9E";
        stateLevel = true;
        settings.option.stateLevel = true;
        settings.level.val = parseInt(getElement("#input-level").value);
        localStorage.setItem("settings-fm", JSON.stringify(settings));
        checkLevel();
    });
    
    if (location.href.includes("/ar/")){
        btnOn.innerHTML = app_lang("buttons", "ar")["on"];
    }else{
        btnOn.innerHTML = app_lang("buttons", "en")["on"];
    }


    getElement("#sidepanel-fm").appendChild(btnOn);

    //Users content
    const content = document.createElement("div");
    content.setAttribute("id", "users-content");
    content.setAttribute("style", "display: none; height: 30px; background-color: #0000004d; border-top: 1px solid #fff; border-left: 10px solid #03A9F4; padding-left: 5px; color: #fff; line-height: 2;");
    getElement("#topbar-container").appendChild(content);

}

const checkDateSig = id =>{
    var timestampCreated = segments[id].attributes.createdOn;
    var timestampUpdated = segments[id].attributes.updatedOn;

    var createdOn = new Date(timestampCreated);
    var fullDateCreated = createdOn.getMonth() + "/" + createdOn.getFullYear();

    var updatedOn = new Date(timestampUpdated);
    var fullDateUpdated = updatedOn.getMonth() + "/" + updatedOn.getFullYear();

    var dateNow = new Date();
    var fullDateNow = dateNow.getMonth() + "/" + dateNow.getFullYear();

    var isSameYearCreated = fullDateNow == fullDateCreated ? true : false;
    var isSameYearUpdated = fullDateNow == fullDateUpdated ? true : false;

    var daysLimit = dateNow.getDay() - updatedOn.getDay();

    if (isSameYearCreated || isSameYearUpdated){
        return daysLimit <= 7 ? true : false;
    }else{
        return false;
    }
};

const getElement = element =>{
    if (element.charAt(0) == "#"){
        element = element.replace("#", "");
        return document.getElementById(element) != null ? document.getElementById(element) : null;
    }else if (element.charAt(0) == "."){
        element = element.replace(".", "");
        return document.getElementsByClassName(element) != null ? document.getElementsByClassName(element) : null;
    }else{
        return null;
    }
}

const app_lang = (text, lang) =>{
    var langs = {
        "ar": {
            "Option-1": {
                "value": "الطرق الغير متصلة",
                "hint": "مساعدة"
            },
            "Option-2": {
                "value": "طريق فوق طريق",
                "hint": "مساعدة"
            },
            "Option-3": {
                "value": "التحقق من نشاط المستخدمين",
                "hint": "مساعدة"
            },
            "buttons": {
                "on": "تشغيل",
                "off": "إيقاف"
            },
            "hint": {
                "#1": {
                    "value": "يظهر الوصلات الغير متصلة بشكل صحيح"
                },
                "#2": {
                    "value": "يظهر الطرق التي تبدأ وتنتهي بنفس النقطة، أي الطرق المرسومة فوق بعضها"
                },
                "#3": {
                    "value": "يظهر المستخدمين الذين يقومون بالتعديل خلال الأسبوع الحالي حسب المستوى الذي تم تحديده"
                }
            }
        },
        "en": {
            "Option-1": {
                "value": "Check If",
                "hint": "C.N"
            },
            "Option-2": {
                "value": "Check If",
                "hint": "R.O.R"
            },
            "Option-3": {
                "value": "Check User",
                "hint": "I.T"
            },
            "buttons": {
                "on": "On",
                "off": "Off"
            },
            "hint": {
                "#1": {
                    "value": "Highlights segment end nodes that are not connected to other segments"
                },
                "#2": {
                    "value": "Highlights segments that have hidden segments beneath them"
                },
                "#3": {
                    "value": "Highlits segments that have been updated by the selected editor level during the current week"
                }
            }
        }
    }

    return langs[lang][text];
}

const addFriends = e =>{
    var usersList = document.getElementsByClassName("current-user user");
    for (var i = 0; i < usersList.length; i++){
        var btnAdd = document.createElement("button");
        btnAdd.setAttribute("id", "btnAdd");
        btnAdd.setAttribute("value", "Add");
        btnAdd.setAttribute("username", usersList[i].children[2].innerText);
        btnAdd.addEventListener("click", e =>{
            settings.friends.push({username: e.target.getAttribute("username"), id: usersList[0].getAttribute("data-id"), level: users[usersList[0].getAttribute("data-id")].normalizedLevel});
            localStorage.setItem("settings-fm", JSON.stringify(settings));
        })
        usersList[i].children[2].appendChild(btnAdd);
    }
}