Added description for flows and turn on and off option
This commit is contained in:
parent
89d4291168
commit
60e5131850
7 changed files with 99 additions and 19 deletions
4
resource/web/css/hal.css
vendored
4
resource/web/css/hal.css
vendored
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>×</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">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue