From 902059bc467536ff11647af1cf2a61f776213841 Mon Sep 17 00:00:00 2001 From: Anton Tananaev Date: Mon, 2 Feb 2015 15:25:05 +1300 Subject: Add map to default layout --- web/Application.js | 28 ++++++++++++++++++++++++++++ web/DeviceView.js | 22 ++++++++++++++++++++++ web/Login.js | 49 +++++++++++++++++++++++++++++++++++++++++++++++++ web/MainView.js | 41 +++++++++++++++++++++++++++++++++++++++++ web/MapView.js | 47 +++++++++++++++++++++++++++++++++++++++++++++++ web/Strings.js | 29 +++++++++++++++++++++++++++++ web/Styles.js | 27 +++++++++++++++++++++++++++ web/app.js | 16 ---------------- web/index.html | 17 +++++++++++------ web/login.js | 0 10 files changed, 254 insertions(+), 22 deletions(-) create mode 100644 web/Application.js create mode 100644 web/DeviceView.js create mode 100644 web/Login.js create mode 100644 web/MainView.js create mode 100644 web/MapView.js create mode 100644 web/Strings.js create mode 100644 web/Styles.js delete mode 100644 web/app.js delete mode 100644 web/login.js diff --git a/web/Application.js b/web/Application.js new file mode 100644 index 000000000..12ece2e51 --- /dev/null +++ b/web/Application.js @@ -0,0 +1,28 @@ +/* + * Copyright 2015 Anton Tananaev (anton.tananaev@gmail.com) + * + * 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. + */ + +Ext.application({ + name: 'Traccar', + requires: [ + 'Login', + 'MainView' + ], + + launch: function() { + //Ext.create('Login').show(); + Ext.create('MainView', { renderTo: document.body }); + } +}); diff --git a/web/DeviceView.js b/web/DeviceView.js new file mode 100644 index 000000000..cf5502418 --- /dev/null +++ b/web/DeviceView.js @@ -0,0 +1,22 @@ +/* + * Copyright 2015 Anton Tananaev (anton.tananaev@gmail.com) + * + * 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. + */ + +Ext.define('DeviceView', { + extend: 'Ext.form.Panel', + xtype: 'device-view', + + title: strings.device_title +}); diff --git a/web/Login.js b/web/Login.js new file mode 100644 index 000000000..d06506480 --- /dev/null +++ b/web/Login.js @@ -0,0 +1,49 @@ +/* + * Copyright 2015 Anton Tananaev (anton.tananaev@gmail.com) + * + * 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. + */ + +Ext.define('LoginForm', { + extend: 'Ext.form.Panel', + xtype: 'login-form', + + defaultType: 'textfield', + bodyPadding: styles.panel_padding, + + defaults: { anchor: '100%' }, + + items: [{ + allowBlank: false, + fieldLabel: strings.login_user, + name: 'user' + }, { + allowBlank: false, + fieldLabel: strings.login_password, + name: 'password', + inputType: 'password' + }], + + buttons: [ + { text: strings.login_register }, + { text: strings.login_login } + ] +}); + +Ext.define('Login', { + extend: 'Ext.window.Window', + + title: strings.login_title, + + items: [{ xtype: 'login-form' }] +}); diff --git a/web/MainView.js b/web/MainView.js new file mode 100644 index 000000000..3aaeb1ef4 --- /dev/null +++ b/web/MainView.js @@ -0,0 +1,41 @@ +/* + * Copyright 2015 Anton Tananaev (anton.tananaev@gmail.com) + * + * 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. + */ + +Ext.define('MainView', { + extend: 'Ext.container.Viewport', + + requires: [ + 'DeviceView', + 'MapView' + ], + + layout: 'border', + + defaults: { + collapsible: true, + split: true + }, + + items: [{ + region:'west', + xtype: 'device-view', + width: styles.device_width + }, { + region: 'center', + xtype: 'map-view', + collapsible: false + }] +}); diff --git a/web/MapView.js b/web/MapView.js new file mode 100644 index 000000000..c248f02eb --- /dev/null +++ b/web/MapView.js @@ -0,0 +1,47 @@ +/* + * Copyright 2015 Anton Tananaev (anton.tananaev@gmail.com) + * + * 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. + */ + +Ext.define('MapView', { + extend: 'Ext.form.Panel', + xtype: 'map-view', + + title: strings.map_title, + layout: 'fit', + + listeners: { + afterrender: function() { + var osm = new ol.layer.Tile({ + source: new ol.source.OSM({}) + }); + + var view = new ol.View({ + center: ol.proj.transform(styles.map_center, 'EPSG:4326', 'EPSG:3857'), + zoom: styles.map_zoom, + maxZoom: styles.map_max_zoom + }); + + this.map = new ol.Map({ + target: this.body.dom.id, + layers: [ osm ], + view: view + }); + }, + + resize: function() { + this.map.updateSize(); + } + } +}); diff --git a/web/Strings.js b/web/Strings.js new file mode 100644 index 000000000..a08791973 --- /dev/null +++ b/web/Strings.js @@ -0,0 +1,29 @@ +/* + * Copyright 2015 Anton Tananaev (anton.tananaev@gmail.com) + * + * 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. + */ + +var strings = { + + login_title: 'Login', + login_user: 'User', + login_password: 'Password', + login_register: 'Register', + login_login: 'Login', + + device_title: 'Devices', + + map_title: 'Map' + +}; diff --git a/web/Styles.js b/web/Styles.js new file mode 100644 index 000000000..3feca2700 --- /dev/null +++ b/web/Styles.js @@ -0,0 +1,27 @@ +/* + * Copyright 2015 Anton Tananaev (anton.tananaev@gmail.com) + * + * 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. + */ + +var styles = { + + panel_padding: 10, + + device_width: 300, + + map_center: [ -0.1275, 51.507222 ], + map_zoom: 6, + map_max_zoom: 16 + +}; diff --git a/web/app.js b/web/app.js deleted file mode 100644 index a6084fbda..000000000 --- a/web/app.js +++ /dev/null @@ -1,16 +0,0 @@ -Ext.application({ - name : 'Traccar', - - launch : function() { - - Ext.create('Ext.Panel', { - renderTo : Ext.getBody(), - width : 200, - height : 150, - bodyPadding : 5, - title : 'Hello World', - html : 'Hello World...' - }); - - } -}); diff --git a/web/index.html b/web/index.html index b9a4f4e7e..2fa9304c5 100644 --- a/web/index.html +++ b/web/index.html @@ -1,11 +1,16 @@ -Traccar - - - - + Traccar + + + + + + + + - + + diff --git a/web/login.js b/web/login.js deleted file mode 100644 index e69de29bb..000000000 -- cgit v1.2.3