mechanical/static/home.js

function navlinkactive(){
   $('#nav-home').addClass('active');

}
navlinkactive();
start();
user_role = '';
data = '';
obj = '';
check = 0;
// 之後透過 fetch 取得fastapi後端資料!
function start(){
    var xhr = new XMLHttpRequest();
    var url = "home/show";
    obj = "";
    xhr.open("GET",url);
    xhr.onload = function(){
        obj = JSON.parse(xhr.responseText);
        data = obj ;
        console.log(data);
        document.getElementById('company_text').innerHTML=data[1][0].company;
        document.getElementById('factory_text').innerHTML=data[1][0].factory;
        document.getElementById('department_text').innerHTML=data[1][0].department;
        if(data[0].user_role==1){
            company_show();
        }
        else if(data[0].user_role==2){
            factory_show(data[1][0].company);
        }
        else if(data[0].user_role==3){
            department_show(data[1][0].company,data[1][0].department);
            department_change();
        }
        else{
            towerGroup_show();  
        }
            //insertHTML();
    };
    xhr.send();
    
    console.log('Start');
}

function get_user_role(){
    user_role = data[0].user_role
}

function clear(){
    document.getElementById('company').innerHTML='';
    document.getElementById('towergroup').innerHTML='';
    document.getElementById('company_name').innerHTML='';
    document.getElementById('factory_select').innerHTML='';
    document.getElementById("map").style.display="none";
    document.getElementById('department_show').innerHTML="";
    document.getElementById("department_list").style.display="none";
}

function company_show(){
    //顯示company按鈕
    var inner='<div class="card pb-5"><h1 style="color:#002E86;" class="fw-bold">機組狀態</h1><div class="row row-cols-lg-6 mx-0">';
    var company_arr = new Array();
    check = 0;
    for(var i=0;i<obj[1].length;i++){
        if(company_arr.indexOf(obj[1][i].company)==-1){
            inner+="<div class='col'><button style='color:#002E85; width:150px; padding:15px 20px; border:1px solid #002E86;background:none; border-radius: 10px;' class='me-3' id='company " +obj[1][i].company+ "' onclick=\"factory_show(\'"+obj[1][i].company+"\');\"";
            inner += "><i id='company2 " +obj[1][i].company+ "' class='fas fa-check-circle me-2'></i>公司"+obj[1][i].company+"</button></div>";
            company_arr.push(obj[1][i].company);
            console.log(obj[1][i].company);
        }
    }
    inner += '</div></div>';
    clear();
    document.getElementById('company').innerHTML=inner;
    company_health(company_arr);
}

function company_health(company_arr){
    //使公司按鈕變色
    for(var i=0;i<company_arr.length;i++){
        //初始化(健康)
        // document.getElementById('company ' + company_arr[i]).style.background="green";
        document.getElementById('company2 ' + company_arr[i]).style.color="green";

    }
    for(var i=0;i<obj[1].length;i++){
        if(obj[1][i].health!=1 && obj[1][i].company==document.getElementById('company_text').innerHTML){
            //有不健康的就改色
            document.getElementById('company ' + obj[1][i].company).style.background="red";
        }
    }
}

// function factory_show(company){
//     var inner='<p class="fw-bold">廠區資訊:</p>';
//     var factory_arr = new Array();
//     for(var i=0;i<obj[1].length;i++){
//         if(factory_arr.indexOf(obj[1][i].factory)==-1 && obj[1][i].company==company){
//             inner+="<button class='btn text-white m-1' id='factory " +obj[1][i].factory+ "' onclick=\"department_show(\'"+obj[1][i].company+"\',\'"+obj[1][i].factory+"\');\"";
//             inner += ">廠區"+obj[1][i].factory+"</button><br>";
//             factory_arr.push(obj[1][i].factory);
//         }
//     }
//     //測試用
//     inner+="<button class='btn btn btn-outline-success m-1' id='factory B' onclick=\"department_show(\'"+obj[1][0].company+"\',\'B\');\"";
//     inner += ">廠區B</button><br>";
//     inner+="<button class='btn btn btn-outline-success m-1' id='factory C' onclick=\"department_show(\'"+obj[1][0].company+"\',\'C\');\"";
//     inner += ">廠區C</button><br>";
//     document.getElementById('company').innerHTML="";
//     document.getElementById('company_name').innerHTML="<button type='button' class='btn btn-primary m-1' onclick=\"company_show();\">返回</button> 公司"+ company + "";
//     document.getElementById('factory_select').innerHTML=inner;
//     factory_health(factory_arr);
//     document.getElementById("map").style.display="";
    
// }
function factory_show(company){
  var inner='<div class="card p-5"><table class="table" style="border-color:#002e86;"><p class="mb-0" style="color:#002e86; border-bottom:1px solid #002e86;"><span style="font-size:24px;font-weight:900;" class="me-3 mb-3"> 公司'+ company + '</span>-廠區資訊</p>';
    var factory_arr = new Array();
    for(var i=0;i<obj[1].length;i++){
        if(factory_arr.indexOf(obj[1][i].factory)==-1 && obj[1][i].company==company){
            inner+="<tbody><tr><td><i style='font-size:20px;' id='factory2 " +obj[1][i].factory+ "' class='fas fa-check-circle me-2 my-2'></i></td><td><button type='button' style='font-size:20px; color:#002e86; background:none;' class='me-3 border-0  my-2' id='factory " +obj[1][i].factory+ "' onclick=\"change_map(\'"+obj[1][i].company+"\',\'"+obj[1][i].factory+"\');\"";
            inner += ">廠區"+obj[1][i].factory+"</button></td><td><button type='button' style='font-size:16px; padding:5px 30px; background:none; border:1px solid #002E86; color:#002e86;'  class='rounded-pill  my-2' onclick=\"department_show(\'"+obj[1][i].company+"\',\'"+obj[1][i].factory+"\');\"> 查看</button></td><tr>";
            factory_arr.push(obj[1][i].factory);
        }
    }
    //測試用
    inner+="<tr><td><i style='font-size:20px; color:green;' class='fas fa-check-circle me-2  my-2'></i></td><td><button type='button' style='font-size:20px; color:#002e86; background:none;' class='me-3 border-0  my-2' id='factory B' onclick=\"change_map(\'"+obj[1][0].company+"\',\'B\');\"";
    inner += ">廠區B</button></td><td><button style='font-size:16px; padding:5px 30px; background:none; border:1px solid #002E86; color:#002e86;' class='rounded-pill my-2' onclick=\"department_show(\'"+obj[1][0].company+"\',\'B\');\">查看 </button></td></tr>";

    inner+="<tr><td><i style='font-size:20px; color:green;' class='fas fa-check-circle me-2  my-2'></i></td><td><button type='button' style='font-size:20px; color:#002e86; background:none;' class='me-3 border-0  my-2' id='factory C' onclick=\"change_map(\'"+obj[1][0].company+"\',\'C\');\"";
    inner += ">廠區C</button></td><td><button style='font-size:16px; padding:5px 30px; background:none; border:1px solid #002E86; color:#002e86;' class='rounded-pill my-2' onclick=\"department_show(\'"+obj[1][0].company+"\',\'C\');\"> 查看</button></td></tr>";
    inner +="</tbody></table></div>"
    document.getElementById('company').innerHTML="";
    document.getElementById('company_text').innerHTML=company;
    document.getElementById('company_name').innerHTML="<span style='color:#002E86; font-size:25.6px;' class='fw-bold'>機組狀態</span><button type='button' style='background:#002E86; padding:10px 30px; font-size:16px;' class='text-white ms-4  rounded-pill border-0' onclick=\"company_show();\">返回</button>";
    document.getElementById('factory_select').innerHTML=inner;
    factory_health(factory_arr);
    document.getElementById("map").style.display="";
    
}

function factory_health(factory_arr){
    //使工廠按鈕變色
    for(var i=0;i<factory_arr.length;i++){
        //初始化(健康)
        // document.getElementById('factory ' + factory_arr[i]).style.background="green";
        document.getElementById('factory2 ' + factory_arr[i]).style.color="green";

    }
    for(var i=0;i<obj[1].length;i++){
        if(obj[1][i].health!=1){
            //有不健康的改色
            document.getElementById('factory ' + obj[1][i].factory).style.background="red";
        }
    }
}

function department_show(company,factory){
    var inner='';
    var department_arr = new Array();

    for(var i=0;i<obj[1].length;i++){
        if(department_arr.indexOf(obj[1][i].department)==-1 && obj[1][i].company==company/*&& obj[1][i].factory==factory*/){
            inner+='<option selected value="'+obj[1][i].department+'">課'+obj[1][i].department+'</option>';
            department_arr.push(obj[1][i].department);
        }
    }
    document.getElementById('company_text').innerHTML=company;
    document.getElementById('factory_text').innerHTML=factory;
    document.getElementById('department_list').innerHTML=inner;
    console.log("click");
    clear();
    document.getElementById('company_name').innerHTML="<span style='color:#002E86; font-size:25.6px;' class='fw-bold'>機組狀態</span><button type='button' style='background:#002E86; padding:10px 30px; font-size:16px;' class='text-white ms-4 rounded-pill border-0' onclick=\"factory_show('"+company+"');\">返回</button> <div class='mt-3' style='color:#002e86; font-size:20px;'>目前位置: 公司 " + company+ " >廠區"+ factory + "</div>";
    document.getElementById("department_list").style.display="";
    department_change();
}

function change_map(company,factory){
    if(factory==='A'){
        newLocation(25.0339031,121.5623212);
    }
    else if(factory==='B'){
        newLocation(24.42,121.42);
    }
    else if(factory==='C'){
        newLocation(24.12,121.42);
    }
}


function department_change(){
    console.log("change");
    check = 0 ;
    var inner='<div class="card"><table style="font-size: 16px; border-color:#4c6caa; border-top:1px solid #4c6caa;" class="table text-center"><thead style="background:#e4f8ff; color:#4c6caa;"><tr><th class="border-0">機組</th><th class="border-0">健康狀態</th><th class="border-0">機組狀態</th></tr></thead>';
    var tower_group_arr = new Array();
    for(var i=0;i<obj[1].length;i++){
        if(tower_group_arr.indexOf(obj[1][i].group)==-1 && obj[1][i].company==document.getElementById('company_text').innerHTML/*&& obj[1][i].factory==document.getElementById('factory_text').innerHTML&& obj[1][i].department==document.getElementById("department_list").value*/){
            inner+='<tr><td><p class="my-2">' + obj[1][i].group + '</p></td><td style="color:#078b07" class="fw-bold"><p class="my-2">健康<i class="fas fa-check-circle ps-1 my-2"></i></p></td><td><button style="font-size:16px; padding:5px 30px; background:none; border:1px solid #002E86; color:#002e86;" class="rounded-pill my-2" onclick=\"towerGroup_show();\">查看</button></td></tr>' ;
            tower_group_arr.push(obj[1][i].group);
            console.log(inner);
        }
    }
    inner += '</table></div>';
    document.getElementById('department_text').innerHTML=document.getElementById("department_list").value;
    document.getElementById('department_show').innerHTML=inner;
    
}

function towerGroup_show(){
    check = 1;
    var inner= '';
    var tower_group_arr = new Array(); 
    for(var i=0;i<obj[1].length;i++){
        if(tower_group_arr.indexOf(obj[1][i].group)==-1 && obj[1][i].company==document.getElementById('company_text').innerHTML/*&& obj[1][i].factory==document.getElementById('factory_text').innerHTML&& obj[1][i].department==document.getElementById("department_text").innerHTML*/){
            inner += tower(obj[1][i].group);
            tower_group_arr.push(obj[1][i].group);
        }
    }
    clear();
    company = document.getElementById('company_text').innerHTML
    factory= document.getElementById('factory_text').innerHTML
    document.getElementById('company_name').innerHTML="<span style='color:#002E86; font-size:25.6px;' class='fw-bold'>機組狀態</span><button type='button' style='background:#002E86; padding:10px 30px; font-size:16px;' class='text-white ms-4 rounded-pill border-0' onclick=\"department_show('"+company+"','" + factory+"');\">返回</button><div class='mt-3' style='color:#002e86; font-size:20px;'>目前位置: 公司 " + company+ " >廠區 " + factory+ " >課"+ document.getElementById("department_list").value + "</div>";
    document.getElementById('towergroup').innerHTML=inner;
}

function tower(tower_group){
    //顯示tower
    var inner= '<div class="card mb-5"><p style="color:#002E86;" class="fw-bold">機組'+tower_group +'</p><table style="font-size: 16px; border-color:#4c6caa; border-top:1px solid #4c6caa;" class="table text-center"><thead style="background:#e4f8ff; color:#4c6caa;"><tr><th class="border-0">設備</th><th class="border-0">馬達效能</th><th class="border-0">機組狀態</th></tr></thead>';
    for(var i=0;i<obj[1].length;i++){
        if(obj[1][i].company==document.getElementById('company_text').innerHTML/*&& obj[1][i].factory==document.getElementById('factory_text').innerHTML&& obj[1][i].department==document.getElementById("department_text").innerHTML*/&&obj[1][i].group==tower_group){
            inner+='<tr><td><p class="my-2">' + obj[1][i].tower + '</p></td><td style="color:#078b07" class="fw-bold"><p class="my-2">健康<i class="fas fa-check-circle ps-1"></i></p></td>\<td><button style="font-size:16px; padding:5px 30px; background:none; border:1px solid #002E86; color:#002e86;" class="rounded-pill my-2" >查看</button></td></tr>';
        }
    }

    inner += '</table></div>'
    return inner;
}

function newLocation(newLat,newLng)
{
	map.setCenter({
		lat : newLat,
		lng : newLng
	});
    addmarker(newLat,newLng);
}

var map;
function initMap() {
    var position = {
        lat: 25.0339031,
        lng: 121.5623212
    };
    map = new google.maps.Map(document.getElementById('map'), {
        center: position,
        zoom: 14
    });
    var marker = new google.maps.Marker({
    position: position,
    map: map
  });
}

function addmarker(lat,lng){
    var myLatlng = new google.maps.LatLng(lat,lng);
    var marker = new google.maps.Marker({
        position: myLatlng,
    });
    console.log("yes");
    // To add the marker to the map, call setMap();
    marker.setMap(map);
}

function clearMarkers(lat,lng) {
    var myLatlng = new google.maps.LatLng(lat,lng);
    marker = google.maps.Marker({
        position: myLatlng,
        title:"Hello World!"
    });
    markers.setMap(null);
     
}

function hide(){
    document.getElementById("map").style.display="none";//隱藏
}