Skip to content

Commit

Permalink
work in progress, #16
Browse files Browse the repository at this point in the history
  • Loading branch information
@mfrasca
mfrasca committed May 4, 2019
1 parent dd283a5 commit 5e26957
Showing 1 changed file with 47 additions and 39 deletions.
86 changes: 47 additions & 39 deletions browse/templates/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -282,18 +282,17 @@

<!-- Links -->
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">Insert</a>
<li class="nav-item dropdown" id="drop-insert" >
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Insert</a>
<div class="dropdown-menu" id="insert-menu">
<a class="dropdown-item" id="new-taxon" href="#">Taxon</a>
<a class="dropdown-item" id="new-contact" href="#">Contact</a>
<a class="dropdown-item" id="new-accession" href="#">Accession</a>
<a class="dropdown-item" id="new-plant" href="#">Plant</a>
<a class="dropdown-item" id="new-location" href="#">Location</a>
<a class="dropdown-item" id="new-edit-taxon-POST" href="#">Taxon</a>
<a class="dropdown-item" id="new-edit-contact-POST" href="#">Contact</a>
<a class="dropdown-item" id="new-edit-accession-POST" href="#">Accession</a>
<a class="dropdown-item" id="new-edit-location-POST" href="#">Location</a>
</div>
</li>
<li class="nav-item dropdown" >
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">Tools</a>
<li class="nav-item dropdown" id="drop-tools" >
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Tools</a>
<div class="dropdown-menu" id="tools-menu">
<a class="dropdown-item" href="#">Institution</a>
<a class="dropdown-item" href="#">Backup</a>
Expand All @@ -305,9 +304,7 @@

<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Tags
</a>
<a class="nav-link dropdown-toggle" href="#" id="drop-tags" data-toggle="dropdown">Tags</a>
<div class="dropdown-menu" id="tags-menu">
<a class="dropdown-item" href="#">Apply Tag</a>
</div>
Expand Down Expand Up @@ -341,34 +338,46 @@

</nav>

<!-- here each object has an id which indicates what it does. made up of four parts, it's:
(1) the class name of the root object, the one to which the edit is related.
compare with the above drop down menu, where this part is 'new';
(2) a verb, identifying the form that has to be activated, it's either edit or delete;
(3) the class name of the object we will edit, it helps us locate the table that we need copy into the form;
(4) the http verb to be executed if the form is confirmed.
(5) this one is optional, I'm not sure we need it.
$('.context-menu.dropdown-menu').find('.dropdown-item').map((i, e) => [e.id.split('-')])
$('#drop-insert').find('.dropdown-item').map((i, e) => [e.id.split('-')])
-->
<div id="ContextMenu-AccessionList" class="context-menu dropdown-menu">
<a class="dropdown-item btn-edit" href="#">Edit</a>
<a class="dropdown-item btn-add-verification" href="#">Add verification</a>
<a class="dropdown-item btn-add-plant" href="#">Add Plant</a>
<a class="dropdown-item btn-delete" href="#">Delete</a>
<a class="dropdown-item" id="accession-edit-accession-PUT" href="#">Edit</a>
<a class="dropdown-item" id="accession-edit-verification-POST" href="#">Add verification</a>
<a class="dropdown-item" id="accession-edit-plant-POST" href="#">Add Plant</a>
<a class="dropdown-item" id="accession-delete-accession-DELETE" href="#">Delete</a>
</div>

<div id="ContextMenu-PlantList" class="context-menu dropdown-menu">
<a class="dropdown-item btn-edit" href="#">Edit</a>
<a class="dropdown-item btn-split-plant" href="#">Split Plant</a>
<a class="dropdown-item btn-delete" href="#">Delete</a>
<a class="dropdown-item" id="plant-edit-plant-PUT" href="#">Edit</a>
<a class="dropdown-item" id="plant-edit-plant-POST-split" href="#">Split Plant</a>
<a class="dropdown-item" id="plant-delete-plant-DELETE" href="#">Delete</a>
</div>

<div id="ContextMenu-LocationList" class="context-menu dropdown-menu">
<a class="dropdown-item btn-edit" href="#">Edit</a>
<a class="dropdown-item btn-delete" href="#">Delete</a>
<a class="dropdown-item" id="location-edit-location-PUT" href="#">Edit</a>
<a class="dropdown-item" id="location-delete-location-DELETE" href="#">Delete</a>
</div>

<div id="ContextMenu-ContactList" class="context-menu dropdown-menu">
<a class="dropdown-item btn-edit" href="#">Edit</a>
<a class="dropdown-item btn-delete" href="#">Delete</a>
<a class="dropdown-item" id="contact-edit-contact-PUT" href="#">Edit</a>
<a class="dropdown-item" id="contact-edit-verification-POST" href="#">Add verification</a>
<a class="dropdown-item" id="contact-delete-contact-DELETE" href="#">Delete</a>
</div>

<div id="ContextMenu-TaxonList" class="context-menu dropdown-menu">
<a class="dropdown-item btn-edit" href="#">Edit</a>
<a class="dropdown-item btn-add-sub-taxon" href="#">Add sub taxon</a>
<a class="dropdown-item btn-add-verification" href="#">Add verification</a>
<a class="dropdown-item btn-delete" href="#">Delete</a>
<a class="dropdown-item" id="taxon-edit-taxon-PUT" href="#">Edit</a>
<a class="dropdown-item" id="taxon-edit-taxon-POST-subtaxon" href="#">Add sub taxon</a>
<a class="dropdown-item" id="taxon-edit-verification-POST" href="#">Add verification</a>
<a class="dropdown-item" id="taxon-delete-taxon-DELETE" href="#">Delete</a>
</div>

<div class="row">
Expand Down Expand Up @@ -408,6 +417,7 @@ <h5 id="infobox-object-text"></h5>
</div>
</div>

<!-- we only have two modal forms: delete and edit. -->
<div class="modal" id="modal-delete">
<div class="modal-dialog modal-sm">
<div class="modal-content">
Expand All @@ -433,26 +443,22 @@ <h4 class="modal-title">Confirm Deletion</h4>
</div>
</div>

<div class="modal" id="modal-add-verification"
data-ghini-verb="POST"
data-ghini-url="/collection/accessions/(accession.code)/verifications/">
<div class="modal" id="modal-edit-form">
<div class="modal-dialog modal-lg">
<div class="modal-content">

<!-- Modal Header -->
<!-- Modal Header --><!-- we change the title -->
<div class="modal-header">
<h4 class="modal-title">Add Verification</h4>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>

<!-- Modal body -->
<div class="modal-body" id="modal-add-verification-tbody">
<table>
{{ verification_form }}
</table>
<!-- Modal body --><!-- we clone the generated form into this element -->
<div class="modal-body">

</div>

<!-- Modal footer -->
<!-- Modal footer --><!-- we change the primary action -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary action-confirm" data-dismiss="modal">Save Verification</button>
Expand All @@ -462,6 +468,10 @@ <h4 class="modal-title">Add Verification</h4>
</div>
</div>

<table id="verification-table">
{{ verification_form }}
</table>

<table id="contact-table">
{{ contact_form }}
</table>
Expand All @@ -482,8 +492,6 @@ <h4 class="modal-title">Add Verification</h4>
{{ location_form }}
</table>

{{ form.media.js }}

<script type="text/javascript" src="{% static 'js/select2.min.js' %}"></script>
<script type="text/javascript" src="/static/django_select2/django_select2.js"></script>
</body>
Expand Down

0 comments on commit 5e26957

Please sign in to comment.