Commit f9a59b4d authored by Matija Obreza's avatar Matija Obreza

Upload tree dialog

parent 7e857efb
......@@ -28,9 +28,7 @@
<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>
<li><a href="#" id="importJsonBtn">Upload tree</a></li>
</ul>
</li>
</ul>
......@@ -96,12 +94,55 @@
<a class="close-button" data-close aria-label="Close">&#215;</a>
</div>
<div id="ImportTreeModal" class="reveal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<h2 id="modalTitle">Upload tree data</h2>
<form>
<div class="row">
<div class="large-12 columns">
<label>JSON File
<input type="file" id="selectFiles" value="Import" accept=".json" />
</label>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<label>or paste <b>valid</b> tree JSON:
<textarea id="treeJsonText" placeholder="Copy-paste JSON here..."></textarea>
</label>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<div class="error errorMessage" />
</div>
</div>
</div>
<div class="row">
<div class="large-8 columns">
&nbsp;
</div>
<div class="large-4 columns">
<a href="#" data-close class="button info closeModal">Cancel</a>
<a href="#" class="button success">Load tree</a>
</div>
</div>
</form>
<a class="close-button" data-close aria-label="Close">&#215;</a>
</div>
<div id="InstructionsModal" class="reveal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<h2 id="modalTitle">How to use the interactive tree editor</h2>
<div class="text">
<h3>Loading existing tree</h3>
<p>
Go to <b>Load tree</b> drop-down menu and select one of the available tree definitions from the menu.
</p>
<h3>Uploading the tree</h2>
<p>
Go to <b>Current tree</b> drop-down menu, select choose file, choose JSON file with tree stucture that you want to upload, click on upload tree from the same drop-down menu, the tree should appear on the screen, you may have to zoom in or out to see it better.
Go to <b>Current tree</b> drop-down menu, select <b>Upload tree</b> and enither choose a JSON file with tree stucture that you want to upload or copy-paste the JSON tree definiton into the text field.<br />
Click on <b>Load tree</b> and the tree should appear on the screen, you may have to zoom in or out to see it better.
</p>
<h3>Saving your tree</h3>
......
......@@ -44,16 +44,60 @@ $('document').ready(function() {
element.focus();
});
$('#RenameNodeForm .success').click(function(e) {
$('#RenameNodeForm .success').click((e) => {
rename_node();
return false;
});
$('#CreateNodeForm .success').click(function(e) {
$('#CreateNodeForm .success').click((e) => {
create_node();
return false;
});
$('#ImportTreeModal .success').click((e) => {
e.preventDefault();
$('#ImportTreeModal .errorMessage')[0].innerHTML = '';
let files = $('#ImportTreeModal #selectFiles')[0].files;
let textJson = $('#ImportTreeModal #treeJsonText')[0].value;
console.log('Loading tree', files, textJson);
if (files && files.length > 0) {
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($('#tree-container'), result);
$('#ImportTreeModal').foundation('close');
$('#ImportTreeModal form')[0].reset();
};
fileReader.readAsText(files.item(0));
return true;
} else if (textJson && textJson.length > 0) {
try {
let result = JSON.parse(textJson);
draw_tree($('#tree-container'), result);
$('#ImportTreeModal').foundation('close');
$('#ImportTreeModal form')[0].reset();
$('#ImportTreeModal #treeJsonText')[0].value = '';
} catch (error) {
console.log('JSON error', error);
$('#ImportTreeModal .errorMessage')[0].innerHTML = `Error parsing JSON: <b>${error.message}</b>`;
}
return true;
}
$('#ImportTreeModal .errorMessage')[0].innerHTML = 'No source selected';
return true;
});
// $('.closeModal').on('click', () => {
// $('#RenameNodeModal').foundation('open', 'close');
// });
......@@ -63,6 +107,11 @@ $('document').ready(function() {
$('#InstructionsModal').focus();
});
$('#importJsonBtn').on('click', () => {
$('#ImportTreeModal').foundation('open');
$('#ImportTreeModal').focus();
});
$('#resetBtn').on('click', (e) => {
e.preventDefault();
let newTree = {
......@@ -87,28 +136,4 @@ $('document').ready(function() {
});
}
});
$('#importJsonBtn').on('click', () => {
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($('#tree-container'), result);
};
fileReader.readAsText(files.item(0));
});
let newTree = {
"name": "Entire genepool"
};
draw_tree($('#tree-container'), newTree);
});
......@@ -80,3 +80,7 @@ body {
margin: 2px;
/* background-color: #fafef6; */
}
.errorMessage {
color: Red;
}
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