Commit b3e3d9e5 authored by Matija Obreza's avatar Matija Obreza

Merge branch '27-edit-contributors' into 'master'

Resolve "Edit contributors"

Closes #27

See merge request genesys-pgr/diversity-tree-editor!62
parents 7dfc8b4a 49bb60ba
......@@ -29,6 +29,7 @@
<a id="downloadAnchorElem" style="display:none"></a>
</li>
<li><a href="#" id="importJsonBtn">Upload tree</a></li>
<li><a href="#" id="editContributorsBtn">Contributors</a></li>
</ul>
</li>
</ul>
......@@ -102,7 +103,6 @@
<div class="large-12 columns">
<div class="error errorMessage" />
</div>
</div>
</div>
<div class="row">
<div class="large-8 columns">
......@@ -117,6 +117,34 @@
<a class="close-button" data-close aria-label="Close">&#215;</a>
</div>
<div id="EditContributorsModal" class="reveal" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
<h2 id="modalTitle">Contributors</h2>
<form>
<div class="row">
<div class="large-12 columns">
<label>Edit the contributors list:
<textarea id="contributorsText" placeholder="Contributor 1 \nContributor 2 \n..." rows="3"></textarea>
</label>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<div class="error errorMessage" />
</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>
<button type="submit" class="button success">Save</button>
</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">
......@@ -125,7 +153,7 @@
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>
<h3>Uploading the tree</h3>
<p>
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.
......
......@@ -112,6 +112,16 @@ export function getTree() {
return tree_root;
}
export function editContributors(contributors) {
if (Array.isArray(contributors)) {
if (contributors.length === 1 && !contributors[0]) {
tree_root['contributors'] = undefined;
} else {
tree_root['contributors'] = contributors.filter(c => !!c).map(c => c.trim());
}
}
}
let outer_update = null;
export function draw_tree(container, treeData) {
......
......@@ -10,7 +10,7 @@ import '../styles/app.css';
import '../styles/d3-context-menu.css';
import '../src/d3-context-menu';
import {draw_tree, create_node, rename_node, getTree} from './dndTree';
import {draw_tree, create_node, rename_node, getTree, editContributors} from './dndTree';
import {MENU_TREES} from './menu/trees';
......@@ -31,7 +31,7 @@ const TREE_STORAGE_NAME = 'lastTree';
// We need to remove parent property from all nodes to avoid an error with converting circular structure to JSON
const cleanTreeJson = (node) => {
const keepProperties = ['name', 'weight'];
const keepProperties = ['name', 'weight', 'contributors'];
// console.log('Cleaning', node);
const copy = {};
......@@ -179,6 +179,16 @@ $('document').ready(function() {
return true;
});
$('#EditContributorsModal form').submit((e) => {
e.preventDefault();
$('#EditContributorsModal .errorMessage')[0].innerHTML = '';
const text = $('#EditContributorsModal #contributorsText')[0].value;
editContributors(text.split('\n'));
$('#EditContributorsModal').foundation('close');
});
// $('.closeModal').on('click', () => {
// $('#NodePropertiesModal').foundation('open', 'close');
// });
......@@ -198,6 +208,35 @@ $('document').ready(function() {
$('#ImportTreeModal').focus();
});
$('#editContributorsBtn').on('click', () => {
const contributorsText = $('#contributorsText');
contributorsText.attr('placeholder', contributorsText.prop('placeholder').replace(/\\n/g, '\n'));
const tree = getTree();
if (tree.contributors) {
contributorsText.val(tree.contributors.join('\n'));
const lines = tree.contributors.length;
if (lines <= 25) {
contributorsText.attr('rows', lines);
} else {
contributorsText.attr('rows', 25);
}
} else {
contributorsText.val('');
contributorsText.attr('rows', 3);
console.log('The list of contributors isn\'t found.');
}
$('#EditContributorsModal').foundation('open');
$('#EditContributorsModal').focus();
});
$('#EditContributorsModal #contributorsText').on('input propertychange', () => {
const element = $('#contributorsText');
const lines = element.val().split(/\r*\n/).length;
if (lines >= 3 && lines < 25) {
element.attr('rows', lines);
}
});
const resetTree = () => {
let newTree = {
name: 'Entire genepool',
......
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