mirror of
https://github.com/librenms/librenms.git
synced 2024-09-21 02:18:39 +00:00
Custom Maps configurable new map defaults (#16212)
This commit is contained in:
parent
1cceafb887
commit
cf7b025fb1
@ -48,9 +48,9 @@ class CustomMapController extends Controller
|
||||
'maps' => CustomMap::orderBy('name')->get(['custom_map_id', 'name', 'menu_group'])->groupBy('menu_group')->sortKeys(),
|
||||
'name' => 'New Map',
|
||||
'menu_group' => null,
|
||||
'node_align' => 10,
|
||||
'edge_separation' => 10,
|
||||
'reverse_arrows' => 0,
|
||||
'node_align' => Config::get('custom_map.node_align', 10),
|
||||
'edge_separation' => Config::get('custom_map.edge_seperation', 10),
|
||||
'reverse_arrows' => Config::get('custom_map.reverse_arrows', false),
|
||||
'legend' => [
|
||||
'x' => -1,
|
||||
'y' => -1,
|
||||
@ -59,10 +59,11 @@ class CustomMapController extends Controller
|
||||
'hide_overspeed' => 0,
|
||||
'font_size' => 14,
|
||||
],
|
||||
'background_type' => null,
|
||||
'background_type' => Config::get('custom_map.background_type', 'none'),
|
||||
'background_data' => Config::get('custom_map.background_data'),
|
||||
'map_conf' => [
|
||||
'height' => '800px',
|
||||
'width' => '1800px',
|
||||
'width' => Config::get('custom_map.width', '1800px'),
|
||||
'height' => Config::get('custom_map.height', '800px'),
|
||||
'interaction' => [
|
||||
'dragNodes' => true,
|
||||
'dragView' => false,
|
||||
@ -154,7 +155,57 @@ class CustomMapController extends Controller
|
||||
|
||||
public function store(CustomMapSettingsRequest $request): JsonResponse
|
||||
{
|
||||
return $this->update($request, new CustomMap);
|
||||
// create a new map with default values
|
||||
$map = new CustomMap;
|
||||
$map->options = [
|
||||
'interaction' => [
|
||||
'dragNodes' => false,
|
||||
'dragView' => false,
|
||||
'zoomView' => false,
|
||||
],
|
||||
'manipulation' => [
|
||||
'enabled' => false,
|
||||
],
|
||||
'physics' => [
|
||||
'enabled' => false,
|
||||
],
|
||||
];
|
||||
$map->newnodeconfig = [
|
||||
'borderWidth' => 1,
|
||||
'color' => [
|
||||
'border' => Config::get('custom_map.node_border', '#2B7CE9'),
|
||||
'background' => Config::get('custom_map.node_background', '#D2E5FF'),
|
||||
],
|
||||
'font' => [
|
||||
'color' => Config::get('custom_map.node_font_color', '#343434'),
|
||||
'size' => Config::get('custom_map.node_font_size', 14),
|
||||
'face' => Config::get('custom_map.node_font_face', 'arial'),
|
||||
],
|
||||
'icon' => [],
|
||||
'label' => true,
|
||||
'shape' => Config::get('custom_map.node_type', 'box'),
|
||||
'size' => Config::get('custom_map.node_size', 25),
|
||||
];
|
||||
$map->newedgeconfig = [
|
||||
'arrows' => [
|
||||
'to' => [
|
||||
'enabled' => true,
|
||||
],
|
||||
],
|
||||
'smooth' => [
|
||||
'type' => 'dynamic',
|
||||
],
|
||||
'font' => [
|
||||
'color' => Config::get('custom_map.edge_font_color', '#343434'),
|
||||
'size' => Config::get('custom_map.edge_font_size', 12),
|
||||
'face' => Config::get('custom_map.edge_font_face', 'arial'),
|
||||
],
|
||||
'label' => true,
|
||||
];
|
||||
$map->background_type = Config::get('custom_map.background_type', 'none');
|
||||
$map->background_data = Config::get('custom_map.background_data');
|
||||
|
||||
return $this->update($request, $map);
|
||||
}
|
||||
|
||||
public function update(CustomMapSettingsRequest $request, CustomMap $map): JsonResponse
|
||||
|
@ -59,13 +59,6 @@ class CustomMap extends BaseModel
|
||||
'background_data',
|
||||
];
|
||||
|
||||
// default values for attributes
|
||||
protected $attributes = [
|
||||
'options' => '{"interaction":{"dragNodes":false,"dragView":false,"zoomView":false},"manipulation":{"enabled":false},"physics":{"enabled":false}}',
|
||||
'newnodeconfig' => '{"borderWidth":1,"color":{"border":"#2B7CE9","background":"#D2E5FF"},"font":{"color":"#343434","size":14,"face":"arial"},"icon":[],"label":true,"shape":"box","size":25}',
|
||||
'newedgeconfig' => '{"arrows":{"to":{"enabled":true}},"smooth":{"type":"dynamic"},"font":{"color":"#343434","size":12,"face":"arial"},"label":true}',
|
||||
];
|
||||
|
||||
/**
|
||||
* Get background data intended to be passed to javascript to configure the background
|
||||
*/
|
||||
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,11 +1,11 @@
|
||||
{
|
||||
"/js/app.js": "/js/app.js?id=1ecd9b13d60fe23a9729684f4d9dc663",
|
||||
"/js/app.js": "/js/app.js?id=6fd1d20a8df5d99d9822ab7476b72a6e",
|
||||
"/js/manifest.js": "/js/manifest.js?id=2eb19d92c19953027907b72ff5963ebb",
|
||||
"/css/vendor.css": "/css/vendor.css?id=d520734ded0ec75b0a572aa8db1c2161",
|
||||
"/css/app.css": "/css/app.css?id=71ba24df332b4132f71ad82f23679d4f",
|
||||
"/css/app.css": "/css/app.css?id=d5329c44307234e278d193efbf78e05a",
|
||||
"/js/vendor.js": "/js/vendor.js?id=3b22b85b4e5a64e37dd954c0b147b3f3",
|
||||
"/js/lang/de.js": "/js/lang/de.js?id=f80b2c49bd4d1587d4747d189c566ffa",
|
||||
"/js/lang/en.js": "/js/lang/en.js?id=5f909f26f3509a880924343a6acc7df4",
|
||||
"/js/lang/en.js": "/js/lang/en.js?id=7f4b534757a8fe8d66343da15b70cb5d",
|
||||
"/js/lang/fr.js": "/js/lang/fr.js?id=7e43fd1965beef315f0b416fd8607231",
|
||||
"/js/lang/it.js": "/js/lang/it.js?id=7827375adf92766a477291c48fa1b360",
|
||||
"/js/lang/ru.js": "/js/lang/ru.js?id=f6b7c078755312a0907c4f983991cc52",
|
||||
|
@ -78,6 +78,7 @@ return [
|
||||
],
|
||||
'webui' => [
|
||||
'availability-map' => ['name' => 'Availability Map Settings'],
|
||||
'custom-map' => ['name' => 'Custom Map Settings'],
|
||||
'graph' => ['name' => 'Graph Settings'],
|
||||
'dashboard' => ['name' => 'Dashboard Settings'],
|
||||
'port-descr' => ['name' => 'Interface Description Parsing'],
|
||||
@ -497,6 +498,94 @@ return [
|
||||
'description' => 'Core Port Types',
|
||||
'help' => 'Ports of the listed description type(s) will be shown under the core ports menu entry. See Interface Description Parsing docs for more info.',
|
||||
],
|
||||
'custom_map' => [
|
||||
'background_type' => [
|
||||
'description' => 'Background Type',
|
||||
'help' => 'Default background type for new maps. Requires background data set.',
|
||||
],
|
||||
'background_data' => [
|
||||
'color' => [
|
||||
'description' => 'Background Color',
|
||||
'help' => 'Initial color for map background',
|
||||
],
|
||||
'lat' => [
|
||||
'description' => 'Background Map Lattitude',
|
||||
'help' => 'Initial lattitude for background geo map',
|
||||
],
|
||||
'lng' => [
|
||||
'description' => 'Background Map Longitude',
|
||||
'help' => 'Initial longitude for background geo map',
|
||||
],
|
||||
'layer' => [
|
||||
'description' => 'Background Map Layer',
|
||||
'help' => 'Initial map layer for background geo map',
|
||||
],
|
||||
'zoom' => [
|
||||
'description' => 'Background Map Zoom',
|
||||
'help' => 'Initial map zoom for background geo map',
|
||||
],
|
||||
],
|
||||
'edge_font_color' => [
|
||||
'description' => 'Edge Text Color',
|
||||
'help' => 'Default font color for edge labels',
|
||||
],
|
||||
'edge_font_face' => [
|
||||
'description' => 'Edge Font',
|
||||
'help' => 'Default font face for edge labels',
|
||||
],
|
||||
'edge_font_size' => [
|
||||
'description' => 'Edge Text Size',
|
||||
'help' => 'Default font size for edge labels',
|
||||
],
|
||||
'edge_seperation' => [
|
||||
'description' => 'Edge Seperation',
|
||||
'help' => 'Default edge seperation for new maps',
|
||||
],
|
||||
'height' => [
|
||||
'description' => 'Map Height',
|
||||
'help' => 'Default map height for new maps',
|
||||
],
|
||||
'node_align' => [
|
||||
'description' => 'Node Alignment',
|
||||
'help' => 'Default node aligment for new maps',
|
||||
],
|
||||
'node_background' => [
|
||||
'description' => 'Node Background',
|
||||
'help' => 'Default background color for node labels',
|
||||
],
|
||||
'node_border' => [
|
||||
'description' => 'Node Border',
|
||||
'help' => 'Default border color for node labels',
|
||||
],
|
||||
'node_font_color' => [
|
||||
'description' => 'Node Text Color',
|
||||
'help' => 'Default font color for node labels',
|
||||
],
|
||||
'node_font_face' => [
|
||||
'description' => 'Node Font',
|
||||
'help' => 'Default font for node labels',
|
||||
],
|
||||
'node_font_size' => [
|
||||
'description' => 'Node Text Size',
|
||||
'help' => 'Default font size for node labels',
|
||||
],
|
||||
'node_size' => [
|
||||
'description' => 'Node Size',
|
||||
'help' => 'Default size for nodes',
|
||||
],
|
||||
'node_type' => [
|
||||
'description' => 'Node Display Type',
|
||||
'help' => 'Default display type for nodes',
|
||||
],
|
||||
'reverse_arrows' => [
|
||||
'description' => 'Reverse Edge Arrows',
|
||||
'help' => 'Default arrow direction. Towards center (default) or towards ends',
|
||||
],
|
||||
'width' => [
|
||||
'description' => 'Map Width',
|
||||
'help' => 'Default map width for new maps',
|
||||
],
|
||||
],
|
||||
'customers_descr' => [
|
||||
'description' => 'Customer Port Types',
|
||||
'help' => 'Ports of the listed description type(s) will be shown under the customers ports menu entry. See Interface Description Parsing docs for more info.',
|
||||
|
@ -963,6 +963,210 @@
|
||||
"default": [""],
|
||||
"type": "array"
|
||||
},
|
||||
"custom_map.background_type": {
|
||||
"default": "none",
|
||||
"type": "select",
|
||||
"group": "webui",
|
||||
"section": "custom-map",
|
||||
"order": 98,
|
||||
"options": {
|
||||
"color": "Color",
|
||||
"map": "Map",
|
||||
"none": "None"
|
||||
}
|
||||
},
|
||||
"custom_map.background_data.color": {
|
||||
"default": "#badaee",
|
||||
"type": "color",
|
||||
"group": "webui",
|
||||
"section": "custom-map",
|
||||
"order": 100,
|
||||
"options": {
|
||||
"Streets": "Streets",
|
||||
"Sattelite": "Sattelite",
|
||||
"Topography": "Topography"
|
||||
},
|
||||
"when": {
|
||||
"setting": "custom_map.background_type",
|
||||
"operator": "equals",
|
||||
"value": "color"
|
||||
}
|
||||
},
|
||||
"custom_map.background_data.lat": {
|
||||
"default": 40,
|
||||
"type": "float",
|
||||
"group": "webui",
|
||||
"section": "custom-map",
|
||||
"order": 101,
|
||||
"when": {
|
||||
"setting": "custom_map.background_type",
|
||||
"operator": "equals",
|
||||
"value": "map"
|
||||
}
|
||||
},
|
||||
"custom_map.background_data.layer": {
|
||||
"default": null,
|
||||
"type": "select",
|
||||
"group": "webui",
|
||||
"section": "custom-map",
|
||||
"order": 104,
|
||||
"options": {
|
||||
"Streets": "Streets",
|
||||
"Sattelite": "Sattelite",
|
||||
"Topography": "Topography"
|
||||
},
|
||||
"when": {
|
||||
"setting": "custom_map.background_type",
|
||||
"operator": "equals",
|
||||
"value": "map"
|
||||
}
|
||||
},
|
||||
"custom_map.background_data.lng": {
|
||||
"default": -20,
|
||||
"type": "float",
|
||||
"group": "webui",
|
||||
"section": "custom-map",
|
||||
"order": 102,
|
||||
"when": {
|
||||
"setting": "custom_map.background_type",
|
||||
"operator": "equals",
|
||||
"value": "map"
|
||||
}
|
||||
},
|
||||
"custom_map.background_data.zoom": {
|
||||
"default": 3,
|
||||
"type": "integer",
|
||||
"group": "webui",
|
||||
"section": "custom-map",
|
||||
"order": 103,
|
||||
"when": {
|
||||
"setting": "custom_map.background_type",
|
||||
"operator": "equals",
|
||||
"value": "map"
|
||||
}
|
||||
},
|
||||
"custom_map.edge_font_color": {
|
||||
"default": "#343434",
|
||||
"type": "color",
|
||||
"group": "webui",
|
||||
"section": "custom-map",
|
||||
"order": 53
|
||||
},
|
||||
"custom_map.edge_font_face": {
|
||||
"default": "arial",
|
||||
"type": "text",
|
||||
"group": "webui",
|
||||
"section": "custom-map",
|
||||
"order": 51
|
||||
},
|
||||
"custom_map.edge_font_size": {
|
||||
"default": 12,
|
||||
"type": "integer",
|
||||
"group": "webui",
|
||||
"section": "custom-map",
|
||||
"order": 52
|
||||
},
|
||||
"custom_map.edge_seperation": {
|
||||
"default": 10,
|
||||
"type": "integer",
|
||||
"group": "webui",
|
||||
"section": "custom-map",
|
||||
"order": 21
|
||||
},
|
||||
"custom_map.height": {
|
||||
"default": "1800px",
|
||||
"type": "text",
|
||||
"group": "webui",
|
||||
"section": "custom-map",
|
||||
"order": 2
|
||||
},
|
||||
"custom_map.node_align": {
|
||||
"default": 10,
|
||||
"type": "integer",
|
||||
"group": "webui",
|
||||
"section": "custom-map",
|
||||
"order": 22
|
||||
},
|
||||
"custom_map.node_background": {
|
||||
"default": "#D2E5FF",
|
||||
"type": "color",
|
||||
"group": "webui",
|
||||
"section": "custom-map",
|
||||
"order": 41
|
||||
},
|
||||
"custom_map.node_border": {
|
||||
"default": "#2B7CE9",
|
||||
"type": "color",
|
||||
"group": "webui",
|
||||
"section": "custom-map",
|
||||
"order": 42
|
||||
},
|
||||
"custom_map.node_font_color": {
|
||||
"default": "#343434",
|
||||
"type": "color",
|
||||
"group": "webui",
|
||||
"section": "custom-map",
|
||||
"order": 45
|
||||
},
|
||||
"custom_map.node_font_face": {
|
||||
"default": "arial",
|
||||
"type": "text",
|
||||
"group": "webui",
|
||||
"section": "custom-map",
|
||||
"order": 43
|
||||
},
|
||||
"custom_map.node_font_size": {
|
||||
"default": 14,
|
||||
"type": "integer",
|
||||
"group": "webui",
|
||||
"section": "custom-map",
|
||||
"order": 44
|
||||
},
|
||||
"custom_map.node_size": {
|
||||
"default": 25,
|
||||
"type": "integer",
|
||||
"group": "webui",
|
||||
"section": "custom-map",
|
||||
"order": 40
|
||||
},
|
||||
"custom_map.node_type": {
|
||||
"default": "box",
|
||||
"type": "select",
|
||||
"group": "webui",
|
||||
"section": "custom-map",
|
||||
"order": 39,
|
||||
"options": {
|
||||
"box": "Box",
|
||||
"circle": "Circle",
|
||||
"database": "Database",
|
||||
"ellipse": "Ellipse",
|
||||
"text": "Text",
|
||||
"device_image": "Device Image",
|
||||
"device_image_circle": "Device Image (Circular)",
|
||||
"diamond": "Diamond",
|
||||
"dot": "Dot",
|
||||
"star": "Star",
|
||||
"triangle": "Triangle",
|
||||
"triangle_inverted": "Triangle Inverted",
|
||||
"hexagon": "Hexagon",
|
||||
"square": "Square",
|
||||
"icon": "Icon"
|
||||
}
|
||||
},
|
||||
"custom_map.reverse_arrows": {
|
||||
"default": false,
|
||||
"type": "boolean",
|
||||
"group": "webui",
|
||||
"section": "custom-map",
|
||||
"order": 23
|
||||
},
|
||||
"custom_map.width": {
|
||||
"default": "800px",
|
||||
"type": "text",
|
||||
"group": "webui",
|
||||
"section": "custom-map",
|
||||
"order": 1
|
||||
},
|
||||
"customers_descr": {
|
||||
"default": ["cust"],
|
||||
"type": "array",
|
||||
|
48
resources/js/components/SettingColor.vue
Normal file
48
resources/js/components/SettingColor.vue
Normal file
@ -0,0 +1,48 @@
|
||||
<!--
|
||||
- SettingColor.vue
|
||||
-
|
||||
- Description-
|
||||
-
|
||||
- This program is free software: you can redistribute it and/or modify
|
||||
- it under the terms of the GNU General Public License as published by
|
||||
- the Free Software Foundation, either version 3 of the License, or
|
||||
- (at your option) any later version.
|
||||
-
|
||||
- This program is distributed in the hope that it will be useful,
|
||||
- but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.See the
|
||||
- GNU General Public License for more details.
|
||||
-
|
||||
- You should have received a copy of the GNU General Public License
|
||||
- along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
-
|
||||
- @package LibreNMS
|
||||
- @link https://www.librenms.org
|
||||
- @copyright 2019 Tony Murray
|
||||
- @author Tony Murray <murraytony@gmail.com>
|
||||
-->
|
||||
|
||||
<template>
|
||||
<input type="color" class="form-control"
|
||||
:name="name"
|
||||
:value="value"
|
||||
@input="$emit('input', $event.target.value)"
|
||||
:required="required"
|
||||
:disabled="disabled"
|
||||
>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseSetting from "./BaseSetting";
|
||||
|
||||
export default {
|
||||
name: "SettingColor",
|
||||
mixins: [BaseSetting],
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.form-control {
|
||||
padding-right: 12px;
|
||||
}
|
||||
</style>
|
@ -67,11 +67,11 @@
|
||||
error: '',
|
||||
resetBackground() {
|
||||
this.type = this.initial_type;
|
||||
this.color = 'color' in this.initial_data ? this.initial_data.color : '#badaee';
|
||||
this.lat = 'lat' in this.initial_data ? this.initial_data.lat : 40;
|
||||
this.lng = 'lng' in this.initial_data ? this.initial_data.lng : -20;
|
||||
this.zoom = 'zoom' in this.initial_data ? this.initial_data.zoom : 3;
|
||||
this.layer = 'layer' in this.initial_data ? this.initial_data.layer : null;
|
||||
this.color = 'color' in this.initial_data ? this.initial_data.color : '{{ Config::get('custom_map.background_data.color') }}';
|
||||
this.lat = 'lat' in this.initial_data ? this.initial_data.lat : {{ (float) Config::get('custom_map.background_data.lat') }};
|
||||
this.lng = 'lng' in this.initial_data ? this.initial_data.lng : {{ (float) Config::get('custom_map.background_data.lng') }};
|
||||
this.zoom = 'zoom' in this.initial_data ? this.initial_data.zoom : {{ (int) Config::get('custom_map.background_data.zoom') }};
|
||||
this.layer = 'layer' in this.initial_data ? this.initial_data.layer : {{ Js::from(Config::get('custom_map.background_data.layer')) }};
|
||||
this.image = this.initial_data['original_filename'];
|
||||
this.image_content = null;
|
||||
this.show_image_export = (! 'engine' in this.initial_data) || ! ['google', 'bing'].includes(this.initial_data['engine']);
|
||||
|
Loading…
Reference in New Issue
Block a user