WME FixingMap Plugin

Script that highlights some of the map problems with a color so they are easy to see and fix

От 13.12.2018. Виж последната версия.

За да инсталирате този скрипт, трябва да имате инсталирано разширение като Tampermonkey, Greasemonkey или Violentmonkey.

За да инсталирате този скрипт, трябва да имате инсталирано разширение като Tampermonkey или Violentmonkey.

За да инсталирате този скрипт, трябва да имате инсталирано разширение като Tampermonkey или Violentmonkey.

За да инсталирате този скрипт, трябва да имате инсталирано разширение като Tampermonkey или Userscripts.

За да инсталирате скрипта, трябва да инсталирате разширение като Tampermonkey.

За да инсталирате този скрипт, трябва да имате инсталиран скриптов мениджър.

(Вече имам скриптов мениджър, искам да го инсталирам!)

За да инсталирате този стил, трябва да инсталирате разширение като Stylus.

За да инсталирате този стил, трябва да инсталирате разширение като Stylus.

За да инсталирате този стил, трябва да инсталирате разширение като Stylus.

За да инсталирате този стил, трябва да имате инсталиран мениджър на потребителски стилове.

За да инсталирате този стил, трябва да имате инсталиран мениджър на потребителски стилове.

За да инсталирате този стил, трябва да имате инсталиран мениджър на потребителски стилове.

(Вече имам инсталиран мениджър на стиловете, искам да го инсталирам!)

// ==UserScript==
// @name         WME FixingMap Plugin
// @description  Script that highlights some of the map problems with a color so they are easy to see and fix
// @include      /^https:\/\/(www|beta)\.waze\.com\/(?!user\/)(.{2,6}\/)?editor.*$/
// @namespace    https://www.waze.com/ar/editor
// @version      2.1.3
// @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;";

//Set up version
var fm_version = GM_info.script.version || "2.1.2";
var current_version = "2.1.2";

//Set up variables
var isStarted = false
var stateNode = false;
var stateRoad = false;
var stateLevel = false;
var defaultLevel = 1;

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

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

//Run app
const run_fm = e =>{
    isStarted = true;
    createTapUI();
    storageManager();
    window.W.map.events.register("move", null, e =>{
        setTimeout(manager, 500);
    });
    if (current_version != GM_info.script.version) alert("There is a new update");
}

//Restart UI
W.app.modeController.model.bind('change:mode', function(){
    if (W.app.modeController.getState() === undefined){
        setTimeout(e =>{
            createTapUI();
            managerButtons();
        }, 1000);
    }
});

//Restart UI
W.prefs.on('change:isImperial', function(){
    setTimeout(e =>{
        createTapUI();
        managerButtons();
    }, 1000);
});

//Check if browser supports storage object & activated
const storageManager = e =>{
    if (typeof(Storage) !== "undefined") {
        if (JSON.parse(localStorage.getItem("settings-fm") == null)) {
            localStorage.setItem("settings-fm", JSON.stringify(settings));
        };
        checkOption();
    }
}

//Set up data storage
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 =>{
    if (segments == null) return false;
    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 =>{
    if (segments == null) return false;
    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 =>{
    if (nodes == null) return false;
    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 =>{
    if (nodes == null) return false;
    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 =>{
    if (segments == null) return false;
    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) =>{
    if (users == null) return false;
    if (segments == null) return false;
    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) =>{
    if (users == null) return false;
    if (segments == null) return false;
    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);
        getElement("#" + segments[lvl].attributes.geometry.id).setAttribute("stroke-width", 3);
    }else{
        getElement("#users-content").style.display = "none";
    }
}

const camerasOBJ = e =>{
    if (cameras == null) return false;
    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 =>{

    if (location.href.includes("/ar/")){
        customStyle();
    }

    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 =>{
    if (segments == null) return false;
    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 (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 =>{
    if (users == null) return false;
    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);
    }
}

const managerButtons = e =>{
    if (stateNode){
        getElement("#btnNodeOff").style.backgroundColor = "#9E9E9E"; // gray
        getElement("#btnNodeOn").style.backgroundColor = "#4caf50"; // green
    }else{
        getElement("#btnNodeOn").style.backgroundColor = "#9E9E9E"; // gray
        getElement("#btnNodeOff").style.backgroundColor = "#e91e63"; // red
    }
    if (stateRoad){
        getElement("#btnRoadOff").style.backgroundColor = "#9E9E9E"; // gray
        getElement("#btnRoadOn").style.backgroundColor = "#4caf50"; // green
    }else{
        getElement("#btnRoadOn").style.backgroundColor = "#9E9E9E"; // gray
        getElement("#btnRoadOff").style.backgroundColor = "#e91e63"; // red
    }
    if (stateLevel){
        getElement("#btnLevelOff").style.backgroundColor = "#9E9E9E"; // gray
        getElement("#btnLevelOn").style.backgroundColor = "#4caf50"; // green
    }else{
        getElement("#btnLevelOn").style.backgroundColor = "#9E9E9E"; // gray
        getElement("#btnLevelOff").style.backgroundColor = "#e91e63"; // red
    }
}



const customStyle = e =>{
    var style = document.createElement('style');
    style.appendChild(document.createTextNode(function () {/*
        h3{
            text-align: right;
        }
    */}.toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1]));
    
    document.getElementsByTagName("head")[0].appendChild(style);
}