aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--web/Application.js28
-rw-r--r--web/DeviceView.js22
-rw-r--r--web/Login.js49
-rw-r--r--web/MainView.js41
-rw-r--r--web/MapView.js47
-rw-r--r--web/Strings.js29
-rw-r--r--web/Styles.js27
-rw-r--r--web/app.js16
-rw-r--r--web/index.html17
-rw-r--r--web/login.js0
10 files changed, 254 insertions, 22 deletions
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 <b>World</b>...'
- });
-
- }
-});
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 @@
<!DOCTYPE html>
<html>
<head>
-<title>Traccar</title>
-<link rel="stylesheet" type="text/css" href="//cdn.sencha.com/ext/gpl/5.1.0/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
-<script type="text/javascript" src="//cdn.sencha.com/ext/gpl/5.1.0/build/ext-all.js"></script>
-<script type="text/javascript" src="//cdn.sencha.com/ext/gpl/5.1.0/build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script>
-<script type ="text/javascript" src="app.js"></script>
+ <title>Traccar</title>
+ <link rel="stylesheet" type="text/css" href="//cdn.sencha.com/ext/gpl/5.1.0/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
+ <link rel="stylesheet" type="text/css" href="//openlayers.org/en/v3.1.1/css/ol.css">
+ <script type="text/javascript" src="//cdn.sencha.com/ext/gpl/5.1.0/build/ext-all.js"></script>
+ <script type="text/javascript" src="//cdn.sencha.com/ext/gpl/5.1.0/build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script>
+ <script type="text/javascript" src="http://openlayers.org/en/v3.1.1/build/ol.js"></script>
+ <script type ="text/javascript" src="Strings.js"></script>
+ <script type ="text/javascript" src="Styles.js"></script>
+ <script type ="text/javascript" src="Application.js"></script>
</head>
-<body></body>
+<body>
+</body>
</html>
diff --git a/web/login.js b/web/login.js
deleted file mode 100644
index e69de29bb..000000000
--- a/web/login.js
+++ /dev/null