홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Steven Burrows
d576f64f 1 parent 02a417fa

Removed dialog logic from the Topo2Map Class 

Change-Id: I2e89c911d904feb7226160ee368459d04a3ddc32
Inline Side-by-side
Showing 4 changed files with 223 additions and 135 deletions
...@@ -22,56 +22,16 @@ ...@@ -22,56 +22,16 @@
22 (function () { 22 (function () {
23 'use strict'; 23 'use strict';
24 24
25 - var $log, $loc, wss, ps, ms, t2ds, sus; 25 + // Injected Services
26 + var $loc, ps, ms, sus, countryFilters;
26 27
27 - // internal state 28 + // Injected Classes
28 - var mapG, order, maps, map, mapItems, tintCheck, messageHandlers; 29 + var MapSelectionDialog;
29 -
30 - // constants
31 - var mapRequest = 'mapSelectorRequest';
32 -
33 - var countryFilters = {
34 - s_america: function (c) {
35 - return c.properties.continent === 'South America';
36 - },
37 -
38 - ns_america: function (c) {
39 - return c.properties.custom === 'US-cont' ||
40 - c.properties.subregion === 'Central America' ||
41 - c.properties.continent === 'South America';
42 - },
43 -
44 - japan: function (c) {
45 - return c.properties.geounit === 'Japan';
46 - },
47 -
48 - europe: function (c) {
49 - return c.properties.continent === 'Europe';
50 - },
51 -
52 - italy: function (c) {
53 - return c.properties.geounit === 'Italy';
54 - },
55 -
56 - uk: function (c) {
57 - // technically, Ireland is not part of the United Kingdom,
58 - // but the map looks weird without it showing.
59 - return c.properties.adm0_a3 === 'GBR' ||
60 - c.properties.adm0_a3 === 'IRL';
61 - },
62 -
63 - s_korea: function (c) {
64 - return c.properties.adm0_a3 === 'KOR';
65 - },
66 30
67 - australia: function (c) { 31 + // internal state
68 - return c.properties.adm0_a3 === 'AUS'; 32 + var mapG;
69 - }
70 - };
71 33
72 function init(zoomLayer) { 34 function init(zoomLayer) {
73 -
74 - start();
75 return setUpMap(zoomLayer); 35 return setUpMap(zoomLayer);
76 } 36 }
77 37
...@@ -80,7 +40,7 @@ ...@@ -80,7 +40,7 @@
80 mapId = prefs.mapid, 40 mapId = prefs.mapid,
81 mapFilePath = prefs.mapfilepath, 41 mapFilePath = prefs.mapfilepath,
82 mapScale = prefs.mapscale, 42 mapScale = prefs.mapscale,
83 - tint = prefs.tint, 43 + loadMap = ms.loadMapInto,
84 promise, cfilter; 44 promise, cfilter;
85 45
86 mapG = d3.select('#topo-map'); 46 mapG = d3.select('#topo-map');
...@@ -93,36 +53,20 @@ ...@@ -93,36 +53,20 @@
93 }); 53 });
94 } 54 }
95 55
96 - cfilter = countryFilters[mapId] || countryFilters.uk;
97 -
98 if (mapFilePath === '*countries') { 56 if (mapFilePath === '*countries') {
99 -
100 cfilter = countryFilters[mapId] || countryFilters.uk; 57 cfilter = countryFilters[mapId] || countryFilters.uk;
58 + loadMap = ms.loadMapRegionInto
59 + }
101 60
102 - promise = ms.loadMapRegionInto(mapG, { 61 + promise = loadMap(mapG, mapFilePath, mapId, {
103 - countryFilter: cfilter, 62 + countryFilters: cfilter,
104 - adjustScale: mapScale,
105 - shading: ''
106 - });
107 - } else {
108 -
109 - promise = ms.loadMapInto(mapG, mapFilePath, mapId, {
110 adjustScale: mapScale, 63 adjustScale: mapScale,
111 shading: '' 64 shading: ''
112 }); 65 });
113 - }
114 66
115 return promise; 67 return promise;
116 } 68 }
117 69
118 - function start() {
119 - wss.bindHandlers(messageHandlers);
120 - }
121 -
122 - function stop() {
123 - wss.unbindHandlers(messageHandlers);
124 - }
125 -
126 function currentMap() { 70 function currentMap() {
127 return ps.getPrefs( 71 return ps.getPrefs(
128 'topo_mapid', 72 'topo_mapid',
...@@ -136,10 +80,6 @@ ...@@ -136,10 +80,6 @@
136 ); 80 );
137 } 81 }
138 82
139 - function openMapSelection() {
140 - wss.sendEvent(mapRequest);
141 - }
142 -
143 function opacifyMap(b) { 83 function opacifyMap(b) {
144 mapG.transition() 84 mapG.transition()
145 .duration(1000) 85 .duration(1000)
...@@ -152,56 +92,6 @@ ...@@ -152,56 +92,6 @@
152 opacifyMap(true); 92 opacifyMap(true);
153 } 93 }
154 94
155 - function dOk() {
156 - var p = {
157 - mapid: map.id,
158 - mapscale: map.scale,
159 - mapfilepath: map.filePath,
160 - tint: 'off'
161 - // tint: tintCheck.property('checked') ? 'on' : 'off'
162 - };
163 - setMap(p);
164 - $log.debug('Dialog OK button clicked');
165 - }
166 -
167 - function dClose() {
168 - $log.debug('Dialog Close button clicked (or Esc pressed)');
169 - }
170 -
171 - function selectMap() {
172 - map = maps[this.options[this.selectedIndex].value];
173 - $log.info('Selected map', map);
174 - }
175 -
176 - function createListContent() {
177 - var content = t2ds.createDiv('map-list'),
178 - form = content.append('form'),
179 - current = currentMap();
180 - map = maps[current.mapid];
181 - mapItems = form.append('select').on('change', selectMap);
182 - order.forEach(function (id) {
183 - var m = maps[id];
184 - mapItems.append('option')
185 - .attr('value', m.id)
186 - .attr('selected', m.id === current.mapid ? true : null)
187 - .text(m.description);
188 - });
189 -
190 - return content;
191 - }
192 -
193 - function handleMapResponse(data) {
194 - $log.info('Got response', data);
195 - order = data.order;
196 - maps = data.maps;
197 - t2ds.openDialog()
198 - .setTitle('Select Map')
199 - .addContent(createListContent())
200 - .addOk(dOk, 'OK')
201 - .addCancel(dClose, 'Close')
202 - .bindKeys();
203 - }
204 -
205 // TODO: -- START -- Move to dedicated module 95 // TODO: -- START -- Move to dedicated module
206 var prefsState = {}; 96 var prefsState = {};
207 97
...@@ -211,8 +101,7 @@ ...@@ -211,8 +101,7 @@
211 } 101 }
212 102
213 function _togSvgLayer(x, G, tag, what) { 103 function _togSvgLayer(x, G, tag, what) {
214 - var on = (x === 'keyev') ? !sus.visible(G) : !!x, 104 + var on = (x === 'keyev') ? !sus.visible(G) : Boolean(x);
215 - verb = on ? 'Show' : 'Hide';
216 sus.visible(G, on); 105 sus.visible(G, on);
217 updatePrefsState(tag, on); 106 updatePrefsState(tag, on);
218 // flash.flash(verb + ' ' + what); 107 // flash.flash(verb + ' ' + what);
...@@ -223,29 +112,35 @@ ...@@ -223,29 +112,35 @@
223 _togSvgLayer(x, mapG, 'bg', 'background map'); 112 _togSvgLayer(x, mapG, 'bg', 'background map');
224 } 113 }
225 114
115 + function openMapSelection() {
116 +
117 + // TODO: Create a view class with extend method
118 + MapSelectionDialog.prototype.currentMap = currentMap;
119 +
120 + new MapSelectionDialog({
121 + okHandler: function (preferences) {
122 + setMap(preferences);
123 + }
124 + }).open();
125 + }
126 +
226 angular.module('ovTopo2') 127 angular.module('ovTopo2')
227 .factory('Topo2MapService', 128 .factory('Topo2MapService',
228 - ['$log', '$location', 'WebSocketService', 'PrefsService', 'MapService', 129 + ['$location', 'PrefsService', 'MapService',
229 - 'SvgUtilService', 'Topo2DialogService', 130 + 'SvgUtilService', 'Topo2CountryFilters', 'Topo2MapDialog',
230 - function (_$log_, _$loc_, _wss_, _ps_, _ms_, _sus_, _t2ds_) { 131 + function (_$loc_, _ps_, _ms_, _sus_, _t2cf_, _t2md_) {
231 132
232 - $log = _$log_;
233 $loc = _$loc_; 133 $loc = _$loc_;
234 - wss = _wss_;
235 ps = _ps_; 134 ps = _ps_;
236 ms = _ms_; 135 ms = _ms_;
237 sus = _sus_; 136 sus = _sus_;
238 - t2ds = _t2ds_; 137 + countryFilters = _t2cf_;
239 - 138 + MapSelectionDialog = _t2md_;
240 - messageHandlers = {
241 - mapSelectorResponse: handleMapResponse
242 - };
243 139
244 return { 140 return {
245 init: init, 141 init: init,
246 openMapSelection: openMapSelection, 142 openMapSelection: openMapSelection,
247 - toggle: toggle, 143 + toggle: toggle
248 - stop: stop
249 }; 144 };
250 } 145 }
251 ]); 146 ]);
......
1 +/*
2 + * Copyright 2016-present Open Networking Laboratory
3 + *
4 + * Licensed under the Apache License, Version 2.0 (the "License");
5 + * you may not use this file except in compliance with the License.
6 + * You may obtain a copy of the License at
7 + *
8 + * http://www.apache.org/licenses/LICENSE-2.0
9 + *
10 + * Unless required by applicable law or agreed to in writing, software
11 + * distributed under the License is distributed on an "AS IS" BASIS,
12 + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 + * See the License for the specific language governing permissions and
14 + * limitations under the License.
15 + */
16 +
17 +/*
18 + ONOS GUI -- Topology Force Module.
19 + Visualization of the topology in an SVG layer, using a D3 Force Layout.
20 + */
21 +
22 +(function () {
23 + 'use strict';
24 +
25 + angular.module('ovTopo2')
26 + .factory('Topo2CountryFilters', [
27 + function (_$log_, _wss_, _t2ds_) {
28 + return {
29 + s_america: function (c) {
30 + return c.properties.continent === 'South America';
31 + },
32 + ns_america: function (c) {
33 + return c.properties.custom === 'US-cont' ||
34 + c.properties.subregion === 'Central America' ||
35 + c.properties.continent === 'South America';
36 + },
37 + japan: function (c) {
38 + return c.properties.geounit === 'Japan';
39 + },
40 + europe: function (c) {
41 + return c.properties.continent === 'Europe';
42 + },
43 + italy: function (c) {
44 + return c.properties.geounit === 'Italy';
45 + },
46 + uk: function (c) {
47 + // technically, Ireland is not part of the United Kingdom,
48 + // but the map looks weird without it showing.
49 + return c.properties.adm0_a3 === 'GBR' ||
50 + c.properties.adm0_a3 === 'IRL';
51 + },
52 + s_korea: function (c) {
53 + return c.properties.adm0_a3 === 'KOR';
54 + },
55 + australia: function (c) {
56 + return c.properties.adm0_a3 === 'AUS';
57 + }
58 + };
59 + }
60 + ]);
61 +})();
1 +/*
2 + * Copyright 2016-present Open Networking Laboratory
3 + *
4 + * Licensed under the Apache License, Version 2.0 (the "License");
5 + * you may not use this file except in compliance with the License.
6 + * You may obtain a copy of the License at
7 + *
8 + * http://www.apache.org/licenses/LICENSE-2.0
9 + *
10 + * Unless required by applicable law or agreed to in writing, software
11 + * distributed under the License is distributed on an "AS IS" BASIS,
12 + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 + * See the License for the specific language governing permissions and
14 + * limitations under the License.
15 + */
16 +
17 +/*
18 + ONOS GUI -- Topology Force Module.
19 + Visualization of the topology in an SVG layer, using a D3 Force Layout.
20 + */
21 +
22 +(function () {
23 + 'use strict';
24 +
25 + // Injected
26 + var $log, wss, t2ds;
27 +
28 + // Constants
29 + var mapRequest = 'mapSelectorRequest';
30 +
31 + // State
32 + var order, maps, map, mapItems;
33 +
34 + var Dialog = function (options) {
35 +
36 + this.okHandlerCallback = options.okHandler;
37 + this.closeHandlerCallback = options.closeHandler;
38 +
39 + wss.bindHandlers({
40 + mapSelectorResponse: this.handleMapResponse.bind(this)
41 + });
42 + };
43 +
44 + Dialog.prototype = {
45 + handleMapResponse: function (data) {
46 + $log.info('Got response', data);
47 + order = data.order;
48 + maps = data.maps;
49 +
50 + t2ds.openDialog()
51 + .setTitle('Select Map')
52 + .addContent(this.render.bind(this)())
53 + .addOk(this.okHandler.bind(this), 'OK')
54 + .addCancel(this.closeHandler.bind(this), 'Close')
55 + .bindKeys();
56 + },
57 +
58 + open: function () {
59 + wss.sendEvent(mapRequest);
60 + },
61 + close: function () {
62 + wss.unbindHandlers({
63 + mapSelectorResponse: this.handleMapResponse.bind(this)
64 + });
65 + },
66 +
67 + selectedMap: function () {
68 + map = maps[this.options[this.selectedIndex].value];
69 + $log.info('Selected map', map);
70 + },
71 +
72 + okHandler: function () {
73 +
74 + var p = {
75 + mapid: map.id,
76 + mapscale: map.scale,
77 + mapfilepath: map.filePath,
78 + tint: 'off'
79 + // tint: tintCheck.property('checked') ? 'on' : 'off'
80 + };
81 +
82 + if (this.okHandlerCallback) {
83 + this.okHandlerCallback(p);
84 + }
85 +
86 + this.close();
87 + },
88 + closeHandler: function () {
89 +
90 + if (this.closeHandlerCallback) {
91 + this.closeHandlerCallback();
92 + }
93 +
94 + this.close();
95 + },
96 +
97 + render: function () {
98 +
99 + var content = t2ds.createDiv('map-list'),
100 + form = content.append('form'),
101 + current = this.currentMap();
102 +
103 + map = maps[current.mapid];
104 + mapItems = form.append('select').on('change', this.selectedMap);
105 +
106 + order.forEach(function (id) {
107 + var m = maps[id];
108 + mapItems.append('option')
109 + .attr('value', m.id)
110 + .attr('selected', m.id === current.mapid ? true : null)
111 + .text(m.description);
112 + });
113 +
114 + return content;
115 + }
116 + };
117 +
118 + angular.module('ovTopo2')
119 + .factory('Topo2MapDialog', [
120 + '$log', 'WebSocketService', 'Topo2DialogService',
121 + function (_$log_, _wss_, _t2ds_) {
122 +
123 + $log = _$log_;
124 + wss = _wss_;
125 + t2ds = _t2ds_;
126 +
127 + return Dialog;
128 + }
129 + ]);
130 +})();
...@@ -140,6 +140,8 @@ ...@@ -140,6 +140,8 @@
140 <script src="app/view/topo2/topo2Layout.js"></script> 140 <script src="app/view/topo2/topo2Layout.js"></script>
141 <script src="app/view/topo2/topo2Link.js"></script> 141 <script src="app/view/topo2/topo2Link.js"></script>
142 <script src="app/view/topo2/topo2Map.js"></script> 142 <script src="app/view/topo2/topo2Map.js"></script>
143 + <script src="app/view/topo2/topo2MapCountryFilters.js"></script>
144 + <script src="app/view/topo2/topo2MapDialog.js"></script>
143 <script src="app/view/topo2/topo2Model.js"></script> 145 <script src="app/view/topo2/topo2Model.js"></script>
144 <script src="app/view/topo2/topo2NodeModel.js"></script> 146 <script src="app/view/topo2/topo2NodeModel.js"></script>
145 <script src="app/view/topo2/topo2Prefs.js"></script> 147 <script src="app/view/topo2/topo2Prefs.js"></script>
......