{% extends 'gestion/base.html' %}
{% load i18n %}
{% load static %}

{% block contents %}
<fieldset>
  <select id="sel">
    <option>--- choisir ---</option>
    {% for name, obj in collection.items %}
    <option
      data-selectid="{{ obj.select }}"
      data-digraphids="{{ obj.dgs }}">
      {{ name }}
    </option>
    {% endfor %}
  </select>
</fieldset>


<script type="module">
  import { digraph_select } from "{% static '/js/graphes1.js' %}"
  $("#sel").on("change", digraph_select)
  $(window).ready(digraph_select)
</script>
<div id="container" style="display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 10px;">
<div id="digraphs"
     style="width: 500px; border: 1px solid navy; padding: 3px; border-radius: 3px;"
     >
</div>
<div id="new"
     style="width: 500px; border: 1px solid navy; padding: 3px; border-radius: 3px;"
     >
  <h3>{% translate "Édition d'un nouveau graphe" %}</h3>
  <p style="font-family: fixed; font-size: 80%;">
    Les boutons à gauche permettent de remplir avec du texte...
  </p>
  <textarea id="new-text" cols="60" rows="10">digraph mon_graphe {
# end nodes
# end edges
}</textarea>
  <p>
    <button id="test-nouveau-graphe">
      Tester la syntaxe du nouveau graphe
    </button>
    <span id="visible-si-ok" style="display: none;">
      Syntax OK
      <button onclick="new_digraph()">
	Enregistrer le nouveau graphe sous ...
      </button>
      <input id="new-name"/>
    </span>
  </p>
  <div id="new-svg" style="border: 1px grey solid;">
  </div>
</div>
</div>

<script type="module" src="{% static '/js/svg.draggable.js/src/svg.draggable.js' %}">
</script>
<script type="module" src="{% static '/js/svg.panzoom.js/src/svg.panzoom.js' %}">
</script>


<script type="module">
  import { SVG, G } from "{% static 'js/svg.js/src/main.js' %}"
  import {toDot, addAnchors, makeDraw } from "{% static 'js/graphes1.js' %}"

  function nouveau_graphe(){
      $.post(
	  '/dot_to_svg',{
	      csrfmiddlewaretoken: getCookie('csrftoken'),
	      dot: $("#new-text").val()
	  },
	  function(data){
	      if (data.ok){
		  $("#new-svg").html("")
		  var draw = makeDraw(data.svg, "#new-svg", 150)
		  $("#visible-si-ok").show()
	      } else {
		  $("#new-svg").html(data.svg)
		  $("#visible-si-ok").hide()
	      }
	  })
  }
  $("#test-nouveau-graphe").on("click", nouveau_graphe)
</script>
{% endblock %}

