홍길동 / 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 @@
(function () {
'use strict';
var $log, $loc, wss, ps, ms, t2ds, sus;
// Injected Services
var $loc, ps, ms, sus, countryFilters;
// internal state
var mapG, order, maps, map, mapItems, tintCheck, messageHandlers;
// constants
var mapRequest = 'mapSelectorRequest';
var countryFilters = {
s_america: function (c) {
return c.properties.continent === 'South America';
},
ns_america: function (c) {
return c.properties.custom === 'US-cont' ||
c.properties.subregion === 'Central America' ||
c.properties.continent === 'South America';
},
japan: function (c) {
return c.properties.geounit === 'Japan';
},
europe: function (c) {
return c.properties.continent === 'Europe';
},
italy: function (c) {
return c.properties.geounit === 'Italy';
},
uk: function (c) {
// technically, Ireland is not part of the United Kingdom,
// but the map looks weird without it showing.
return c.properties.adm0_a3 === 'GBR' ||
c.properties.adm0_a3 === 'IRL';
},
s_korea: function (c) {
return c.properties.adm0_a3 === 'KOR';
},
// Injected Classes
var MapSelectionDialog;
australia: function (c) {
return c.properties.adm0_a3 === 'AUS';
}
};
// internal state
var mapG;
function init(zoomLayer) {
start();
return setUpMap(zoomLayer);
}
......@@ -80,7 +40,7 @@
mapId = prefs.mapid,
mapFilePath = prefs.mapfilepath,
mapScale = prefs.mapscale,
tint = prefs.tint,
loadMap = ms.loadMapInto,
promise, cfilter;
mapG = d3.select('#topo-map');
......@@ -93,36 +53,20 @@
});
}
cfilter = countryFilters[mapId] || countryFilters.uk;
if (mapFilePath === '*countries') {
cfilter = countryFilters[mapId] || countryFilters.uk;
loadMap = ms.loadMapRegionInto
}
promise = ms.loadMapRegionInto(mapG, {
countryFilter: cfilter,
adjustScale: mapScale,
shading: ''
});
} else {
promise = ms.loadMapInto(mapG, mapFilePath, mapId, {
promise = loadMap(mapG, mapFilePath, mapId, {
countryFilters: cfilter,
adjustScale: mapScale,
shading: ''
});
}
return promise;
}
function start() {
wss.bindHandlers(messageHandlers);
}
function stop() {
wss.unbindHandlers(messageHandlers);
}
function currentMap() {
return ps.getPrefs(
'topo_mapid',
......@@ -136,10 +80,6 @@
);
}
function openMapSelection() {
wss.sendEvent(mapRequest);
}
function opacifyMap(b) {
mapG.transition()
.duration(1000)
......@@ -152,56 +92,6 @@
opacifyMap(true);
}
function dOk() {
var p = {
mapid: map.id,
mapscale: map.scale,
mapfilepath: map.filePath,
tint: 'off'
// tint: tintCheck.property('checked') ? 'on' : 'off'
};
setMap(p);
$log.debug('Dialog OK button clicked');
}
function dClose() {
$log.debug('Dialog Close button clicked (or Esc pressed)');
}
function selectMap() {
map = maps[this.options[this.selectedIndex].value];
$log.info('Selected map', map);
}
function createListContent() {
var content = t2ds.createDiv('map-list'),
form = content.append('form'),
current = currentMap();
map = maps[current.mapid];
mapItems = form.append('select').on('change', selectMap);
order.forEach(function (id) {
var m = maps[id];
mapItems.append('option')
.attr('value', m.id)
.attr('selected', m.id === current.mapid ? true : null)
.text(m.description);
});
return content;
}
function handleMapResponse(data) {
$log.info('Got response', data);
order = data.order;
maps = data.maps;
t2ds.openDialog()
.setTitle('Select Map')
.addContent(createListContent())
.addOk(dOk, 'OK')
.addCancel(dClose, 'Close')
.bindKeys();
}
// TODO: -- START -- Move to dedicated module
var prefsState = {};
......@@ -211,8 +101,7 @@
}
function _togSvgLayer(x, G, tag, what) {
var on = (x === 'keyev') ? !sus.visible(G) : !!x,
verb = on ? 'Show' : 'Hide';
var on = (x === 'keyev') ? !sus.visible(G) : Boolean(x);
sus.visible(G, on);
updatePrefsState(tag, on);
// flash.flash(verb + ' ' + what);
......@@ -223,29 +112,35 @@
_togSvgLayer(x, mapG, 'bg', 'background map');
}
function openMapSelection() {
// TODO: Create a view class with extend method
MapSelectionDialog.prototype.currentMap = currentMap;
new MapSelectionDialog({
okHandler: function (preferences) {
setMap(preferences);
}
}).open();
}
angular.module('ovTopo2')
.factory('Topo2MapService',
['$log', '$location', 'WebSocketService', 'PrefsService', 'MapService',
'SvgUtilService', 'Topo2DialogService',
function (_$log_, _$loc_, _wss_, _ps_, _ms_, _sus_, _t2ds_) {
['$location', 'PrefsService', 'MapService',
'SvgUtilService', 'Topo2CountryFilters', 'Topo2MapDialog',
function (_$loc_, _ps_, _ms_, _sus_, _t2cf_, _t2md_) {
$log = _$log_;
$loc = _$loc_;
wss = _wss_;
ps = _ps_;
ms = _ms_;
sus = _sus_;
t2ds = _t2ds_;
messageHandlers = {
mapSelectorResponse: handleMapResponse
};
countryFilters = _t2cf_;
MapSelectionDialog = _t2md_;
return {
init: init,
openMapSelection: openMapSelection,
toggle: toggle,
stop: stop
toggle: toggle
};
}
]);
......
/*
* Copyright 2016-present Open Networking Laboratory
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/*
ONOS GUI -- Topology Force Module.
Visualization of the topology in an SVG layer, using a D3 Force Layout.
*/
(function () {
'use strict';
angular.module('ovTopo2')
.factory('Topo2CountryFilters', [
function (_$log_, _wss_, _t2ds_) {
return {
s_america: function (c) {
return c.properties.continent === 'South America';
},
ns_america: function (c) {
return c.properties.custom === 'US-cont' ||
c.properties.subregion === 'Central America' ||
c.properties.continent === 'South America';
},
japan: function (c) {
return c.properties.geounit === 'Japan';
},
europe: function (c) {
return c.properties.continent === 'Europe';
},
italy: function (c) {
return c.properties.geounit === 'Italy';
},
uk: function (c) {
// technically, Ireland is not part of the United Kingdom,
// but the map looks weird without it showing.
return c.properties.adm0_a3 === 'GBR' ||
c.properties.adm0_a3 === 'IRL';
},
s_korea: function (c) {
return c.properties.adm0_a3 === 'KOR';
},
australia: function (c) {
return c.properties.adm0_a3 === 'AUS';
}
};
}
]);
})();
/*
* Copyright 2016-present Open Networking Laboratory
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/*
ONOS GUI -- Topology Force Module.
Visualization of the topology in an SVG layer, using a D3 Force Layout.
*/
(function () {
'use strict';
// Injected
var $log, wss, t2ds;
// Constants
var mapRequest = 'mapSelectorRequest';
// State
var order, maps, map, mapItems;
var Dialog = function (options) {
this.okHandlerCallback = options.okHandler;
this.closeHandlerCallback = options.closeHandler;
wss.bindHandlers({
mapSelectorResponse: this.handleMapResponse.bind(this)
});
};
Dialog.prototype = {
handleMapResponse: function (data) {
$log.info('Got response', data);
order = data.order;
maps = data.maps;
t2ds.openDialog()
.setTitle('Select Map')
.addContent(this.render.bind(this)())
.addOk(this.okHandler.bind(this), 'OK')
.addCancel(this.closeHandler.bind(this), 'Close')
.bindKeys();
},
open: function () {
wss.sendEvent(mapRequest);
},
close: function () {
wss.unbindHandlers({
mapSelectorResponse: this.handleMapResponse.bind(this)
});
},
selectedMap: function () {
map = maps[this.options[this.selectedIndex].value];
$log.info('Selected map', map);
},
okHandler: function () {
var p = {
mapid: map.id,
mapscale: map.scale,
mapfilepath: map.filePath,
tint: 'off'
// tint: tintCheck.property('checked') ? 'on' : 'off'
};
if (this.okHandlerCallback) {
this.okHandlerCallback(p);
}
this.close();
},
closeHandler: function () {
if (this.closeHandlerCallback) {
this.closeHandlerCallback();
}
this.close();
},
render: function () {
var content = t2ds.createDiv('map-list'),
form = content.append('form'),
current = this.currentMap();
map = maps[current.mapid];
mapItems = form.append('select').on('change', this.selectedMap);
order.forEach(function (id) {
var m = maps[id];
mapItems.append('option')
.attr('value', m.id)
.attr('selected', m.id === current.mapid ? true : null)
.text(m.description);
});
return content;
}
};
angular.module('ovTopo2')
.factory('Topo2MapDialog', [
'$log', 'WebSocketService', 'Topo2DialogService',
function (_$log_, _wss_, _t2ds_) {
$log = _$log_;
wss = _wss_;
t2ds = _t2ds_;
return Dialog;
}
]);
})();
......@@ -140,6 +140,8 @@
<script src="app/view/topo2/topo2Layout.js"></script>
<script src="app/view/topo2/topo2Link.js"></script>
<script src="app/view/topo2/topo2Map.js"></script>
<script src="app/view/topo2/topo2MapCountryFilters.js"></script>
<script src="app/view/topo2/topo2MapDialog.js"></script>
<script src="app/view/topo2/topo2Model.js"></script>
<script src="app/view/topo2/topo2NodeModel.js"></script>
<script src="app/view/topo2/topo2Prefs.js"></script>
......