Commit 097122bd authored by Matija Obreza's avatar Matija Obreza

Top menu GUI updated

- Using foundation-sites 6+, jquery 3+
- Attempting to load JSON from gitlab
parent fdb0108a
......@@ -7,20 +7,39 @@
<body>
<div class="flexcontainer">
<div class="menubar">
<div class="row">
<div class="columns medium-3">
<button id="instructionsBtn" type="button">Help</button>
</div>
<div class="columns medium-3">
<button id="resetBtn" type="button">New tree / Clear</button>
</div>
<div class="columns medium-3">
<button id="downloadJsonBtn" type="button">Download JSON</button>
<a id="downloadAnchorElem" style="display:none"></a>
<div class="top-bar">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">Diversity Trees</li>
<li>
<a href="#">Load tree</a>
<ul class="menu vertical" id="existing-trees">
<li><a href="#" class="load-tree" x-url="wheat.json">Wheat #1</a></li>
<li><a href="#" class="load-tree">TBD</a></li>
<li><a href="#" class="load-tree">TBD</a></li>
</ul>
</li>
<li>
<a href="#">Current tree</a>
<ul class="menu vertical">
<li><a href="#" id="resetBtn">New tree / Clear</a></li>
<li>
<a href="#" id="downloadJsonBtn">Download tree</a>
<a id="downloadAnchorElem" style="display:none"></a>
</li>
<li><a href="#" id="importJsonBtn">Upload tree</a>
<input type="file" id="selectFiles" value="Import" accept=".json" />
</li>
</ul>
</li>
</ul>
</div>
<div class="columns medium-3">
<button id="importJsonBtn">Import JSON</button>
<input type="file" id="selectFiles" value="Import" accept=".json" />
<div class="top-bar-right">
<ul class="menu">
<li><a href="#" id="instructionsBtn">Help</a></li>
<!-- <li><input type="search" placeholder="Search"></li>
<li><button type="button" class="button">Search</button></li> -->
</ul>
</div>
</div>
</div>
......@@ -29,14 +48,15 @@
</div>
</div>
<div id="RenameNodeModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<div id="RenameNodeModal" class="reveal" 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">
<label>Node name
<input type="text" class="inputName" id='RenameNodeName' placeholder="node name"/>
</label>
<label>
Node name
<input type="text" class="inputName" id='RenameNodeName' placeholder="node name"/>
</label>
</div>
</div>
<div class="row">
......@@ -44,15 +64,15 @@
&nbsp;
</div>
<div class="large-4 columns">
<a href="#" class="button info closeModal">Cancel</a>
<a href="#" data-close class="button info closeModal">Cancel</a>
<a href="#" class="button success">Rename</a>
</div>
</div>
</form>
<a class="close-reveal-modal" aria-label="Close">&#215;</a>
<a class="close-button" data-close aria-label="Close">&#215;</a>
</div>
<div id="CreateNodeModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<div id="CreateNodeModal" class="reveal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<h2 id="modalTitle">Create Node</h2>
<form id="CreateNodeForm">
<div class="row">
......@@ -67,22 +87,22 @@
&nbsp;
</div>
<div class="large-4 columns">
<a href="#" class="button info closeModal">Cancel</a>
<a href="#" data-close class="button info closeModal">Cancel</a>
<a href="#" class="button success">Create</a>
</div>
</div>
</form>
<a class="close-reveal-modal" aria-label="Close">&#215;</a>
<a class="close-button" data-close aria-label="Close">&#215;</a>
</div>
<div id="InstructionsModal" class="reveal-modal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<div id="InstructionsModal" class="reveal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<h2 id="modalTitle">Instructions</h2>
<div class="text">
<p>
Ding dong.
</p>
</div>
<a class="close-reveal-modal" aria-label="Close">&#215;</a>
<a class="close-button" data-close aria-label="Close">&#215;</a>
</div>
</body>
......
......@@ -224,6 +224,15 @@
"postcss-value-parser": "3.3.0"
}
},
"axios": {
"version": "0.17.1",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.17.1.tgz",
"integrity": "sha1-LY4+XQvb1zJ/kbyBT1xXZg+Bgk0=",
"requires": {
"follow-redirects": "1.4.1",
"is-buffer": "1.1.6"
}
},
"babel-code-frame": {
"version": "6.26.0",
"resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
......@@ -2611,6 +2620,14 @@
"integrity": "sha1-2uRqnXj74lKSJYzB54CkHZXAN4I=",
"dev": true
},
"follow-redirects": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.4.1.tgz",
"integrity": "sha512-uxYePVPogtya1ktGnAAXOacnbIuRMB4dkvqeNz2qTtTQsuzSfbDolV+wMMKxAmCx0bLgAKLbBOkjItMbbkR1vg==",
"requires": {
"debug": "3.1.0"
}
},
"for-in": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
......@@ -2648,9 +2665,13 @@
}
},
"foundation-sites": {
"version": "5.5.3",
"resolved": "https://registry.npmjs.org/foundation-sites/-/foundation-sites-5.5.3.tgz",
"integrity": "sha1-ZVbrKzHN47ImYwEWvSFdldBWwKc="
"version": "6.4.4-rc1",
"resolved": "https://registry.npmjs.org/foundation-sites/-/foundation-sites-6.4.4-rc1.tgz",
"integrity": "sha512-26cL66QFNqMVwM7bmIEqq4jiW+6CkIeW719ci1pchdJ4UK0Om+3Jl7MhkX/lzdzRHB75f2m1IK9lxk3JGOwApA==",
"requires": {
"jquery": "3.3.1",
"what-input": "4.3.1"
}
},
"fragment-cache": {
"version": "0.2.1",
......@@ -4228,8 +4249,7 @@
"is-buffer": {
"version": "1.1.6",
"resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
"integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
"dev": true
"integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
},
"is-builtin-module": {
"version": "1.0.0",
......@@ -4497,9 +4517,9 @@
}
},
"jquery": {
"version": "2.2.4",
"resolved": "https://registry.npmjs.org/jquery/-/jquery-2.2.4.tgz",
"integrity": "sha1-LInWiJterFIqfuoywUUhVZxsvwI="
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz",
"integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg=="
},
"js-base64": {
"version": "2.4.3",
......@@ -8820,6 +8840,11 @@
"integrity": "sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg==",
"dev": true
},
"what-input": {
"version": "4.3.1",
"resolved": "https://registry.npmjs.org/what-input/-/what-input-4.3.1.tgz",
"integrity": "sha512-7KD71RWNRWI9M08shZ8+n/2UjO5amwsG9PMSXWz0iIlH8H2DVbHE8Z2tW1RqQa0kIwdeqdUIffFz7crDfkcbAw=="
},
"whet.extend": {
"version": "0.9.9",
"resolved": "https://registry.npmjs.org/whet.extend/-/whet.extend-0.9.9.tgz",
......
......@@ -16,10 +16,11 @@
"author": "",
"license": "MIT",
"dependencies": {
"axios": "^0.17.1",
"d3": "^3.5.17",
"foundation": "^4.2.1",
"foundation-sites": "^5.5.3",
"jquery": "^2.1.3",
"foundation-sites": "^6.4.4-rc1",
"jquery": "^3.3.1",
"underscore": "^1.8.3"
},
"babel": {
......
......@@ -3,8 +3,8 @@
import contextMenu from './d3-context-menu';
d3.contextMenu = contextMenu;
function close_modal() {
$(document).foundation('reveal', 'close');
function close_modal(dialog) {
$(dialog).foundation('close');
}
var tree_root;
......@@ -24,6 +24,7 @@ function generateUUID(){
};
export function create_node() {
console.log('Creating node');
if (create_node_parent && create_node_modal_active) {
if (create_node_parent._children != null) {
create_node_parent.children = create_node_parent._children;
......@@ -45,7 +46,7 @@ export function create_node() {
create_node_modal_active = false;
$('#CreateNodeName').val('');
}
close_modal();
close_modal($('#CreateNodeModal'));
outer_update(create_node_parent);
}
......@@ -57,7 +58,7 @@ export function rename_node() {
rename_node_modal_active = false;
}
close_modal();
close_modal($('#RenameNodeModal'));
outer_update(node_to_rename);
}
......@@ -108,7 +109,7 @@ export function draw_tree(container, treeData) {
rename_node_modal_active = true;
node_to_rename = d;
$("#RenameNodeName").focus();
$('#RenameNodeModal').foundation('reveal', 'open');
$('#RenameNodeModal').foundation('open');
}
},
{
......@@ -124,7 +125,7 @@ export function draw_tree(container, treeData) {
console.log('Create child node');
create_node_parent = d;
create_node_modal_active = true;
$('#CreateNodeModal').foundation('reveal', 'open');
$('#CreateNodeModal').foundation('open');
$('#CreateNodeName').focus();
}
}
......
'use strict';
// css
import 'foundation-sites/dist/css/foundation.min.css';
import 'foundation-sites/dist/js/foundation.min.js';
import axios from 'axios';
// customization
import '../styles/app.css';
import '../styles/d3-context-menu.css';
import 'foundation-sites/css/foundation.min.css';
import 'foundation-sites/css/normalize.css';
// js
import 'foundation-sites/js/vendor/fastclick';
import '../src/d3-context-menu';
import foundation from 'foundation-sites/js/foundation.min';
window.foundation = foundation;
import { draw_tree, create_node, rename_node } from './dndTree';
import {draw_tree, create_node, rename_node} from './dndTree';
const TREE_BASE_URL = 'https://gitlab.croptrust.org/genesys-pgr/diversity-tree-editor/raw/master/trees/';
const ax = axios.create({
baseURL: TREE_BASE_URL,
// timeout: 5000,
// httpAgent: new http.Agent({
// keepAlive: false,
// keepAliveMsecs: 10000,
// }),
// httpAgent: new http.Agent({ keepAlive: false }),
// httpsAgent: new https.Agent({ keepAlive: false }),
});
// for the first initialization
$('document').ready(function() {
$(document).foundation();
$(document).on('opened', '[data-reveal]', function () {
$(document).on('opened', '[data-reveal]', function() {
var element = $(".inputName:visible").first();
element.focus(function(){
element.focus(function() {
this.selectionStart = this.selectionEnd = this.value.length;
});
element.focus();
});
$('#RenameNodeForm .success').click(function(e){
$('#RenameNodeForm .success').click(function(e) {
rename_node();
return false;
});
$('#CreateNodeForm .success').click(function(e){
$('#CreateNodeForm .success').click(function(e) {
create_node();
return false;
});
$('.closeModal').on('click', () => {
$('#RenameNodeModal').foundation('reveal', 'close');
});
// $('.closeModal').on('click', () => {
// $('#RenameNodeModal').foundation('open', 'close');
// });
$('#instructionsBtn').on('click', () => {
$('#InstructionsModal').foundation('reveal', 'open');
$('#InstructionsModal').foundation('open');
$('#InstructionsModal').focus();
});
$('#resetBtn').on('click', (e) => {
e.preventDefault();
draw_tree($('#tree-container'), TREE);
let newTree = {
"name": "Entire genepool"
};
draw_tree($('#tree-container'), newTree);
});
$('#existing-trees .load-tree').on('click', (e) => {
e.preventDefault();
const url = $(e.target).attr('x-url');
console.log(`Loading tree from ${url}`);
if (url) {
ax({
url: url,
method: 'GET',
}).then((r) => {
draw_tree($('#tree-container'), r);
}).catch((error) => {
console.log(error);
});
}
});
$('#importJsonBtn').on('click', () => {
......@@ -69,16 +99,8 @@ $('document').ready(function() {
fileReader.readAsText(files.item(0));
});
// initial tree
const TREE = {
"name": "Entire genepool",
"children": [{
"name": "Cultivated material"
},
{
"name": "Wild material"
}
]
let newTree = {
"name": "Entire genepool"
};
draw_tree($('#tree-container'), TREE);
draw_tree($('#tree-container'), newTree);
});
html {
height: 100%;
}
body {
height: 100%;
}
.node {
cursor: pointer;
}
......@@ -54,9 +62,7 @@
}
.menubar {
display: flex;
flex: 130px;
align-items: flex-end;
/* Nothing here */
}
.maincontent {
......@@ -67,10 +73,10 @@
#tree-container {
display: flex;
flex: 100%;
border: solid 1px #79a74a;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
padding: .5rem;
/* border: solid 1px #79a74a; */
/* border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px; */
/* padding: .5rem; */
margin: 2px;
background-color: #fafef6;
/* background-color: #fafef6; */
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment