{#      MCcoordstore - simple web based store for Minecraft points of interest
#      Copyright (C) 2021  Daniel Philip Weatherill

#      This program is free software: you can redistribute it and/or modify it
# under the terms of the GNU Affero General Public License as published by the
# Free Software Foundation, either version 3 of the License, or (at your option)
# any later version.

#      This program is distributed in the hope that it will be useful, but WITHOUT
# ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
# FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more
# details.

#      You should have received a copy of the GNU Affero General Public License
# along with this program.  If not, see <http://www.gnu.org/licenses/>.
#}



{% extends "base.htm" %}

{% block headblock %}
<script src="https://cdn.plot.ly/plotly-2.8.3.min.js"></script>
<script src="/static/scripts/plotly_render.js"></script>

{% endblock %}

{% block content %}
<h1> Add POI manually </h1>

<form method="post">
  {{ form.csrf_token }}
  {{ form.name.label }} {{ form.name }} <br>
  {{ form.x.label }} {{ form.x }}
  {{ form.y.label }} {{ form.y }}
  {{ form.z.label }} {{ form.z }} <br>
  {{ form.coordtp.label}} {{ form.coordtp }}
  {{ form.public.label }} {{ form.public }} <br>

  {{ form.style.label}} {{ form.style}}
  <h3> style preview </h3>
  <div id="stylepreview"> </div> <br>
  <input type="submit">
</form>

<script>

  const cached_styles = new Map();
  const rdr = new PlotlyShapeRenderer();

  async function updatestylepreview() {
      const styleid = Number(formelem.value);
      if(! cached_styles.has(styleid))
      {
	  const url = new URL("/api/style/" + String(styleid), document.URL);
	  URL.search = new URLSearchParams([["fields[style]",
					     "style"]]).toString();

	  const options = {method : "GET",
			   headers : {"Accept" : "application/vnd.api+json"},
			   credentials : "same-origin"};
	  const response =  await fetch(url, options);
	  const rjson = await response.json();
	  console.log(rjson);
	  const symbol = rjson["data"]["attributes"]["style"]["marker.symbol"];
	  const size = Number(rjson["data"]["attributes"]["style"]["marker.size"]);
	  const idx = rdr.add_style(symbol, size);
	  const pathitem = rdr.render_one_svg(idx);
	  svg_style_helper(pathitem, rjson["data"]["attributes"]["style"]);
	  const data = { renderid : idx,
			 svgpath : pathitem}
	  cached_styles.set(styleid, data);
      }

      const styledata = cached_styles.get(styleid);

      const tgt = document.getElementById("stylepreview");
      tgt.innerHTML = "";
      const svgitem = svg_centred_render_helper(styledata.svgpath, tgt, -1,
      null, 10);
      
  }

  const formelem = document.getElementById("styleselectfield");
  formelem.addEventListener(
      'change',
      updatestylepreview);


  updatestylepreview();

  
</script>




{% endblock %}