visual detail of issue #518

CBIIT · Sep 15, 2022 · 6c693aa · 6c693aa
1 parent 067ab2a
commit 6c693aa
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 9 deletions.
diff --git a/web/src/main/webapp/index.jsp b/web/src/main/webapp/index.jsp
@@ -241,6 +241,17 @@
         </footer>
     </div>
 
+    <div class="modal hide fade" id="app-modal">
+        <div class="modal-dialog modal-dialog-centered" role="document">
+            <div class="modal-content">
+                <div class="modal-header"><button class="close" data-dismiss="modal">&times;</button>
+                </div>
+                <div class="modal-body" id=app-modal-body>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <div class="modal hide fade" id="alert-message-modal">
         <!-- a hidden div for showing alert message -->
         <div class="modal-dialog" role="document">
@@ -2552,7 +2563,7 @@
                 <a href="{{url}}" target="_blank"><img src="{{image}}" class="card-img-top" alt="..." style="width:300px;height:150px"></a>
                 <div class="card-body">
                     <h5 class="card-title"><a href="{{url}}" target="_blank">{{title}}</a></h5>
-                    <div class="card-text">
+                    <div class="card-text" id=app-{{app_code}}>
                         <div>{{description.substring(0, 100)}}{{description.length>100?"... <a id=more-description>more</a>":""}}</div>
                         <div><a id=developer-info>Developer information</a></div>
                         <div><a href={{url}} target="_blank">Go to application</a></div>

diff --git a/web/src/main/webapp/js/ctd2.js b/web/src/main/webapp/js/ctd2.js
@@ -661,16 +661,21 @@ import MraView from './mra.js'
     const AppView = Backbone.View.extend({
         template: _.template($("#app-tmpl").html()),
         render: function () {
+            const model = this.model
+            const code = this.model.app_code
             $(this.el).append(this.template(this.model));
-            $("#more-description").click(function (e) {
+            $("#app-"+code).find("#more-description").click(function (e) {
                 e.preventDefault();
                 console.debug(e)
-                console.debug("more description clicked")
+                $("#app-modal-body").html(model.description)
+                $("#app-modal").modal("show")
             })
-            $("#developer-info").click(function (e) {
+            $("#app-"+code).find("#developer-info").click(function (e) {
                 e.preventDefault();
                 console.debug(e)
-                console.debug("developer info clicked")
+                const text = `<ul><li>Institution(s): ${model.institution}</li><li>Developer(s): ${model.developers}</li><li>Lab(s): ${model.lab}`
+                $("#app-modal-body").html(text)
+                $("#app-modal").modal("show")
             })
             return this;
         }
@@ -686,12 +691,10 @@ import MraView from './mra.js'
                     if (registration.title === "") {
                         return
                     }
+                    registration.image = registration.image ?? "img/logos/ctd2_overall.png"
                     new AppView({
                         el: $("#app-container"),
-                        model: {
-                            title: registration.title, developers: registration.developers, description: registration.description,
-                            url: registration.url, email: registration.email, image: registration.image ?? "img/logos/ctd2_overall.png"
-                        },
+                        model: registration,
                     }).render();
                 })
             }).fail(function (err) { console.log(err) })