Untitled

<!DOCTYPE html>
<html>
    <head>
        <title>Pipe layout</title>
    </head>
    <body>
        <h2>Pipe layout viewer</h2>

        <input id="spinner" class='selector' size=3><button id=btn_submit >Submit value</button>
   <div id=d1></div>

        <button style="margin: 10px;" onclick="loadJSON()">Load pipes</button>

        <div id="myDiagramDiv"
     style="width:500px; height:500px; background-color: #DAE4E4;"></div>
     <p id="selectedPipeInfo">Click a pipe to get info</p>

     <html>
      <head>
         <meta charset="utf-8"/>

         <title>Ammount of pipes</title>
      </head>
   </body>
   </html>


    </body>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.8.33/go-debug.js"></script>
    <!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> -->
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
   <link href="https://code.jquery.com/ui/1.12.1/themes/blitzer/jquery-ui.css" rel="stylesheet">

   <script>
      $(document).ready(function() {
         $( "#spinner" ).spinner();
         $('#btn_submit').click(function(){
            var value = $( "#spinner" ).spinner( "value" );
            $('#d1').html("Ammount pipes : " + value);
         })
      })
   </script>

    <script type = "application/javascript">

    function loadJSON(){
    var data_location = "http://127.0.0.1:8080/json?type=pipeInst";
    var http_request = new XMLHttpRequest();
    try{
       // Opera 8.0+, Firefox, Chrome, Safari
       http_request = new XMLHttpRequest();
    }catch (e){
       // Internet Explorer Browsers
       try{
          http_request = new ActiveXObject("Msxml2.XMLHTTP");

       }catch (e) {

          try{
             http_request = new ActiveXObject("Microsoft.XMLHTTP");
          }catch (e){
             // Something went wrong
             alert("Your browser broke!");
             return false;
          }

       }
    }

    http_request.onreadystatechange = function(){

       if (http_request.readyState == 4 && http_request.status == 200 ){
           var jsonObj = JSON.parse(http_request.responseText);

           let nodeArray = [];
           let linkArray = [];

           for(var i = 0; i < jsonObj.results.length; i++) {
            var element = jsonObj.results[i];
            nodeArray.push({key: element.resInst, color: "yellow", text: "pipe "+i, object: element});

            if(i === jsonObj.results.length - 1) {
               linkArray.push({from: element.resInst, to: jsonObj.results[0].resInst});
            } else {
               linkArray.push({from: element.resInst, to: jsonObj.results[i+1].resInst})
            }
           }

           drawPipes(nodeArray, linkArray);
        }
    }

    http_request.open("GET", data_location, true);
    http_request.send();
 }


 function nodeClicked(e, obj) {
      var node = obj.part;
      var msg = "Pipe instance pid: " +  node.data.object.resInst + "\n"
                + "Connectors: " + JSON.stringify(node.data.object.cList) + "\n"
                + "Chambers: " + JSON.stringify(node.data.object.chambers) + "\n";
      $("#selectedPipeInfo").text("Selected: \n" + msg);
    }

function drawPipes(array, linkArray) {
   var $$ = go.GraphObject.make;  // for conciseness in defining templates, avoid $ due to jQuery
    myDiagram = $$(go.Diagram, "myDiagramDiv",  // create a Diagram for the DIV HTML element
                   {
                     initialContentAlignment: go.Spot.TopCenter,  // center the content
                     "undoManager.isEnabled": true  // enable undo & redo
                   });
    // define a simple Node template
    myDiagram.nodeTemplate =
      $$(go.Node, "Auto", {
         click: nodeClicked,
      }, // the Shape will go around the TextBlock
        $$(go.Shape, "RoundedRectangle", { strokeWidth: 0},
          // Shape.fill is bound to Node.data.color
          new go.Binding("fill", "color")),
        $$(go.TextBlock,
          { margin: 8 },  // some room around the text
          // TextBlock.text is bound to Node.data.key
          new go.Binding("text", "key"))
      );

      myDiagram.linkTemplate =
      $$(go.Link,
         {
         curve: go.Link.JumpOver,
         reshapable: true,
         resegmentable: true,
         relinkableFrom: false,
         relinkableTo: false,
         fromPortId: "",
         toPortId: "",
         corner: 2,
         name: 'LINK'
         },
         $$(go.Shape, {stroke: 'black', strokeWidth: 1 }),
         $$(go.Shape, { toArrow: "Standard", fill: 'gray', stroke: null })
      );

        myDiagram.model = new go.GraphLinksModel(array, linkArray);
   }

   function LayeredLayout() {
      go.LayeredDigraphLayout.call(this);
   }
    </script>
</html>