<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
  layout:decorate="~{layout/layout}">
<head>
  <meta charset="UTF-8" th:remove="tag">
	<script th:inline="javascript">
		const citycode = /*[[${citycode}]]*/"citycode";
		const cityname = /*[[${cityname}]]*/"cityname";
		const meshcode = /*[[${meshcode}]]*/"meshcode";
		const tasks = /*[[${tasks}]]*/"tasks";
		const meshstr = /*[[${meshstr}]]*/"meshstr";
		const citystr = /*[[${citystr}]]*/"citystr";
	  
var mesh = JSON.parse(meshstr);
var city = JSON.parse(citystr);
var __map = null;
var __markerLayer = null;
var __lineLayer = null;

var dir = "./";
var line = [];
  
function loadMap() {
	
	// 'citycode'に対応するデータを読む
	dir = mesh.path + "/bldg/";
	var lonlat = [139.7637,35.6808];

	// マップの作成
	__map = new ol.Map({
		target: 'map',
		layers: [
			new ol.layer.Tile({
				source: new ol.source.OSM()
			})
		],
		view: new ol.View({
			center: ol.proj.fromLonLat(lonlat),
			zoom: 15
		})
	});
	
    // 表示するためのレイヤーを作成する
    __markerLayer = new ol.layer.Vector({
        source: new ol.source.Vector()
    });
    __map.addLayer(__markerLayer);
    
    // ポップアップを表示するためのオーバーレイを作成する
    __overlay = new ol.Overlay({
        element: document.getElementById('popup'),
        positioning: 'bottom-center'
    });

	// ICON のスタイル
	style = new ol.style.Style({
	    image: new ol.style.Icon({
	        src: './img/osm_200x200.png',
	        anchor: [0.5, 0.5],
	        scale: 0.2
	    }),
	    stroke: new ol.style.Stroke({color: '#ff33ff', width: 10})
	});
	
	var status1 = new ol.style.Style({
	    image: new ol.style.Icon({
	        src: './img/PREPARATION.png',
	        anchor: [0.5, 0.5],
	        scale: 2
	    })
	});
	var status2 = new ol.style.Style({
	    image: new ol.style.Icon({
	        src: './img/ACCEPTING.png',
	        anchor: [0.5, 0.5],
	        scale: 2
	    })
	});
	var status3 = new ol.style.Style({
	    image: new ol.style.Icon({
	        src: './img/RESERVED.png',
	        anchor: [0.5, 0.5],
	        scale: 2
	    })
	});
	var status4 = new ol.style.Style({
	    image: new ol.style.Icon({
	        src: './img/EDITING.png',
	        anchor: [0.5, 0.5],
	        scale: 2
	    })
	});
	var status5 = new ol.style.Style({
	    image: new ol.style.Icon({
	        src: './img/NG.png',
	        anchor: [0.5, 0.5],
	        scale: 2
	    })
	});
	var status6 = new ol.style.Style({
	    image: new ol.style.Icon({
	        src: './img/OK.png',
	        anchor: [0.5, 0.5],
	        scale: 2
	    })
	});
	
	// マーカーの表示
    featurePoint = new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([Number(mesh.lng),Number(mesh.lat)])),
        code: mesh.meshcode
    });
    featurePoint.information = mesh;
    if (mesh.status == "PREPARATION") {
    	featurePoint.setStyle(status1);
    }
    else if (mesh.status == "ACCEPTING") {
    	featurePoint.setStyle(status2);
    }
    else if (mesh.status == "RESERVED") {
    	featurePoint.setStyle(status3);
    }
    else if (mesh.status == "EDITING") {
    	featurePoint.setStyle(status4);
    }
    else if (mesh.status == "NG") {
    	featurePoint.setStyle(status5);
    }
    else if (mesh.status == "OK") {
    	featurePoint.setStyle(status6);
    }
    else {
    	featurePoint.setStyle(style);
    }

    __markerLayer.getSource().addFeature(featurePoint);
    __map.getView().setCenter(ol.proj.fromLonLat([Number(mesh.lng),Number(mesh.lat)]));

	var line = JSON.parse(mesh.line);
	drawPolygon([line.coordinates]);

    // 地図のクリックイベントを設定
    __map.on('click', function (evt) {
        var feature = __map.forEachFeatureAtPixel(
			evt.pixel,
            function (feature) {
                return feature;
            }
        );
        if (feature) {
            var coordinates = feature.getGeometry().getCoordinates();
            var info = featurePoint.information;
            var element = __overlay.getElement();
            var descriptionHTML =
                "<div>" + city.folder + "</div>" +
                "<div>code: " + info.meshcode + "</div>" +
                "<div>version: " + info.version + "</div>" +
                "<div>status: " + info.status + "</div>" +
                "<div><a href='"+ city.site + city.folder +"/bldg/"+ info.path +"'>" + info.path + "</a></div>";
            element.innerHTML = descriptionHTML;
            __overlay.setPosition(coordinates);
            __map.addOverlay(__overlay);
        } else {
            __map.removeOverlay(__overlay);
        }
    });
}

/**
 * ポリゴンを描画する
 ret: routeLayer
 */
function drawPolygon(coordinates) {
    // ジオメトリの作成
    var polygon = new ol.geom.Polygon([]);
    polygon.setCoordinates(coordinates);

    // 地物オブジェクトの作成　〜　レイヤーの作成
    var feature = new ol.Feature(
        polygon.transform('EPSG:4326', 'EPSG:3857')
    );
    feature.setId(meshcode);

    var vector = new ol.source.Vector({
        features: [feature]
    });
    routeLayer = new ol.layer.Vector({
        source: vector,
        style: new ol.style.Style({
            stroke: new ol.style.Stroke({ color: '#000000', width: 2 })
            //fill: new ol.style.Fill({ color: [0, 0, 0, 0.2] })
        })
    });

    // 作成したポリゴンをレイヤーにのせる
    __map.addLayer(routeLayer);
}
  </script>
</head>
<body onload='loadMap()'>

  <!-- サイドバーの表示 -->
  <div layout:fragment="sidebar" th:replace="~{fragments/sidebar :: sidebar}">
  </div>

  <!-- コンテンツの表示 -->
  <div layout:fragment="content">
    <main class="offcanvas-outside bg-light">
      <div class="container-fluid">
        <!-- トグルボタン -->
        <div th:replace="~{fragments/sidebar :: toggler}">
        </div>

        <div class="row">
          <div class="col">

            <div class="card shadow">
              <div class="card-header">
                <h6 class="text-navy my-2">Plateau 3D都市データ</h6>
              </div>
              <div class="card-body">

                <!-- マップ -->
                <div id="wrap">
                  <div class="header">
                    <div id='title'></div>
                    <div id='map'></div>
                  </div>
                    
                  <!-- ポップアップ -->
                  <div id='popup' class='ol-popup'>
                    <a href='#' id='popup-closer' class='ol-popup-closer'></a>
                    <div id='popup-content'></div>
                  </div>
                </div>
                
                <table class="table table-bordered">
                  <tbody th:object="${mesh}">
                    <tr>
                      <th>
                        <div>
                          <i th:text="#{cityname}"></i> : <i th:text="*{citycode}"></i> <i th:text="${cityname}"></i>
                        </div>
                        <div>
                          <i th:text="#{meshcode}"></i> : <i th:text="*{meshcode}"></i>
                        </div>
                        <div>
                          <i th:text="#{status}"></i> : <img th:alt="*{status}" th:src="@{/img/{status}.png(status=*{status})}"></img> <i th:text="*{status}"></i>
                        </div>
                      </th>
                    </tr>
                    <tr>
                      <td>
                        <a th:text="#{return}" th:href="@{/mesh/{citycode}(citycode=*{citycode})}" class="btn btn-navy">
                        </a>

                        <a th:text="#{download}" th:href="@{{site}{folder}/bldg/{path}(site=*{city.site},folder=*{city.folder},path=*{path})}" class="btn btn-navy">
                        </a>
                        
                        <a th:href="@{/task/add?op=RESERVE&citycode={citycode}&meshcode={meshcode}(citycode=*{citycode},meshcode=*{meshcode})}" th:readonly="*{status} eq 'RESERVED'" class="btn btn-navy">
                          <i class="bi bi-pencil-square" th:text="#{reserve}" ></i>
                        </a>
                        
                        <a th:href="@{/task/add?op=CANCEL&citycode={citycode}&meshcode={meshcode}(citycode=*{citycode},meshcode=*{meshcode})}" class="btn btn-navy">
                          <i class="bi bi-pencil-square" th:text="#{cancel}"></i>
                        </a>
                        
                        <a th:href="@{/task/add?op=NG&citycode={citycode}&meshcode={meshcode}(citycode=*{citycode},meshcode=*{meshcode})}" class="btn btn-navy">
                          <i class="bi bi-pencil-square" th:text="#{NG}"></i>
                        </a>
                        
                        <a th:href="@{/task/add?op=OK&citycode={citycode}&meshcode={meshcode}(citycode=*{citycode},meshcode=*{meshcode})}" class="btn btn-navy">
                          <i class="bi bi-pencil-square" th:text="#{OK}"></i>
                        </a>
                      </td>
                    </tr>
                  </tbody>
                </table>
            
                <table class="table table-bordered">
                  <thead>
                    <tr>
                      <th colspan="6">履歴</th>
                    </tr>
                    <tr>
                      <th th:text="#{updateTime}"></th>
                      <th th:text="#{status}"></th>
                      <th th:text="#{editor}"></th>
                      <th th:text="#{changeSet}"></th>
                      <th th:text="#{operation}"></th>
                      <th th:text="#{comment}"></th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr th:each="task : ${tasks}" th:object="${task}">
                      <td th:text="*{updateTime}"></td>
                      <td><img th:alt="*{status}" th:src="@{/img/{status}.png(status=*{status})}"></img></td>
                      <td><a th:text="*{username}" th:href="@{https://www.openstreetmap.org/user/{user}(user=*{username})}"></a></td>
                      <td><a th:text="*{changeSet}" th:href="@{https://www.openstreetmap.org/changeset/{changeSet}(changeSet=*{changeSet})}"></a></td>
                      <td th:text="*{operation}"></td>
                      <td th:text="*{comment}"></td>
                    </tr>
                  </tbody>
                </table>
                
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
  

</body>
</html>
