[wip] NS instance topology view
[osm/LW-UI.git] / static / src / utils.js
1 function generateUID() {
2 return ("0000" + (Math.random() * Math.pow(36, 4) << 0).toString(36)).slice(-4)
3 }
4
5 function moveToLogin(next) {
6 window.location.href = (next) ? "/auth/?next="+next : '/auth/';
7 }
8
9
10 function openDescriptorView( descriptor_type, descriptor_id) {
11 console.log("openDescriptorView", descriptor_type, descriptor_id);
12 window.location.href = '/projects/descriptors/' + descriptor_type + '/' + descriptor_id;
13
14 }
15
16
17 function openEditorEvent(e, id) {
18 openEditor(id);
19 }
20
21 function nodeDragStart(event) {
22 event.dataTransfer.setData("Text", event.target.id);
23 }
24
25 function savePositions(el) {
26 graph_editor.savePositions();
27 }
28
29 function buildPalette(args) {
30 $("#paletteContainer").empty();
31 var type_property = graph_editor.getTypeProperty();
32
33 if (args.length > 0) {
34 $('#paletteContainer').append('<div id="palette-header">Legenda</div>');
35
36 args.forEach(function (category) {
37 var category_id = "category_" + category.category_name.replace(/[\s.*+?^${}()\/|[\]\\]/g, "_");//.replace(/\s/g, '');
38 var content_id = "palette-content-" + category.category_name.replace(/[\s.*+?^${}()\/|[\]\\]/g, "_");//.replace(/\s/g, '');
39
40 $("#paletteContainer").append('<div id="' + category_id + '" class="palette-category" >' +
41 '<div id="' + content_id + '" class="palette-content">' +
42 '</div>' +
43 '</div>');
44
45 category.types.forEach(function (type) {
46 console.log(graph_editor.get_name_from_d3_symbol(d3.symbolCircle))
47 var type_id = type.id.replace(/[\s.*+?^${}()|[\]\\]/g, "_");
48 var palette_node_icon;
49 if (type_property[type.id] && type_property[type.id].image && type_property[type.id].image != '') {
50 palette_node_icon = '<div class="palette-node-icon" style="background-image: url(' + (type_property[type.id].image || "") + ')"></div>';
51 }
52 else if (type_property[type.id] && type_property[type.id].shape) {
53 palette_node_icon = buildHtmlShape({
54 shape: type_property[type.id].shape,
55 color: type_property[type.id].color
56 });
57
58 }
59 else {//#1F77B4
60 palette_node_icon = '<div class="palette-node-icon"> <div class="palette-node-square" style="background:#1F77B4;"></div></div>';
61 }
62
63 var html_to_append = '<div class="palette-node ui-draggable" draggable="true" type-name="' + type.id + '" id="' + type_id + '" ondragstart="nodeDragStart(event)">' +
64 '<div class="palette-node-label">' + type.name + '</div>' +
65 '<div class="palette-node-icon-container">' +
66 palette_node_icon +
67 '</div>' +
68 '</div>';
69 $("#" + content_id).append(html_to_append);
70 });
71
72 });
73 }
74 togglePaletteSpinner(true);
75
76 }
77
78 function handlePaletteCat(item) {
79 console.log("handlePaletteContainer")
80 var category_id = $(item).attr("category_id");
81 $('#' + category_id).toggleClass("palette-close");
82
83 }
84
85 function togglePaletteSpinner(addOrRemove) {
86 $('#palette').toggleClass("palette-status-hidden", addOrRemove);
87 }
88
89 function showAlert(msg) {
90 // modal_alert_text
91 var alert_msg = "";
92 if (typeof msg === "string")
93 alert_msg = msg;
94 else
95 alert_msg = JSON.stringify(msg);
96 $('#modal_alert_text').text(alert_msg);
97 $('#modal_alert').modal('show');
98 }
99
100 function getUrlParameter(par_name) {
101 var results = new RegExp('[\?&]' + par_name + '=([^&#]*)').exec(window.location.href);
102 if (results == null) {
103 return null;
104 } else {
105 return results[1] || 0;
106 }
107 }
108
109 function buildHtmlShape(args) {
110 var mySymbol = args.shape;
111 switch (mySymbol) {
112 case d3.symbolCircle:
113 return '<div class="palette-node-icon"> <div class="palette-node-circle" style="background:' + args.color + ';"></div></div>';
114 case d3.symbolSquare:
115 return '<div class="palette-node-icon"> <div class="palette-node-square" style="background:' + args.color + ';"></div></div>';
116 case d3.symbolDiamond:
117 return '<div class="palette-node-icon" style="background-color:' + args.color + '"></div>';
118
119 case d3.symbolTriangle:
120 return '<div class="palette-node-icon"> <div class="palette-node-triangle" style="border-color: transparent transparent ' + args.color + ' transparent;"></div></div>';
121 case d3.symbolStar:
122 return '<div class="palette-node-icon" style="background-color:' + args.color + '"></div>';
123 case d3.symbolCross:
124 return '<div class="palette-node-icon" style="background-color:' + args.color + '"></div>';
125 default:
126 // if the string is not recognized
127 return "unknown";
128 //return d3.symbolCircleUnknown;
129 }
130
131
132 }
133
134 if (!String.format) {
135 String.format = function (format) {
136 var args = Array.prototype.slice.call(arguments, 1);
137 return format.replace(/{(\d+)}/g, function (match, number) {
138 return typeof args[number] !== 'undefined' ?
139 args[number] :
140 match;
141 });
142 };
143 }