🚸 : add update button

add update button when stack is 'TO_UPDATE'
gaia-app · Jun 10, 2019 · ff2977c · ff2977c
1 parent 471ce87
commit ff2977c
Showing 1 changed file with 44 additions and 29 deletions.
diff --git a/src/main/resources/templates/stack.html b/src/main/resources/templates/stack.html
@@ -18,14 +18,8 @@
 
             <div class="midde_cont">
                 <div class="container-fluid">
-                    <div class="row column_title">
-                        <div class="full">
-                            <div class="page_title">
-                                <button class="btn btn-primary" onclick="saveStack()"><i class="far fa-save"></i> Save</button>
-                                <a href="" th:href="@{/stacks/{stackId}/apply(stackId=${stackId})}" class="btn btn-primary"><i class="fas fa-rocket"></i> Run</a>
-                            </div>
-                        </div>
-                    </div>
+
+                    <div id="controls"></div>
 
                     <div id="app"></div>
 
@@ -36,6 +30,27 @@
     </div>
 </div>
 
+<script src="/webjars/jquery/3.0.0/jquery.min.js"></script>
+<script src="/webjars/popper.js/1.14.3/umd/popper.min.js"></script>
+<script src="/webjars/bootstrap/4.3.1/js/bootstrap.min.js"></script>
+<script src="/js/prism.js"></script>
+<script src="/webjars/ace-builds/1.4.4/src-min/ace.js"></script>
+<script src="/webjars/ace-builds/1.4.4/src-min/mode-hjson.js"></script>
+
+<script src="/webjars/vue/2.5.16/vue.js"></script>
+
+<template id="stack-controls">
+    <div class="row column_title">
+        <div class="full">
+            <div class="page_title">
+                <a href="#" class="btn btn-primary" @click="save"><i class="far fa-save"></i> Save</a>
+                <a :href="'/stacks/' + stack.id + '/apply'" v-if="stack.state === 'NEW'" class="btn btn-primary"><i class="fas fa-rocket"></i> Run</a>
+                <a :href="'/stacks/' + stack.id + '/apply'" v-if="stack.state === 'TO_UPDATE'" class="btn btn-warning"><i class="fas fa-upload"></i> Update</a>
+            </div>
+        </div>
+    </div>
+</template>
+
 <template id="template">
     <div>
 
@@ -157,15 +172,6 @@ <h2>Module variables values</h2>
     </div>
 </template>
 
-<script src="/webjars/jquery/3.0.0/jquery.min.js"></script>
-<script src="/webjars/popper.js/1.14.3/umd/popper.min.js"></script>
-<script src="/webjars/bootstrap/4.3.1/js/bootstrap.min.js"></script>
-<script src="/js/prism.js"></script>
-<script src="/webjars/ace-builds/1.4.4/src-min/ace.js"></script>
-<script src="/webjars/ace-builds/1.4.4/src-min/mode-hjson.js"></script>
-
-<script src="/webjars/vue/2.5.16/vue.js"></script>
-
 <template id="job-history">
     <div class="job_history">
         <div class="job_history_head">
@@ -192,7 +198,7 @@ <h3><span><i class="fas fa-history"></i> Job history</span></h3>
     });
 
     Vue.filter('dateTime', function (value) {
-        if (!value) return ''
+        if (!value) return '';
         return new Date(value).toLocaleString();
     })
 </script>
@@ -247,6 +253,26 @@ <h3><span><i class="fas fa-history"></i> Job history</span></h3>
             }
         });
 
+        new Vue({
+            el: "#controls",
+            data: {
+                stack
+            },
+            template: "#stack-controls",
+            methods: {
+                save: function(){
+                    // getting custom provider data
+                    stackData.providerSpec = providerEditor.getValue();
+                    $.ajax({
+                        url: `/api/stacks/${stackId}`,
+                        data: JSON.stringify(stackData),
+                        contentType: "application/json",
+                        method: "PUT"
+                    });
+                }
+            }
+        });
+
         // highlight code !
         Prism.highlightAll();
 
@@ -255,17 +281,6 @@ <h3><span><i class="fas fa-history"></i> Job history</span></h3>
         let jsonMode = ace.require("ace/mode/hjson").Mode;
         providerEditor.session.setMode(new jsonMode());
     }
-
-    function saveStack(){
-        // getting custom provider data
-        stackData.providerSpec = providerEditor.getValue();
-        $.ajax({
-            url: `/api/stacks/${stackId}`,
-            data: JSON.stringify(stackData),
-            contentType: "application/json",
-            method: "PUT"
-        })
-    }
 </script>
 
 <script type="application/ecmascript">