Add Modal for Deployment Selection (#174)

* Changed popup to be in line with project visuals and standards * Fixed deployment included into the html request * Mini adjustment to formatting
Chronos-EaaS · Jun 17, 2024 · c12013f · c12013f
1 parent 380ff5d
commit c12013f
Showing 1 changed file with 32 additions and 12 deletions.
diff --git a/views/builder/create.php b/views/builder/create.php
@@ -194,17 +194,6 @@ function checkPercentageIntervals(dependency){
                                     <label>Description</label>
                                     <textarea class="form-control" rows="8" name="description" placeholder="Description"><?php echo $data['copyData']['description']; ?></textarea>
                                 </div>
-                                <div class="form-group">
-                                    <label>Select deployment</label>
-                                    <select id="environment" name="deployment" class="form-control" required>
-                                        <option value="" disabled selected>Please select a deployment</option>
-                                        <?php if(!empty($data['deployments'])) { ?>
-                                            <?php foreach ($data['deployments'] as $deployment) { ?>
-                                                <option value="<?php echo $deployment->getItem(); ?>" <?php if($data['copyData']['deployment'] == $deployment->getItem()) echo 'selected'; ?>><?php echo $deployment->getItem(); ?></option>
-                                            <?php } ?>
-                                        <?php } ?>
-                                    </select>
-                                </div>
                                 <div class="form-group">
                                     <div class="checkbox-inline">
                                         <label style="font-weight: normal">
@@ -220,7 +209,7 @@ function checkPercentageIntervals(dependency){
                             <div class="box-body">
                                 <div class="row">
                                     <div class="col-xs-12">
-                                        <button type="submit" class="btn btn-block btn-success btn-lg">Create</button>
+                                        <button data-toggle="modal" data-target="#modal-deployment" type="button"  class="btn btn-block btn-success btn-lg">Create</button>
                                     </div>
                                 </div>
                             </div>
@@ -232,5 +221,36 @@ function checkPercentageIntervals(dependency){
                 </div>
             </section>
         </div>
+</div>
+<div class="modal fade" id="modal-deployment">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"
+                        onclick="document.getElementById('form').reset()">
+                    <span aria-hidden="true">&times;</span></button>
+                <h4 class="modal-title">Select Deployment</h4>
+            </div>
+            <div class="modal-body">
+                <div class="form-group">
+                    <label>Deployment</label>
+                    <select class="form-control" name="deployment" title="deployment" required>
+                        <?php if(!empty($data['deployments'])) { ?>
+                            <?php foreach ($data['deployments'] as $deployment) { ?>
+                                <option value="<?php echo $deployment->getItem(); ?>" <?php if($data['copyData']['deployment'] == $deployment->getItem()) echo 'selected'; ?>><?php echo $deployment->getItem(); ?></option>
+                            <?php } ?>
+                        <?php } ?>
+                    </select>
+                </div>
+
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="document.getElementById('form').submit();">Confirm</button>
+                <button type="button" class="btn btn-default pull-left" data-dismiss="modal"
+                        onclick="document.getElementById('form').reset()">Cancel
+                </button>
+            </div>
+        </div>
+    </div>
     </form>
 </div>