mechanical/static/home.js

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='';
    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+="<button class='btn text-white m-1' id='company " +obj[1][i].company+ "' onclick=\"factory_show(\'"+obj[1][i].company+"\');\"";
            inner += ">公司"+obj[1][i].company+"</button>";
            company_arr.push(obj[1][i].company);
            console.log(obj[1][i].company);
        }
    }
    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";
    }
    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='<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 type='button' style='font-size:24px; padding:20px 100px' class='btn text-white me-3 mb-3' id='factory " +obj[1][i].factory+ "' onclick=\"change_map(\'"+obj[1][i].company+"\',\'"+obj[1][i].factory+"\');\"";
            inner += ">廠區"+obj[1][i].factory+"</button><button  style='padding:20px 30px;font-size:20px;'  class='btn btn-primary mb-3' onclick=\"department_show(\'"+obj[1][i].company+"\',\'"+obj[1][i].factory+"\');\"> 查看</button>";
            factory_arr.push(obj[1][i].factory);
        }
    }
    //測試用
    inner+="<div><button type='button'  style='font-size:24px; padding:20px 100px' class='btn btn btn-success me-3 mb-3' id='factory B' onclick=\"change_map(\'"+obj[1][0].company+"\',\'B\');\"";
    inner += ">廠區B</button><button style='padding:20px 30px;font-size:20px;' class='btn btn-primary mb-3' onclick=\"department_show(\'"+obj[1][0].company+"\',\'B\');\">查看 </button></div>";
    inner+="<div><button type='button' style='font-size:24px; padding:20px 100px' class='btn btn btn-success  me-3 mb-3' id='factory C' onclick=\"change_map(\'"+obj[1][0].company+"\',\'C\');\"";
    inner += ">廠區C</button><button  style='padding:20px 30px;font-size:20px;'  class='btn btn-primary mb-3' onclick=\"department_show(\'"+obj[1][0].company+"\',\'C\');\"> 查看</button></div>";
    document.getElementById('company').innerHTML="";
    document.getElementById('company_text').innerHTML=company;
    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_health(factory_arr){
    //使工廠按鈕變色
    for(var i=0;i<factory_arr.length;i++){
        //初始化(健康)
        document.getElementById('factory ' + factory_arr[i]).style.background="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="<button type='button' class='btn btn-primary m-1' onclick=\"factory_show('"+company+"');\">返回</button> 目前位置: 公司 " + company+ " 廠區"+ factory + "";
    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='<table style="font-size: 16px;" class="table text-center"><thead><tr><th>機組</th><th>健康狀態</th><th>機組狀態</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>' + obj[1][i].group + '</td><td style="color:#078b07" class="fw-bold">健康<i class="fas fa-check-circle ps-1"></i></td>\<td><button class="btn btn-primary m-1" onclick=\"towerGroup_show();\">查看</button></td></tr>' ;
            tower_group_arr.push(obj[1][i].group);
            console.log(inner);
        }
    }
    inner += '</table>';
    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="<button type='button' class='btn btn-primary m-1' onclick=\"department_show('"+company+"','" + factory+"');\">返回</button>目前位置: 公司 " + company+ " 廠區 " + factory+ " 課"+ document.getElementById("department_list").value + "";
    document.getElementById('towergroup').innerHTML=inner;
}

function tower(tower_group){
    //顯示tower
    var inner= '<p class="fw-bold">機組'+tower_group +'</p><table style="font-size: 16px;" class="table text-center"><tr><th>設備</th><th>馬達效能</th><th>機組狀態</th></tr>';
    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>' + obj[1][i].tower + '</td><td style="color:#078b07" class="fw-bold">健康<i class="fas fa-check-circle ps-1"></i></td>\<td><button class="btn btn-primary m-1">查看</button></td></tr>';
        }
    }

    inner += '</table>'
    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";//隱藏
}