index.html 4.09 KB
Newer Older
Adam Feuer's avatar
Adam Feuer committed
1 2
<!DOCTYPE html>
<head>
Maxym Borodenko's avatar
Maxym Borodenko committed
3 4 5 6
    <meta charset="utf-8">
    <link rel="stylesheet" href="foundation.css"/>
    <link rel="stylesheet" href="app.css"/>
    <link rel="stylesheet" href="d3-context-menu.css"/>
Adam Feuer's avatar
Adam Feuer committed
7 8
</head>
<body>
Maxym Borodenko's avatar
Maxym Borodenko committed
9

Maxym Borodenko's avatar
Maxym Borodenko committed
10 11 12 13 14 15 16 17 18 19
<ul class="small-block-grid-2 medium-block-grid-4 large-block-grid-9">
    <li>
        <button id="downloadJsonBtn" type="button">Download JSON</button>
        <a id="downloadAnchorElem" style="display:none"></a>
    </li>
    <li>
        <button id="importJsonBtn">Import JSON</button>
        <input type="file" id="selectFiles" value="Import" accept=".json" />
    </li>
</ul>
Maxym Borodenko's avatar
Maxym Borodenko committed
20 21 22 23 24 25

<div id="RenameNodeModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
    <h2 id="modalTitle">Rename Node</h2>
    <form id="RenameNodeForm">
        <div class="row">
            <div class="large-12 columns">
Adam Feuer's avatar
Adam Feuer committed
26
                <label>Node name
Maxym Borodenko's avatar
Maxym Borodenko committed
27
                    <input type="text" class="inputName" id='RenameNodeName' placeholder="node name"/>
Adam Feuer's avatar
Adam Feuer committed
28 29
                </label>
            </div>
Maxym Borodenko's avatar
Maxym Borodenko committed
30 31 32
        </div>
        <div class="row">
            <div class="large-8 columns">
Adam Feuer's avatar
Adam Feuer committed
33
                &nbsp;
Maxym Borodenko's avatar
Maxym Borodenko committed
34 35
            </div>
            <div class="large-4 columns">
Adam Feuer's avatar
Adam Feuer committed
36 37 38 39
                <a href="#" class="button info" onclick="close_rename_node_modal()">Cancel</a>
                <a href="#" class="button success" onclick="rename_node()">Rename</a>
            </div>
        </div>
Maxym Borodenko's avatar
Maxym Borodenko committed
40 41 42
    </form>
    <a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>
Adam Feuer's avatar
Adam Feuer committed
43

Maxym Borodenko's avatar
Maxym Borodenko committed
44 45 46 47 48 49
<div id="CreateNodeModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true"
     role="dialog">
    <h2 id="modalTitle">Create Node</h2>
    <form id="CreateNodeForm">
        <div class="row">
            <div class="large-12 columns">
Adam Feuer's avatar
Adam Feuer committed
50
                <label>Node name
Maxym Borodenko's avatar
Maxym Borodenko committed
51
                    <input type="text" class="inputName" id='CreateNodeName' placeholder="node name"/>
Adam Feuer's avatar
Adam Feuer committed
52 53
                </label>
            </div>
Maxym Borodenko's avatar
Maxym Borodenko committed
54 55 56
        </div>
        <div class="row">
            <div class="large-8 columns">
Adam Feuer's avatar
Adam Feuer committed
57
                &nbsp;
Maxym Borodenko's avatar
Maxym Borodenko committed
58 59
            </div>
            <div class="large-4 columns">
Adam Feuer's avatar
Adam Feuer committed
60 61 62 63
                <a href="#" class="button info" onclick="close_create_node_modal()">Cancel</a>
                <a href="#" class="button success" onclick="create_node()">Create</a>
            </div>
        </div>
Maxym Borodenko's avatar
Maxym Borodenko committed
64 65 66
    </form>
    <a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>
Adam Feuer's avatar
Adam Feuer committed
67

Maxym Borodenko's avatar
Maxym Borodenko committed
68
<div id="tree-container"></div>
Adam Feuer's avatar
Adam Feuer committed
69

Maxym Borodenko's avatar
Maxym Borodenko committed
70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95
<script src="d3.v3.min.js"></script>
<script src="dndTree.js"></script>
<script src="d3-context-menu.js"></script>
<script src="underscore-min.js"></script>
<script src="jquery.js"></script>
<script src="fastclick.js"></script>
<script src="foundation.min.js"></script>
<script>
  // for the first initialization
  $('document').ready(function() {
    $(document).foundation();
    $(document).on('opened', '[data-reveal]', function() {
      var element = $(".inputName:visible").first();
      element.focus(function() {
        this.selectionStart = this.selectionEnd = this.value.length;
      });
      element.focus();
    });
    $('#RenameNodeForm').submit(function(e) {
      rename_node();
      return false;
    });
    $('#CreateNodeForm').submit(function(e) {
      create_node();
      return false;
    });
Maxym Borodenko's avatar
Maxym Borodenko committed
96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117

    $('#importJsonBtn').on('click', () => {
      $('#tree-container').remove();
      $('body').append($("<div id='tree-container' />"));

      let files = document.getElementById('selectFiles').files;
      if (files.length <= 0) {
        return false;
      }
      if (files[0].type !== 'application/json') {
        console.log('Unsupported file type to import.');
        return false;
      }

      let fileReader = new FileReader();

      fileReader.onload = (e) => {
        let result = JSON.parse(e.target.result);
        draw_tree(null, result);
      };
      fileReader.readAsText(files.item(0));
    });
Matija Obreza's avatar
Matija Obreza committed
118 119 120 121 122 123 124 125 126 127 128 129 130

    // initial tree
    const TREE = {
      "name": "total genepool of this crop",
      "children": [{
          "name": "cultivated material"
        },
        {
          "name": "wild material"
        }
      ]
    };
    draw_tree(null, TREE);
Maxym Borodenko's avatar
Maxym Borodenko committed
131 132
  });
</script>
Adam Feuer's avatar
Adam Feuer committed
133 134
</body>
</html>