Added description for flows and turn on and off option

This commit is contained in:
Ziver Koc 2018-02-26 23:17:03 +01:00
parent 89d4291168
commit 60e5131850
7 changed files with 99 additions and 19 deletions

View file

@ -99,6 +99,10 @@ body {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12)
}
.disabled {
background-color: lightgray;
opacity: .6;
}
/*
* Placeholder dashboard ideas

View file

@ -13,16 +13,18 @@
<div class="col-md-12">
<div class="panel panel-default drop-shadow">
<div class="panel-heading clearfix">
<form method="POST">
<input type="hidden" name="flow-id" value="{{.getId()}}">
<div class="btn-toolbar pull-right">
<button type="submit" class="btn btn-danger btn-xs" style="padding: 1px 20px;" name="action" value="remove_flow">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
</form>
{{.getName()}}
<div class="pull-right">
<button type="button" class="btn btn-default btn-xs" data-toggle="modal" style="padding: 1px 20px;"
data-target="#flowModal"
data-flow-id="{{.getId()}}"
data-enabled="{{.isEnabled()}}"
data-name="{{.getName()}}" >
<span class="glyphicon glyphicon-pencil"></span>
</button>
</div>
</div>
<div class="panel-body">
<div class="panel-body {{^.isEnabled()}}disabled{{/.isEnabled()}}">
<table class="table table-condensed">
<thead class="row">
<th class="col-md-5 text-center">
@ -138,9 +140,63 @@
$(function(){
initDynamicModalForm("triggerModal", "trigger-data-conf", "trigger-data-conf-template");
initDynamicModalForm("actionModal", "action-data-conf", "action-data-conf-template");
$("#flowModal").on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var modal = $(this);
modal.find("input[type=text]").val(""); // Reset all inputs
modal.find("input[name=flow-id]").val(button.data("flow-id"));
modal.find("input[name=name]").val(button.data("name"));
modal.find("input[name=enabled]").prop('checked', button.data("enabled"));
modal.find("input[name=enabled]").bootstrapSwitch('state', button.data("enabled"), true);
});
});
</script>
<div class="modal fade" id="flowModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
<h4 class="modal-title">Flow</h4>
</div>
<form method="POST">
<div class="modal-body">
<input type="hidden" name="action" value="modify_flow">
<input type="hidden" name="flow-id">
<!--<div class="checkbox">
<label>
<input type="checkbox" name="enabled"> Enabled
</label>
</div>-->
<div class="form-group">
<label class="control-label">Enabled:</label>
<div class="checkbox">
<input class="toggle-switch" type="checkbox" name="enabled"
data-size="small" data-off-color="danger" >
</div>
</div>
<div class="form-group">
<label class="control-label">Name:</label>
<input type="text" class="form-control" name="name">
</div>
</div>
<div class="modal-footer">
<div class="pull-left">
<button type="submit" class="btn btn-danger" name="action" value="remove_flow">
<span class="glyphicon glyphicon-trash"></span>
</button>
</div>
<button type="reset" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
</div>
<div class="modal fade" id="triggerModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
@ -176,7 +232,6 @@
</div>
</div>
<div class="modal fade" id="actionModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">