mirror of
https://github.com/librenms/librenms.git
synced 2024-10-07 16:52:45 +00:00
cb09ae0d54
* Added options on edges for a label and to show graphs as bps as well as percentages I think that vis.js needs to be updated to allow both bps and percentages at the same time. * Add database migration * Try to avoid putting multiple mid points in the same position * Added a URL parameter for screenshot mode, where node labels are blanked out Also fixed up the node labels in the editor * Added legend to the editor as well as database options for reversing arrows and adjusting the edge separation All features have been implemented in the editor, but need to be implemented in the viewer * Fix missing defaults on the edit map list page Added arrow reverse code to the viewer Added legend code to the viewer Added code to the editor to correclty handle moving the legend * Formatting fixes and DB schema update * Remove view from database schema
130 lines
9.4 KiB
PHP
130 lines
9.4 KiB
PHP
<div class="modal fade" id="edgeModal" tabindex="-1" role="dialog" aria-labelledby="edgeModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="edgeModalLabel">{{ __('map.custom.edit.edge.new') }}</h5>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="well well-lg">
|
|
<div class="form-group row" id="divEdgeFrom">
|
|
<label for="edgefrom" class="col-sm-3 control-label">{{ __('map.custom.edit.edge.from') }}</label>
|
|
<div class="col-sm-9">
|
|
<select id="edgefrom" class="form-control input-sm">
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row" id="divEdgeTo">
|
|
<label for="edgeto" class="col-sm-3 control-label">{{ __('map.custom.edit.edge.to') }}</label>
|
|
<div class="col-sm-9">
|
|
<select id="edgeto" class="form-control input-sm">
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row single-node" id="edgePortSearchRow" style="display:none">
|
|
<label for="portsearch" class="col-sm-3 control-label">{{ __('map.custom.edit.edge.port_select') }}</label>
|
|
<div class="col-sm-9">
|
|
<select name="portsearch" id="portsearch" class="form-control"></select>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row" id="edgePortRow" style="display:none">
|
|
<label for="portclear" class="col-sm-3 control-label">{{ __('Port') }}</label>
|
|
<div class="col-sm-7">
|
|
<div id="port_name">
|
|
</div>
|
|
<input type="hidden" id="port_id">
|
|
</div>
|
|
<div class="col-sm-2">
|
|
<button type=button class="btn btn-primary" value="save" id="portclear" onclick="edgePortClear();">{{ __('Clear') }}</button>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row" id="edgePortReverseRow" style="display:none">
|
|
<label for="portreverse" class="col-sm-3 control-label">{{ __('map.custom.edit.edge.reverse') }}</label>
|
|
<div class="col-sm-9">
|
|
<input class="form-check-input" type="checkbox" role="switch" id="portreverse">
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label for="edgestyle" class="col-sm-3 control-label">{{ __('map.custom.edit.edge.style') }}</label>
|
|
<div class="col-sm-9">
|
|
<select id="edgestyle" class="form-control input-sm">
|
|
<option value="dynamic">{{ __('map.custom.edit.edge.style_options.dynamic') }}</option>
|
|
<option value="continuous">{{ __('map.custom.edit.edge.style_options.continuous') }}</option>
|
|
<option value="discrete">{{ __('map.custom.edit.edge.style_options.discrete') }}</option>
|
|
<option value="diagonalCross">{{ __('map.custom.edit.edge.style_options.diagonalCross') }}</option>
|
|
<option value="straightCross">{{ __('map.custom.edit.edge.style_options.straightCross') }}</option>
|
|
<option value="horizontal">{{ __('map.custom.edit.edge.style_options.horizontal') }}</option>
|
|
<option value="vertical">{{ __('map.custom.edit.edge.style_options.vertical') }}</option>
|
|
<option value="curvedCW">{{ __('map.custom.edit.edge.style_options.curvedCW') }}</option>
|
|
<option value="curvedCCW">{{ __('map.custom.edit.edge.style_options.curvedCCW') }}</option>
|
|
<option value="cubicBezier">{{ __('map.custom.edit.edge.style_options.cubicBezier') }}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row single-node">
|
|
<label for="edgetextshow" class="col-sm-3 control-label">{{ __('map.custom.edit.edge.show_usage_percent') }}</label>
|
|
<div class="col-sm-9">
|
|
<input class="form-check-input" type="checkbox" role="switch" id="edgetextshow">
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label for="edgebpsshow" class="col-sm-3 control-label">{{ __('map.custom.edit.edge.show_usage_bps') }}</label>
|
|
<div class="col-sm-9">
|
|
<input class="form-check-input" type="checkbox" role="switch" id="edgebpsshow">
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label for="edgelabel" class="col-sm-3 control-label">{{ __('map.custom.edit.edge.label') }}</label>
|
|
<div class="col-sm-9">
|
|
<input type=text id="edgelabel" class="form-control input-sm" value="" />
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label for="edgetextface" class="col-sm-3 control-label">{{ __('map.custom.edit.text_font') }}</label>
|
|
<div class="col-sm-9">
|
|
<input type=text id="edgetextface" class="form-control input-sm" value="arial" />
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label for="edgetextsize" class="col-sm-3 control-label">{{ __('map.custom.edit.text_size') }}</label>
|
|
<div class="col-sm-9">
|
|
<input type=number id="edgetextsize" class="form-control input-sm" value=14 />
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label for="edgetextcolour" class="col-sm-3 control-label">{{ __('map.custom.edit.text_color') }}</label>
|
|
<div class="col-sm-2">
|
|
<input type=color id="edgetextcolour" class="form-control input-sm" value="#343434" onchange="$('#edgecolourtextreset').removeAttr('disabled');" />
|
|
</div>
|
|
<div class="col-sm-5">
|
|
</div>
|
|
<div class="col-sm-2">
|
|
<button type=button class="btn btn-primary" value="reset" id="edgecolourtextreset" onclick="$('#edgetextcolour').val(newedgeconf.font.color); $(this).attr('disabled','disabled');">{{ __('Reset') }}</button>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row" id="edgeRecenterRow">
|
|
<label for="edgerecenter" class="col-sm-3 control-label">{{ __('map.custom.edit.edge.recenter') }}</label>
|
|
<div class="col-sm-9">
|
|
<input type=checkbox class="form-check-input" value="recenter" id="edgerecenter">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-12" id="saveedge-alert">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<center>
|
|
<button type=button class="btn btn-primary" value="savedefaults" id="edge-saveDefaultsButton" data-dismiss="modal" style="display:none" onclick="editEdgeDefaultsSave();">{{ __('map.custom.edit.defaults') }}</button>
|
|
<button type=button class="btn btn-primary" value="save" id="edge-saveButton" data-dismiss="modal">{{ __('Save') }}</button>
|
|
<button type=button class="btn btn-primary" value="cancel" id="edge-cancelButton" data-dismiss="modal" onclick="editEdgeCancel();">{{ __('Cancel') }}</button>
|
|
</center>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|