Skip to content
This repository has been archived by the owner on Feb 9, 2022. It is now read-only.

Commit

Permalink
Prepared layout for microscope settings page.
Browse files Browse the repository at this point in the history
  • Loading branch information
@ggirelli
ggirelli committed Jun 12, 2019
1 parent 2e15b98 commit 4996b30
Show file tree
Hide file tree
Showing 3 changed files with 94 additions and 16 deletions.
89 changes: 75 additions & 14 deletions app/src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
<script src="./js/get_color.js"></script>
<script src="./js/settings.fn.js"></script>
<script src="./js/settings-templates.js"></script>
<script src="./js/settings-microscope.js"></script>
<link rel="stylesheet" href="./css/vendor/toastr.v2.1.3.min.css" />
<script src="./js/home.js"></script>
<script src="./js/main.js"></script>
Expand Down Expand Up @@ -211,9 +212,7 @@ <h5 class="modal-title" id="settingsModalTitle"><i class="fas fa-cog"></i> Setti
<li class="nav-item"><a class="nav-link active" id="settings-general-tab" data-toggle="tab" href="#settings-general" role="tab" aria-controls="settings-general" aria-selected="true"><i class="fas fa-user"></i> General</a></li>
<li class="nav-item"><a class="nav-link" id="settings-scope-tab" data-toggle="tab" href="#settings-scope" role="tab" aria-controls="settings-scope" aria-selected="false"><i class="fas fa-microscope"></i> Microscopes</a></li>
<li class="nav-item"><a class="nav-link" id="settings-sources-tab" data-toggle="tab" href="#settings-sources" role="tab" aria-controls="settings-sources" aria-selected="true"><i class="far fa-lightbulb"></i> Sources</a></li>
<li class="nav-item"><a class="nav-link" id="settings-exf-tab" data-toggle="tab" href="#settings-exf" role="tab" aria-controls="settings-exf" aria-selected="false"><i class="fas fa-sign-in-alt"></i> Excitation Filters</a></li>
<li class="nav-item"><a class="nav-link" id="settings-dm-tab" data-toggle="tab" href="#settings-dm" role="tab" aria-controls="settings-dm" aria-selected="false"><i class="fas fa-divide"></i> Dicroic Mirrors</a></li>
<li class="nav-item"><a class="nav-link" id="settings-emf-tab" data-toggle="tab" href="#settings-emf" role="tab" aria-controls="settings-emf" aria-selected="false"><i class="fas fa-sign-out-alt"></i>Emission Filters</a></li>
<li class="nav-item"><a class="nav-link" id="settings-optelem-tab" data-toggle="tab" href="#settings-optelem" role="tab" aria-controls="settings-optelem" aria-selected="false"><i class="fas fa-eye"></i> Optical elements</a></li>
<li class="nav-item"><a class="nav-link" id="settings-fluo-tab" data-toggle="tab" href="#settings-fluo" role="tab" aria-controls="settings-fluo" aria-selected="false"><i class="fas fa-tint"></i> Fluorophores</a></li>
</ul>
<div class="tab-content" id="myTabContent">
Expand All @@ -228,24 +227,86 @@ <h5>
<button id="settings-add-template-btn" class="btn btn-success btn-sm float-right mr-1 mb-1" data-toggle="tooltip" data-placement="bottom" title="Add empty template"><i class="fas fa-plus"></i></button>
</h5>
<select class="form-control mt-1 mb-1" name="settings-template" id="settings-template"></select>
<small>Select a settings template to load it.</small>
</div>
<div class="tab-pane fade" id="settings-scope" role="tabpanel" aria-labelledby="settings-scope-tab">
Microscope. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut iusto qui ex rerum maxime nulla vel aliquam repudiandae pariatur cum alias nisi a laborum sapiente accusamus, excepturi placeat impedit! Aliquam!
<h5>
Microscope components
<button id="settings-rm-microscope-btn" class="btn btn-danger btn-sm float-right mr-1 mb-1" data-toggle="tooltip" data-placement="bottom" title="Remove current microscope"><i class="fas fa-minus"></i></button>
<button id="settings-add-microscope-btn" class="btn btn-success btn-sm float-right mr-1 mb-1" data-toggle="tooltip" data-placement="bottom" title="Add empty microscope"><i class="fas fa-plus"></i></button>
</h5>
<select class="form-control mt-1 mb-1" name="settings-microscopes" id="settings-microscopes"></select>
<small>Select a microscope template to load and edit its components below.</small>

<h5 class="mt-3"><i class="far fa-lightbulb"></i> Sources</h5>
<div class="row mb-3">
<div class="col col-6">
<div class="card">
<div class="card-header">Available</div>
<div class="card-body">
<select multiple class="form-control" name="settings-microscopes-source-available" id="settings-microscopes-source-available">
<!-- -->
</select>
<small>Click on an item to add it to the microscope.</small>
</div>
</div>
</div>
<div class="col col-6">
<div class="card">
<div class="card-header">Added</div>
<div class="card-body">
<select multiple class="form-control" name="settings-microscopes-source-added" id="settings-microscopes-source-added">
<!-- -->
</select>
<small>Click on an item to remove it from the microscope.</small>
</div>
</div>
</div>
</div>

<h5 class="mt-3"><i class="far fa-eye"></i> Optical elements</h5>
<div class="row mb-3">
<div class="col col-6">
<div class="card">
<div class="card-header">Available</div>
<div class="card-body">
<select multiple class="form-control" name="settings-microscopes-optelem-available" id="settings-microscopes-optelem-available">
<!-- -->
</select>
<small>Click on an item to add it to the microscope.</small>
</div>
</div>
</div>
<div class="col col-6">
<div class="card">
<div class="card-header">Added</div>
<div class="card-body">
<select multiple class="form-control" name="settings-microscopes-optelem-added" id="settings-microscopes-optelem-added">
<!-- -->
</select>
<small>Click on an item to remove it from the microscope.</small>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade show" id="settings-sources" role="tabpanel" aria-labelledby="settings-sources-tab">
Sources. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam corrupti aliquam reiciendis corporis fugiat animi repellat, quas obcaecati exercitationem placeat quidem, tenetur eligendi quasi expedita debitis molestias eum dicta, doloribus.
</div>
<div class="tab-pane fade" id="settings-exf" role="tabpanel" aria-labelledby="settings-exf-tab">
EX filter. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci esse alias delectus, minima dicta quae tenetur corrupti, accusamus officiis repellendus autem voluptate inventore culpa amet tempore consequuntur, blanditiis tempora voluptatem.
</div>
<div class="tab-pane fade" id="settings-dm" role="tabpanel" aria-labelledby="settings-dm-tab">
DM. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto ipsum facilis perspiciatis libero impedit odit, tenetur, a consequatur. Ea fugiat temporibus quasi quisquam commodi necessitatibus, perferendis. Id, pariatur vel debitis!
<h5>
Light sources
<button id="settings-add-source-btn" class="btn btn-success btn-sm float-right mr-1 mb-1" data-toggle="tooltip" data-placement="bottom" title="Add a new light source"><i class="fas fa-plus"></i></button>
</h5>
</div>
<div class="tab-pane fade" id="settings-emf" role="tabpanel" aria-labelledby="settings-emf-tab">
EX filter. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non assumenda ipsa iure praesentium, ipsum ea, ex. Nostrum odio sequi excepturi, omnis quo impedit laborum similique aliquam, dolorum qui iste esse?
<div class="tab-pane fade" id="settings-optelem" role="tabpanel" aria-labelledby="settings-optelem-tab">
<h5>
Optical elements
<button id="settings-add-optelem-btn" class="btn btn-success btn-sm float-right mr-1 mb-1" data-toggle="tooltip" data-placement="bottom" title="Add a new optical element"><i class="fas fa-plus"></i></button>
</h5>
</div>
<div class="tab-pane fade" id="settings-fluo" role="tabpanel" aria-labelledby="settings-fluo-tab">
Fluorophore. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut iusto qui ex rerum maxime nulla vel aliquam repudiandae pariatur cum alias nisi a laborum sapiente accusamus, excepturi placeat impedit! Aliquam!
<h5>
Fluorophores
<button id="settings-add-fluor-btn" class="btn btn-success btn-sm float-right mr-1 mb-1" data-toggle="tooltip" data-placement="bottom" title="Add a new fluorophore"><i class="fas fa-plus"></i></button>
</h5>
</div>
</div>

Expand Down
19 changes: 19 additions & 0 deletions app/src/js/settings-microscope.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@

load_microscope_list = function() {
// Load microscope list
var selectedTemplate = eset.get("selected-template");
var microscope_list = eset.get("templates." + selectedTemplate + ".microscopes");
$("#settings-microscopes").children().remove();
for (var i = microscope_list.length - 1; i >= 0; i--) {
var microscope_name = microscope_list[i];
var optElement = $("<option></option>").text(microscope_name);
if ( i == 0 ) { optElement.attr("selected", true); }
$("#settings-microscopes").prepend(optElement);
}
}

$(function() {
$("#settings-scope-tab").click(function(e) {
load_microscope_list();
});
});
2 changes: 0 additions & 2 deletions app/src/js/settings-templates.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,8 +157,6 @@ reset_settings_template = function() {
}

$(function() {

// Settings template select
$("select#settings-template").change(function(e) {
eset.set("selected-template", $(this).val())
e.preventDefault();
Expand Down

0 comments on commit 4996b30

Please sign in to comment.