<!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 meshes = /*[[${meshes}]]*/"meshes";
		console.log(meshes);
		const city = /*[[${city}]]*/"city";
		console.log(city);

var __map = null;
var __markerLayer = null;
var __lineLayer = null;

function loadMap() {

	// ICON のスタイル
	style = new ol.style.Style({
	    image: new ol.style.Icon({
	        src: '/task-bldg/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: '/task-bldg/img/PREPARATION.png',
	        anchor: [0.5, 0.5],
	        scale: 1
	    })
	});
	var status2 = new ol.style.Style({
	    image: new ol.style.Icon({
	        src: '/task-bldg/img/ACCEPTING.png',
	        anchor: [0.5, 0.5],
	        scale: 1
	    })
	});
	var status3 = new ol.style.Style({
	    image: new ol.style.Icon({
	        src: '/task-bldg/img/RESERVED.png',
	        anchor: [0.5, 0.5],
	        scale: 1
	    })
	});
	var status4 = new ol.style.Style({
	    image: new ol.style.Icon({
	        src: '/task-bldg/img/EDITING.png',
	        anchor: [0.5, 0.5],
	        scale: 1
	    })
	});
	var status5 = new ol.style.Style({
	    image: new ol.style.Icon({
	        src: '/task-bldg/img/NG.png',
	        anchor: [0.5, 0.5],
	        scale: 1
	    })
	});
	var status6 = new ol.style.Style({
	    image: new ol.style.Icon({
	        src: '/task-bldg/img/OK.png',
	        anchor: [0.5, 0.5],
	        scale: 1
	    })
	});
	
	// マップの作成
	__map = new ol.Map({
		target: 'map',
		layers: [
			new ol.layer.Tile({
				source: new ol.source.OSM()
			})
		],
		view: new ol.View({
			center: ol.proj.fromLonLat([Number(city.lng),Number(city.lat)]),
			zoom: 12
		})
	});
	
	var title = document.getElementById("title");
	title.innerHTML = "PLATEAU OSMデータ : " + city.citycode + " " + city.cityname;

    // 表示するためのレイヤーを作成する
    __markerLayer = new ol.layer.Vector({
        source: new ol.source.Vector()
    });
    __map.addLayer(__markerLayer);
    
    // ポップアップを表示するためのオーバーレイを作成する
    __overlay = new ol.Overlay({
        element: document.getElementById('popup'),
        positioning: 'bottom-center'
    });
    
	{
	    $(meshes).each(function() {
			
			// Icon
		    var feature = new ol.Feature({
		        geometry: new ol.geom.Point(ol.proj.fromLonLat([Number(this.lng),Number(this.lat)])),
		        code: this.meshcode
		    });
		    feature.information = this;
		    if (this.status == "PREPARATION") {
		    	feature.setStyle(status1);
		    }
		    else if (this.status == "ACCEPTING") {
		    	feature.setStyle(status2);
		    }
		    else if (this.status == "RESERVED") {
		    	feature.setStyle(status3);
		    }
		    else if (this.status == "EDITING") {
		    	feature.setStyle(status4);
		    }
		    else if (this.status == "NG") {
		    	feature.setStyle(status5);
		    }
		    else if (this.status == "OK") {
		    	feature.setStyle(status6);
		    }
		    else {
		    	feature.setStyle(style);
		    }

		    __markerLayer.getSource().addFeature(feature);
		    __map.getView().setCenter(ol.proj.fromLonLat([Number(this.lng),Number(this.lat)]));
		    
		    // LineString
			if (this.line != null) {
				var lineString = JSON.parse(this.line);
				var points = lineString.coordinates;
				console.log(points);
				drawPolygon([points]);
			}
	    });
	    
	    // 地図のクリックイベントを設定
	    __map.on('click', function (evt) {
	        var feature = __map.forEachFeatureAtPixel(
				evt.pixel,
	            function (feature) {
	                return feature;
	            }
	        );
	        if (feature) {
	            var coordinates = feature.getGeometry().getCoordinates();
	            var info = feature.information;
	            var element = __overlay.getElement();
	            var descriptionHTML =
	                "<div>" + info.citycode +" : "+ info.cityname + "</div>" +
	                "<div>code: " + info.meshcode + "</div>" +
	                "<div>file: " + info.path + "</div>" +
	                "<div>version: " + info.version + "</div>" +
	                "<div>status: " + info.status + "</div>" +
	                "<div><a href='/task-bldg/tasks?citycode=" + city.citycode + "&meshcode=" + info.meshcode +"'>タスク</a></div>";
	            element.innerHTML = descriptionHTML;
	            __overlay.setPosition(coordinates);
	            __map.addOverlay(__overlay);
	        } else {
	            __map.removeOverlay(__overlay);
	        }
	    });
	};
}

/**
 * ポリゴンを描画する
 */
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('tokyotower');

    var vector = new ol.source.Vector({
        features: [feature]
    });
    var 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()'>
  <input type="hidden" id="city" th:value="${city}" />

  <!-- サイドバーの表示 -->
  <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" id='title'></h6>
              </div>
              <div class="card-body">

                <!-- マップ -->
                <div id="wrap">
                  <div class="header">
                    <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>
                      <td>
                        <a th:text="#{return}" th:href="@{/}" class="btn btn-navy">
                        </a>
                      </td>
                    </tr>
                  </tbody>
                </table>

                <table class="table table-bordered">
                  <thead>
                    <tr>
                      <th th:text="#{status}"></th>
                      <th th:text="#{meshcode}"></th>
                      <th>version</th>
                      <th th:text="#{path}"></th>
                      <th th:text="#{editor}"></th>
                      <th th:text="#{operation}"></th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr th:each="mesh : ${meshes}" th:object="${mesh}">
                      <td><img th:alt="*{status}" th:src="@{/img/{status}.png(status=*{status})}"></img></td>
                      <td th:text="*{meshcode}"></td>
                      <td th:text="*{version}"></td>
                      <td th:text="*{path}"></td>
                      <td><a th:text="*{username}" th:href="@{https://www.openstreetmap.org/user/{user}(user=*{username})}"></a></td>
                      <td>
                        <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="@{/tasks?citycode={city.citycode}&meshcode={meshcode}(city.citycode=*{city.citycode},meshcode=*{meshcode})}" class="btn btn-navy">
                          <i class="bi bi-pencil-square" th:text="#{operation}"></i>
                        </a>
                      </td>
                    </tr>
                  </tbody>
                </table>
                
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>

</body>
</html>
