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

Packages/lesiontracker/client/components/serverInformationModal/serverInformationForm.html

@@ -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>

Packages/lesiontracker/client/components/serverInformationModal/serverInformationForm.js

@@ -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);
+    }
+});

Packages/lesiontracker/client/components/serverInformationModal/serverInformationList.js

@@ -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');
     }
 });

Packages/lesiontracker/client/components/serverInformationModal/serverInformationModal.html

@@ -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">
+                {{#let isList=(equals instance.container.mode.get "list")}}
-                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                    <div class="modal-header">
-                    <h4 class="modal-title" id="serverInformationModalLabel">Server Information</h4>
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-                </div>
+                        <h4 class="modal-title" id="serverInformationModalLabel">Server Information</h4>
-                <div class="modal-body">
+                    </div>
-                    {{#if equals instance.container.mode.get "list"}}
+                    <div class="modal-body">
-                        {{>serverInformationList instance.container}}
+                        {{#if isList}}
-                    {{/if}}
+                            {{>serverInformationList instance.container}}
-                    {{#if or (equals instance.container.mode.get "edit") (equals instance.container.mode.get "create")}}
+                        {{else}}
-                        {{>serverInformationForm instance.container}}
+                            {{>serverInformationForm instance.container}}
-                    {{/if}}
+                        {{/if}}
-                </div>
+                    </div>
-                <div class="modal-footer">
+                    <div class="modal-footer">
-                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                        {{#unless isList}}
-                </div>
+                            <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>

Packages/lesiontracker/client/components/serverInformationModal/serverInformationModal.js

@@ -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);
+  }
+});

Packages/lesiontracker/package.js

@@ -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');