{% extends 'base.html.twig' %}

{% block title %}Projectiles - Mon planning{% endblock %}
{% block body %}
<script src="https://unpkg.com/gojs@2.3.14/release/go.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet" type="text/css">
<script id="code">

  // define a custom grid layout that makes sure the length of each lane is the same
  // and that each lane is broad enough to hold its subgraph
  class PoolLayout extends go.GridLayout {
    constructor() {
      super();
      this.MINLENGTH = 200;  // this controls the minimum length of any swimlane
      this.MINBREADTH = 100;  // this controls the minimum breadth of any non-collapsed swimlane
      this.cellSize = new go.Size(1, 1);
      this.wrappingColumn = Infinity;
      this.wrappingWidth = Infinity;
      this.spacing = new go.Size(0, 0);
      this.alignment = go.GridLayout.Position;
    }

    doLayout(coll) {
      const diagram = this.diagram;
      if (diagram === null) return;
      diagram.startTransaction("PoolLayout");
      // make sure all of the Group Shapes are big enough
      const minlen = this.computeMinPoolLength();
      diagram.findTopLevelGroups().each(lane => {
        if (!(lane instanceof go.Group)) return;
        const shape = lane.selectionObject;
        if (shape !== null) {  // change the desiredSize to be big enough in both directions
          const sz = this.computeLaneSize(lane);
          shape.width = (!isNaN(shape.width)) ? Math.max(shape.width, sz.width) : sz.width;
          // if you want the height of all of the lanes to shrink as the maximum needed height decreases:
          shape.height = minlen;
          // if you want the height of all of the lanes to remain at the maximum height ever needed:
          //shape.height = (isNaN(shape.height) ? minlen : Math.max(shape.height, minlen));
          const cell = lane.resizeCellSize;
          if (!isNaN(shape.width) && !isNaN(cell.width) && cell.width > 0) shape.width = Math.ceil(shape.width / cell.width) * cell.width;
          if (!isNaN(shape.height) && !isNaN(cell.height) && cell.height > 0) shape.height = Math.ceil(shape.height / cell.height) * cell.height;
        }
      });
      // now do all of the usual stuff, according to whatever properties have been set on this GridLayout
      super.doLayout(coll);
      diagram.commitTransaction("PoolLayout");
    };

    // compute the minimum length of the whole diagram needed to hold all of the Lane Groups
    computeMinPoolLength() {
      let len = this.MINLENGTH;
      myDiagram.findTopLevelGroups().each(lane => {
        const holder = lane.placeholder;
        if (holder !== null) {
          const sz = holder.actualBounds;
          len = Math.max(len, sz.height);
        }
      });
      return len;
    }

    // compute the minimum size for a particular Lane Group
    computeLaneSize(lane) {
      // assert(lane instanceof go.Group);
      const sz = new go.Size(lane.isSubGraphExpanded ? this.MINBREADTH : 1, this.MINLENGTH);
      if (lane.isSubGraphExpanded) {
        const holder = lane.placeholder;
        if (holder !== null) {
          const hsz = holder.actualBounds;
          sz.width = Math.max(sz.width, hsz.width);
        }
      }
      // minimum breadth needs to be big enough to hold the header
      const hdr = lane.findObject("HEADER");
      if (hdr !== null) sz.width = Math.max(sz.width, hdr.actualBounds.width);
      return sz;
    }
  }
  // end PoolLayout class


    function init() {

      // Since 2.2 you can also author concise templates with method chaining instead of GraphObject.make
      // For details, see https://gojs.net/latest/intro/buildingObjects.html
      const $ = go.GraphObject.make;

      myDiagram =
        new go.Diagram("myDiagramDiv",
          {
            // make sure the top-left corner of the viewport is occupied
            contentAlignment: go.Spot.TopLeft,
            // use a simple layout to stack the top-level Groups next to each other
            layout: $(PoolLayout),
            // disallow nodes to be dragged to the diagram's background
            mouseDrop: e => {
              e.diagram.currentTool.doCancel();
            },
            // a clipboard copied node is pasted into the original node's group (i.e. lane).
            "commandHandler.copiesGroupKey": true,
            // automatically re-layout the swim lanes after dragging the selection
            "SelectionMoved": relayoutDiagram,  // this DiagramEvent listener is
            "SelectionCopied": relayoutDiagram, // defined above
            "undoManager.isEnabled": true,
            // allow TextEditingTool to start without selecting first
            "textEditingTool.starting": go.TextEditingTool.SingleClick
          });

      // Customize the dragging tool:
      // When dragging a node set its opacity to 0.6 and move it to be in front of other nodes
      myDiagram.toolManager.draggingTool.doActivate = function() {  // method override must be function, not =>
        go.DraggingTool.prototype.doActivate.call(this);
        this.currentPart.opacity = 0.6;
        this.currentPart.layerName = "Foreground";
      }
      myDiagram.toolManager.draggingTool.doDeactivate = function() {  // method override must be function, not =>
        this.currentPart.opacity = 1;
        this.currentPart.layerName = "";
        go.DraggingTool.prototype.doDeactivate.call(this);
      }

      // this is called after nodes have been moved
      function relayoutDiagram() {
        myDiagram.selection.each(n => n.invalidateLayout());
        myDiagram.layoutDiagram();
      }

      // There are only three note colors by default, blue, red, and yellow but you could add more here:
      const noteColors = ['#009CCC', '#CC293D', '#FFD700'];
      function getNoteColor(num) {
        return noteColors[Math.min(num, noteColors.length - 1)];
      }

      myDiagram.nodeTemplate =
        $(go.Node, "Horizontal",
          new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
          $(go.Shape, "Rectangle", {
            fill: '#009CCC', strokeWidth: 1, stroke: '#009CCC',
            width: 6, stretch: go.GraphObject.Vertical, alignment: go.Spot.Left,
            // if a user clicks the colored portion of a node, cycle through colors
            click: (e, obj) => {
              myDiagram.startTransaction("Update node color");
              let newColor = parseInt(obj.part.data.color) + 1;
              if (newColor > noteColors.length - 1) newColor = 0;
              myDiagram.model.setDataProperty(obj.part.data, "color", newColor);
              myDiagram.commitTransaction("Update node color");
            }
          },
            new go.Binding("fill", "color", getNoteColor),
            new go.Binding("stroke", "color", getNoteColor)
          ),
          $(go.Panel, "Auto",
            $(go.Shape, "Rectangle", { fill: "white", stroke: '#CCCCCC' }),
            $(go.Panel, "Table",
              { width: 130, minSize: new go.Size(NaN, 50) },
              $(go.TextBlock,
                {
                  name: 'TEXT',
                  margin: 6, font: '11px Lato, sans-serif', editable: true,
                  stroke: "#000", maxSize: new go.Size(130, NaN),
                  alignment: go.Spot.TopLeft
                },
                new go.Binding("text", "text").makeTwoWay())
            )
          )
        );

      // While dragging, highlight the dragged-over group
      function highlightGroup(grp, show) {
        if (show) {
          const part = myDiagram.toolManager.draggingTool.currentPart;
          if (part.containingGroup !== grp) {
            grp.isHighlighted = true;
            return;
          }
        }
        grp.isHighlighted = false;
      }

      myDiagram.groupTemplate =
        $(go.Group, "Vertical",
          {
            selectable: false,
            selectionObjectName: "SHAPE", // even though its not selectable, this is used in the layout
            layerName: "Background",  // all lanes are always behind all nodes and links
            layout: $(go.GridLayout,  // automatically lay out the lane's subgraph
              {
                wrappingColumn: 1,
                cellSize: new go.Size(1, 1),
                spacing: new go.Size(5, 5),
                alignment: go.GridLayout.Position,
                comparer: (a, b) => {  // can re-order tasks within a lane
                  const ay = a.location.y;
                  const by = b.location.y;
                  if (isNaN(ay) || isNaN(by)) return 0;
                  if (ay < by) return -1;
                  if (ay > by) return 1;
                  return 0;
                }
              }),
            click: (e, grp) => {  // allow simple click on group to clear selection
              if (!e.shift && !e.control && !e.meta) e.diagram.clearSelection();
            },
            computesBoundsIncludingLocation: true,
            computesBoundsAfterDrag: true,  // needed to prevent recomputing Group.placeholder bounds too soon
            handlesDragDropForMembers: true,  // don't need to define handlers on member Nodes and Links
            mouseDragEnter: (e, grp, prev) => highlightGroup(grp, true),
            mouseDragLeave: (e, grp, next) => highlightGroup(grp, false),
            mouseDrop: (e, grp) => {  // dropping a copy of some Nodes and Links onto this Group adds them to this Group
              // don't allow drag-and-dropping a mix of regular Nodes and Groups
              if (e.diagram.selection.all(n => !(n instanceof go.Group))) {
                const ok = grp.addMembers(grp.diagram.selection, true);
                if (!ok) grp.diagram.currentTool.doCancel();
              }
            },
            subGraphExpandedChanged: grp => {
              const shp = grp.selectionObject;
              if (grp.diagram.undoManager.isUndoingRedoing) return;
              if (grp.isSubGraphExpanded) {
                shp.width = grp.data.savedBreadth;
              } else {  // remember the original width
                if (!isNaN(shp.width)) grp.diagram.model.set(grp.data, "savedBreadth", shp.width);
                shp.width = NaN;
              }
            }
          },
          new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
          new go.Binding("isSubGraphExpanded", "expanded").makeTwoWay(),
          // the lane header consisting of a TextBlock and an expander button
          $(go.Panel, "Horizontal",
            { name: "HEADER", alignment: go.Spot.Left },
            $("SubGraphExpanderButton", { margin: 5 }),  // this remains always visible
            $(go.TextBlock,  // the lane label
              { font: "15px Lato, sans-serif", editable: true, margin: new go.Margin(2, 0, 0, 0) },
              // this is hidden when the swimlane is collapsed
              new go.Binding("visible", "isSubGraphExpanded").ofObject(),
              new go.Binding("text").makeTwoWay())
          ),  // end Horizontal Panel
          $(go.Panel, "Auto",  // the lane consisting of a background Shape and a Placeholder representing the subgraph
            $(go.Shape, "Rectangle",  // this is the resized object
              { name: "SHAPE", fill: "#F1F1F1", stroke: null, strokeWidth: 4 },  // strokeWidth controls space between lanes
              new go.Binding("fill", "isHighlighted", h => h ? "#D6D6D6" : "#F1F1F1").ofObject(),
              new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify)),
            $(go.Placeholder,
              { padding: 12, alignment: go.Spot.TopLeft }),
            $(go.TextBlock,  // this TextBlock is only seen when the swimlane is collapsed
              {
                name: "LABEL", font: "15px Lato, sans-serif", editable: true,
                angle: 90, alignment: go.Spot.TopLeft, margin: new go.Margin(4, 0, 0, 2)
              },
              new go.Binding("visible", "isSubGraphExpanded", e => !e).ofObject(),
              new go.Binding("text").makeTwoWay())
          )  // end Auto Panel
        );  // end Group

      // Set up an unmodeled Part as a legend, and place it directly on the diagram.
      myDiagram.add(
        $(go.Part, "Table",
          { position: new go.Point(10, 10), selectable: false },
          $(go.TextBlock, "Key",
            { row: 0, font: "700 14px Droid Serif, sans-serif" }),  // end row 0
          $(go.Panel, "Horizontal",
            { row: 1, alignment: go.Spot.Left },
            $(go.Shape, "Rectangle",
              { desiredSize: new go.Size(10, 10), fill: '#CC293D', margin: 5 }),
            $(go.TextBlock, "Halted",
              { font: "700 13px Droid Serif, sans-serif" })
          ),  // end row 1
          $(go.Panel, "Horizontal",
            { row: 2, alignment: go.Spot.Left },
            $(go.Shape, "Rectangle",
              { desiredSize: new go.Size(10, 10), fill: '#FFD700', margin: 5 }),
            $(go.TextBlock, "In Progress",
              { font: "700 13px Droid Serif, sans-serif" })
          ),  // end row 2
          $(go.Panel, "Horizontal",
            { row: 3, alignment: go.Spot.Left },
            $(go.Shape, "Rectangle",
              { desiredSize: new go.Size(10, 10), fill: '#009CCC', margin: 5 }),
            $(go.TextBlock, "Completed",
              { font: "700 13px Droid Serif, sans-serif" })
          ),  // end row 3
          $(go.Panel, "Horizontal",
            {
              row: 4,
              click: (e, node) => {
                e.diagram.startTransaction('add node');
                let sel = e.diagram.selection.first();
                if (!sel) sel = e.diagram.findTopLevelGroups().first();
                if (!(sel instanceof go.Group)) sel = sel.containingGroup;
                if (!sel) return;
                const newdata = { group: sel.key, loc: "0 9999", text: "New item " + sel.memberParts.count, color: 0 };
                e.diagram.model.addNodeData(newdata);
                e.diagram.commitTransaction('add node');
                const newnode = myDiagram.findNodeForData(newdata);
                e.diagram.select(newnode);
                e.diagram.commandHandler.editTextBlock();
                e.diagram.commandHandler.scrollToPart(newnode);
              },
              background: 'white',
              margin: new go.Margin(10, 4, 4, 4)
            },
            $(go.Panel, "Auto",
              $(go.Shape, "Rectangle", { strokeWidth: 0, stroke: null, fill: '#6FB583' }),
              $(go.Shape, "PlusLine", { margin: 6, strokeWidth: 2, width: 12, height: 12, stroke: 'white', background: '#6FB583' })
            ),
            $(go.TextBlock, "New item", { font: '10px Lato, sans-serif', margin: 6, })
          )
        )
      );

      load();

    }  // end init

    // Show the diagram's model in JSON format
    function save() {
      document.getElementById("mySavedModel").value = myDiagram.model.toJson();
      myDiagram.isModified = false;
    }
    function load() {
       $.ajax({
            url: '/tickets/ajax-list-kanban-project',
            method: "post",
            dataType: "json",
            data: {},
            async:      true, 
            success: function(data, status) {  
                myDiagram.model = data;
            },  
        }).done(function (response) {
        }).fail(function (response) {
        });

      //myDiagram.model = go.Model.fromJson(document.getElementById("mySavedModel").value);
    }
    window.addEventListener('DOMContentLoaded', init);
  </script>
<script>
    $(document).ready(function () {
        $(".page-title h1").text("Nouvelle version");
        $(".bandeau-img img").attr("src","https://edgarpetrus.fr/site-perso/web/app/uploads/2023/12/icon_ticket.png");

        /*$.ajax({
            url: '/tickets/ajax-list-kanban-project',
            method: "post",
            dataType: "json",
            data: {},
            async:      true, 
            success: function(data, status) {  
                
            },  
        }).done(function (response) {
        }).fail(function (response) {
        });*/

    })
</script>
<!--begin::Main-->
<div class="app-main flex-column flex-row-fluid " id="kt_app_main">
	<!--begin::Content wrapper-->
	<div class="d-flex flex-column flex-column-fluid">       
		<!--begin::Toolbar-->
		<div id="kt_app_toolbar" class="app-toolbar  py-3 py-lg-6 ">
            <!--begin::Toolbar container-->
        	<div id="kt_app_toolbar_container" class="app-container  container-xxl d-flex flex-stack ">
				<!--begin::Page title-->
				<div class="page-title d-flex flex-column justify-content-center flex-wrap me-3 ">
					<!--begin::Title-->
					<h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">Multipurpose</h1>
					<!--end::Title-->
					<!--begin::Breadcrumb-->
					<ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                        <!--begin::Item-->
                        <li class="breadcrumb-item text-muted">
							<a href="/" class="text-muted text-hover-primary">
                                Accueil                            
							</a>
                        </li>
                        <!--end::Item-->
                        <!--begin::Item-->
						<li class="breadcrumb-item">
							<span class="bullet bg-gray-500 w-5px h-2px"></span>
						</li>
                    	<!--end::Item--> 
                        <!--begin::Item-->
                        <li class="breadcrumb-item text-muted">
                            <a href="/versions" class="text-muted text-hover-primary">
                                Liste des versions                                  
							</a>
						</li>
                        <!--end::Item-->
                        <!--begin::Item-->
						<li class="breadcrumb-item">
							<span class="bullet bg-gray-500 w-5px h-2px"></span>
						</li>
                    	<!--end::Item--> 
                        <!--begin::Item-->
                        <li class="breadcrumb-item text-muted">
                            Nouvelle version                                 
						</li>
                        <!--end::Item-->            
                    </ul>
        			<!--end::Breadcrumb-->
    			</div>
				<!--end::Page title-->
				<!--begin::Actions-->
				<!--div class="d-flex align-items-center gap-2 gap-lg-3">
            		<a href="/uploads/projects/digistack-logo-6599e5052c381.png#" class="btn btn-sm fw-bold btn-secondary" data-bs-toggle="modal" data-bs-target="#kt_modal_create_app">Rollover</a>
					<a href="/user/add" class="btn btn-sm fw-bold btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_new_target">
						Ajouter un utilisateur
					</a>
				</div-->
			<!--end::Actions-->
			</div>
		<!--end::Toolbar container-->
		</div>
		<!--end::Toolbar-->                                        
                    
		<!--begin::Content-->
		<div id="kt_app_content" class="app-content  flex-column-fluid ">
			<!--begin::Content container-->
			<div id="kt_app_content_container" class="app-container  container-xxl ">
        <div id="allSampleContent" class="p-4 w-full">
          <div id="sample">
            <div id="myDiagramDiv" style="border: 1px solid black; width: 100%; height: 500px; position: relative; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); cursor: auto;">
              <canvas tabindex="0" width="2108" height="966" style="position: absolute; top: 0px; left: 0px; z-index: 2; user-select: none; touch-action: none; width: 1054px; height: 483px; cursor: auto;"></canvas>
              <div style="position: absolute; overflow: auto; width: 1054px; height: 498px; z-index: 1;">
              <div style="position: absolute; width: 1265px; height: 1px;"></div>
            </div>
          </div>
          <p></p>
          <button id="SaveButton" onclick="save()">Save</button>
          <button onclick="load()">Load</button>
          <br>
          <textarea id="mySavedModel" style="display: none;" style="width:100%;height:300px">
          { 
            "class": "go.GraphLinksModel",
            "nodeDataArray": [
              {"key":"Problems", "text":"Problems", "isGroup":true, "loc":"0 23.52284749830794" },
              {"key":"Reproduced", "text":"Reproduced", "isGroup":true, "color":"0", "loc":"109 23.52284749830794" },
              {"key":"Identified", "text":"Identified", "isGroup":true, "color":"0", "loc":"235 23.52284749830794" },
              {"key":"Fixing", "text":"Fixing", "isGroup":true, "color":"0", "loc":"343 23.52284749830794" },
              {"key":"Reviewing", "text":"Reviewing", "isGroup":true, "color":"0", "loc":"451 23.52284749830794"},
              {"key":"Testing", "text":"Testing", "isGroup":true, "color":"0", "loc":"562 23.52284749830794" },
              {"key":"Customer", "text":"Customer", "isGroup":true, "color":"0", "loc":"671 23.52284749830794" },
              {"key":1, "text":"text for oneA", "group":"Problems", "color":"0", "loc":"12 35.52284749830794"},
              {"key":2, "text":"text for oneB", "group":"Problems", "color":"1", "loc":"12 65.52284749830794"},
              {"key":3, "text":"text for oneC", "group":"Problems", "color":"0", "loc":"12 95.52284749830794"},
              {"key":4, "text":"text for oneD", "group":"Problems", "color":"1", "loc":"12 125.52284749830794"},
              {"key":5, "text":"text for twoA", "group":"Reproduced", "color":"1", "loc":"121 35.52284749830794"},
              {"key":6, "text":"text for twoB", "group":"Reproduced", "color":"1", "loc":"121 65.52284749830794"},
              {"key":7, "text":"text for twoC", "group":"Identified", "color":"0", "loc":"247 35.52284749830794"},
              {"key":8, "text":"text for twoD", "group":"Fixing", "color":"0", "loc":"355 35.52284749830794"},
              {"key":9, "text":"text for twoE", "group":"Reviewing", "color":"0", "loc":"463 35.52284749830794"},
              {"key":10, "text":"text for twoF", "group":"Reviewing", "color":"1", "loc":"463 65.52284749830794"},
              {"key":11, "text":"text for twoG", "group":"Testing", "color":"0", "loc":"574 35.52284749830794"},
              {"key":12, "text":"text for fourA", "group":"Customer", "color":"1", "loc":"683 35.52284749830794"},
              {"key":13, "text":"text for fourB", "group":"Customer", "color":"1", "loc":"683 65.52284749830794"},
              {"key":14, "text":"text for fourC", "group":"Customer", "color":"1", "loc":"683 95.52284749830794"},
              {"key":15, "text":"text for fourD", "group":"Customer", "color":"0", "loc":"683 125.52284749830794"},
              {"key":16, "text":"text for fiveA", "group":"Customer", "color":"0", "loc":"683 155.52284749830795"},
              {"key":16, "text":"text for fiveA", "group":"Customer", "color":"0", "loc":"683 155.52284749830795"}
            ],
            "linkDataArray": []
          }
          </textarea>
        </div>
			</div>
		</div>
	</div>
</div>
<!--end::Row-->

{% endblock %}