Add map to default layout

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