LT-67 Implementing reactive type-toggle for server creation form

This commit is contained in:
Bruno Alves de Faria 2016-05-02 19:56:51 -03:00 committed by Erik Ziegler
parent d9367cf200
commit e28f4b9a95
6 changed files with 55 additions and 20 deletions

View File

@ -9,11 +9,18 @@
<div class="col-lg-6">
<div class="form-group">
<label for="serverType">Server Type</label>
<select class="form-control" id="serverType">
<select class="form-control js-server-type">
<option>Select</option>
<option value="dicomWeb">DICOM Web</option>
<option value="dimse">DIMSE</option>
</select>
</div>
</div>
</div>
{{#if equals serverType.get "dicomWeb"}}
TODO: Print DICOM Web form
{{/if}}
{{#if equals serverType.get "dimse"}}
TODO: Print DIMSE form
{{/if}}
</template>

View File

@ -0,0 +1,7 @@
Template.serverInformationForm.events({
'change .js-server-type': function(event, instance) {
console.debug(instance);
var value = $(event.currentTarget).val();
instance.data.serverType.set(value);
}
});

View File

@ -1,6 +1,13 @@
Template.serverInformationList.onRendered(function() {
var instance = Template.instance();
instance.$('[data-toggle="tooltip"]').tooltip({ container: 'body' });
instance.$('[data-toggle="tooltip"]').tooltip({
container: 'body'
});
});
Template.serverInformationList.onDestroyed(function() {
var instance = Template.instance();
instance.$('[data-toggle="tooltip"]').tooltip('destroy');
});
Template.serverInformationList.helpers({
@ -18,9 +25,9 @@ Template.serverInformationList.helpers({
Template.serverInformationList.events({
'click .addServer': function(event, instance) {
instance.data.mode.set("create");
instance.data.mode.set('create');
},
'click .editServer': function(event, instance) {
instance.data.mode.set("edit");
instance.data.mode.set('edit');
}
});

View File

@ -2,21 +2,25 @@
<div class="modal" id="serverInformationModal" tabindex="-1" role="dialog" aria-labelledby="serverInformationModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="serverInformationModalLabel">Server Information</h4>
</div>
<div class="modal-body">
{{#if equals instance.container.mode.get "list"}}
{{>serverInformationList instance.container}}
{{/if}}
{{#if or (equals instance.container.mode.get "edit") (equals instance.container.mode.get "create")}}
{{>serverInformationForm instance.container}}
{{/if}}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
{{#let isList=(equals instance.container.mode.get "list")}}
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="serverInformationModalLabel">Server Information</h4>
</div>
<div class="modal-body">
{{#if isList}}
{{>serverInformationList instance.container}}
{{else}}
{{>serverInformationForm instance.container}}
{{/if}}
</div>
<div class="modal-footer">
{{#unless isList}}
<button type="button" class="btn btn-default js-back">Back</button>
{{/unless}}
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
{{/let}}
</div>
</div>
</div>

View File

@ -1,6 +1,15 @@
Template.serverInformationModal.onCreated(function() {
var instance = Template.instance();
instance.container = {
mode: new ReactiveVar("list")
mode: new ReactiveVar('list'),
serverType: new ReactiveVar(null)
};
});
Template.serverInformationModal.events({
'click .js-back' (event, instance) {
var container = instance.container;
container.mode.set('list');
container.serverType.set(null);
}
});

View File

@ -187,6 +187,7 @@ Package.onUse(function(api) {
api.addFiles('client/components/lesionTrackerViewportOverlay/lesionTrackerViewportOverlay.js', 'client');
api.addFiles('client/components/serverInformationModal/serverInformationForm.html', 'client');
api.addFiles('client/components/serverInformationModal/serverInformationForm.js', 'client');
api.addFiles('client/components/serverInformationModal/serverInformationList.html', 'client');
api.addFiles('client/components/serverInformationModal/serverInformationList.js', 'client');
api.addFiles('client/components/serverInformationModal/serverInformationModal.html', 'client');