menus set up ready for teh upload functions

ICRAR · Oct 19, 2021 · 8916c55 · 8916c55
1 parent b494768
commit 8916c55
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 7 deletions.
diff --git a/daliuge-translator/dlg/dropmake/web/main.js b/daliuge-translator/dlg/dropmake/web/main.js
@@ -81,6 +81,18 @@ function makeJSON() {
     });
 }
 
+ function physicalGraphTemplateToUploadHelper () {
+   $("#physicalGraphTemplateToUpload").click()
+ }
+
+$("#physicalGraphTemplateToUpload").change(function() {
+  var props=$('#physicalGraphTemplateToUpload').prop('files'),
+  file=props[0]
+  console.log('A file has been selected')
+  console.log(file.name)
+  console.log(file.size)
+})
+
 function makePNG() {
 
   html2canvas(document.querySelector("#main")).then(canvas => {

diff --git a/daliuge-translator/dlg/dropmake/web/pg_viewer.html b/daliuge-translator/dlg/dropmake/web/pg_viewer.html
@@ -78,23 +78,32 @@
                    </div>
                 </ul>
                 <ul class="nav navbar-nav  ml-auto">
-                    <li class="nav-item">
-                        <a href="javascript:void(0)" class="nav-link tooltip tooltipBottom" data-text="Deploy Physical Graph via REST" id="rest_deploy_button" value="Deploy Physical Graph via REST">REST Deploy</a>
-                    </li>
-                    <li class="nav-item">
-                        <a href="javascript:void(0)" class="nav-link tooltip tooltipBottom" data-text="Generate and deploy physical graph" id="deploy_button" value="Generate &amp; Deploy Physical Graph">Deploy</a>
+
+                    <li class="nav-item dropdown">
+                        <a href="javascript:void(0)" class="nav-link dropdown-toggle" id="navbarDeployDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            Deploy
+                        </a>
+                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDeployDropdown">
+                            <a href="javascript:void(0)" class="dropdown-item tooltipBottom" data-text="Deploy Physical Graph via REST" id="rest_deploy_button" value="Deploy Physical Graph via REST">REST Deploy</a>
+                            <a href="javascript:void(0)" class="dropdown-item tooltipBottom" data-text="Generate and deploy physical graph" id="deploy_button" value="Generate &amp; Deploy Physical Graph">Deploy</a>
+                        </div>
                     </li>
                     <li class="nav-item dropdown">
                         <a href="javascript:void(0)" class="nav-link dropdown-toggle" id="navbarExportDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                            Export
+                            File
                         </a>
                         <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarExportDropdown">
-                            <span id="exportJsonBtn" class="dropdown-item dropDropDownParent" href="#">JSON <img id="exportJsonIcon" src="/static/src/icons/arrow_right_white_24dp.svg" alt="">
+                            <span id="exportJsonBtn" class="dropdown-item dropDropDownParent" href="#">Save <img id="exportJsonIcon" src="/static/src/icons/arrow_right_white_24dp.svg" alt="">
                                 <div class="dropDropDown">
                                     <a id="json_button" class="dropdown-item" onclick="makeJSON()">Physical Graph Template</a>
                                     <a id="Pysical_graph" class="dropdown-item" href="#">Physical Graph</a>
                                 </div>
                             </span>
+                            <span id="exportJsonBtn" class="dropdown-item dropDropDownParent" href="#">Load <img id="exportJsonIcon" src="/static/src/icons/arrow_right_white_24dp.svg" alt="">
+                                <div class="dropDropDown">
+                                    <a id="json_button" class="dropdown-item" onclick="physicalGraphTemplateToUploadHelper()">Physical Graph Template</a>
+                                </div>
+                            </span>
                             <div class="dropdown-divider"></div>
                             <a href="javascript:void(0)" id="png_button" class="dropdown-item" onclick="makePNG()">Screenshot</a>
                         </div>
@@ -110,6 +119,9 @@
     </div>
     <div id="main"></div>
     <div id="SVGArea"></div>
+    <div style="display:none;">
+        <input id="physicalGraphTemplateToUpload" type="file" name="file">
+    </div>
     <div id="runinfoWrapper">
         <span id="runinfo" >{{partition_info}}</span>
     </div>

diff --git a/daliuge-translator/dlg/dropmake/web/src/main.css b/daliuge-translator/dlg/dropmake/web/src/main.css
@@ -389,6 +389,7 @@
 
 .dropdown-item{
     color: white;
+    position: relative;
 }
 
 .dropdown-item:hover{
@@ -440,6 +441,10 @@
     color:white;
 }
 
+#navbarDeployDropdown{
+  color: white;
+}
+
 #deploy_button, #rest_deploy_button{
     color: white;
 }