For #85 - added all icon types view

vitalidze · May 21, 2015 · 4d4cad9 · 4d4cad9
1 parent 92519bd
commit 4d4cad9
Show file tree

Hide file tree

Showing 5 changed files with 126 additions and 15 deletions.
diff --git a/src/main/java/org/traccar/web/client/i18n/Messages.java b/src/main/java/org/traccar/web/client/i18n/Messages.java
@@ -309,4 +309,10 @@ String defaultNotificationTemplate(@Select DeviceEventType type,
     String noMarkers();
 
     String select();
+
+    String defaultIcon();
+
+    String selectedIcon();
+
+    String offlineIcon();
 }
diff --git a/src/main/java/org/traccar/web/client/view/DeviceMarkersDialog.java b/src/main/java/org/traccar/web/client/view/DeviceMarkersDialog.java
@@ -16,6 +16,8 @@
 package org.traccar.web.client.view;
 
 import com.google.gwt.core.client.GWT;
+import com.google.gwt.event.logical.shared.SelectionEvent;
+import com.google.gwt.event.logical.shared.SelectionHandler;
 import com.google.gwt.resources.client.ClientBundle;
 import com.google.gwt.resources.client.CssResource;
 import com.google.gwt.safehtml.shared.SafeHtml;
@@ -24,18 +26,20 @@
 import com.google.gwt.uibinder.client.UiBinder;
 import com.google.gwt.uibinder.client.UiField;
 import com.google.gwt.uibinder.client.UiHandler;
+import com.google.gwt.user.client.ui.Image;
 import com.google.gwt.user.client.ui.Widget;
 import com.sencha.gxt.cell.core.client.SimpleSafeHtmlCell;
 import com.sencha.gxt.core.client.IdentityValueProvider;
-import com.sencha.gxt.core.client.Style;
 import com.sencha.gxt.core.client.resources.CommonStyles;
+import com.sencha.gxt.core.client.util.Margins;
 import com.sencha.gxt.data.shared.ListStore;
 import com.sencha.gxt.data.shared.ModelKeyProvider;
 import com.sencha.gxt.theme.base.client.listview.ListViewCustomAppearance;
 import com.sencha.gxt.widget.core.client.ListView;
 import com.sencha.gxt.widget.core.client.Window;
+import com.sencha.gxt.widget.core.client.container.BorderLayoutContainer;
+import com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer;
 import com.sencha.gxt.widget.core.client.event.SelectEvent;
-import org.traccar.web.shared.model.Device;
 import org.traccar.web.shared.model.DeviceIconType;
 import org.traccar.web.shared.model.Position;
 
@@ -72,11 +76,31 @@ public interface DeviceMarkerHandler {
     @UiField(provided = true)
     ListView<Marker, Marker> view;
 
+    @UiField(provided = true)
+    BorderLayoutContainer.BorderLayoutData centerData;
+
+    @UiField(provided = true)
+    BorderLayoutContainer.BorderLayoutData eastData;
+
+    @UiField
+    VerticalLayoutContainer panelImages;
+
+    @UiField
+    Image defaultImage;
+
+    @UiField
+    Image selectedImage;
+
+    @UiField
+    Image offlineImage;
+
     final DeviceMarkerHandler handler;
 
     static abstract class Marker {
         abstract String getKey();
-        abstract String getURL();
+        abstract String getDefaultURL();
+        abstract String getSelectedURL();
+        abstract String getOfflineURL();
     }
 
     class BuiltInMarker extends Marker {
@@ -92,9 +116,19 @@ String getKey() {
         }
 
         @Override
-        String getURL() {
+        String getOfflineURL() {
             return icon.getPositionIconType(Position.Status.OFFLINE).getURL(false);
         }
+
+        @Override
+        String getDefaultURL() {
+            return icon.getPositionIconType(Position.Status.LATEST).getURL(false);
+        }
+
+        @Override
+        String getSelectedURL() {
+            return icon.getPositionIconType(Position.Status.LATEST).getURL(true);
+        }
     }
 
     public DeviceMarkersDialog(DeviceIconType selectedIcon, DeviceMarkerHandler handler) {
@@ -151,17 +185,32 @@ public SafeHtml render(Marker object) {
                         .appendHtmlConstant("<div class=\"")
                         .appendHtmlConstant(style.thumb())
                         .appendHtmlConstant("\" style=\"background: url(")
-                        .appendHtmlConstant(object.getURL())
+                        .appendHtmlConstant(object.getOfflineURL())
                         .appendHtmlConstant(") no-repeat center center;\"></div>")
                         .toSafeHtml();
             }
         }));
 
         view.getSelectionModel().setSelectionMode(com.sencha.gxt.core.client.Style.SelectionMode.SINGLE);
+        view.getSelectionModel().addSelectionHandler(new SelectionHandler<Marker>() {
+            @Override
+            public void onSelection(SelectionEvent<Marker> event) {
+                updateImages();
+            }
+        });
+
+        eastData = new BorderLayoutContainer.BorderLayoutData(85);
+        eastData.setSplit(true);
+        eastData.setMargins(new Margins(5, 0, 0, 0));
+
+        centerData = new BorderLayoutContainer.BorderLayoutData();
+        centerData.setMargins(new Margins(0, 5, 0, 0));
 
         uiBinder.createAndBindUi(this);
 
         view.getSelectionModel().select(selectedMarker, false);
+
+        updateImages();
     }
 
     public void show() {
@@ -183,4 +232,18 @@ public void onOKClicked(SelectEvent event) {
     public void onCancelClicked(SelectEvent event) {
         hide();
     }
+
+    private void updateImages() {
+        Marker marker = view.getSelectionModel().getSelectedItem();
+        if (marker == null) {
+            defaultImage.setUrl("");
+            selectedImage.setUrl("");
+            offlineImage.setUrl("");
+        } else {
+            defaultImage.setUrl(marker.getDefaultURL());
+            selectedImage.setUrl(marker.getSelectedURL());
+            offlineImage.setUrl(marker.getOfflineURL());
+        }
+        panelImages.forceLayout();
+    }
 }
diff --git a/src/main/java/org/traccar/web/client/view/DeviceMarkersDialog.ui.xml b/src/main/java/org/traccar/web/client/view/DeviceMarkersDialog.ui.xml
@@ -1,22 +1,56 @@
 <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
 <ui:UiBinder
-    xmlns:ui="urn:ui:com.google.gwt.uibinder"
-    xmlns:gxt="urn:import:com.sencha.gxt.widget.core.client"
-  	xmlns:container="urn:import:com.sencha.gxt.widget.core.client.container"
-  	xmlns:button="urn:import:com.sencha.gxt.widget.core.client.button">
+        xmlns:g="urn:import:com.google.gwt.user.client.ui"
+        xmlns:ui="urn:ui:com.google.gwt.uibinder"
+        xmlns:gxt="urn:import:com.sencha.gxt.widget.core.client"
+        xmlns:container="urn:import:com.sencha.gxt.widget.core.client.container"
+        xmlns:button="urn:import:com.sencha.gxt.widget.core.client.button" xmlns:field="http://www.w3.org/1999/html">
 
   <ui:with type="com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer.VerticalLayoutData" field="verticalLayoutData">
-    <ui:attributes width="1" height="1" />
+    <ui:attributes width="1" height="-1" />
   </ui:with>
 
+  <ui:with type="com.sencha.gxt.core.client.util.Margins" field="imageMargins">
+    <ui:attributes top="5" right="0" bottom="5" left="0" />
+  </ui:with>
+
+  <ui:with type="com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer.VerticalLayoutData" field="imageLayoutData">
+    <ui:attributes width="-1" height="-1" margins="{imageMargins}" />
+  </ui:with>
+
+  <ui:with type="com.sencha.gxt.widget.core.client.container.BorderLayoutContainer.BorderLayoutData" field="centerData" />
+  <ui:with type="com.sencha.gxt.widget.core.client.container.BorderLayoutContainer.BorderLayoutData" field="eastData" />
+
   <ui:with field='i18n' type='org.traccar.web.client.i18n.Messages' />
 
   <gxt:Window ui:field="window" pixelSize="386, 280" modal="true" headingText="{i18n.markers}" focusWidget="{saveButton}">
-    <container:VerticalLayoutContainer>
-      <container:child layoutData="{verticalLayoutData}">
-          <gxt:ListView ui:field="view"/>
-      </container:child>
-    </container:VerticalLayoutContainer>
+    <container:BorderLayoutContainer ui:field="con" borders="true">
+      <container:center layoutData="{centerData}">
+        <gxt:ListView ui:field="view"/>
+      </container:center>
+      <container:east layoutData="{eastData}">
+        <container:VerticalLayoutContainer ui:field="panelImages">
+            <container:child layoutData="{verticalLayoutData}">
+                <g:Label text="{i18n.defaultIcon}" />
+            </container:child>
+            <container:child layoutData="{imageLayoutData}">
+                <g:Image ui:field="defaultImage" />
+            </container:child>
+            <container:child layoutData="{verticalLayoutData}">
+                <g:Label text="{i18n.selectedIcon}" />
+            </container:child>
+            <container:child layoutData="{imageLayoutData}">
+                <g:Image ui:field="selectedImage" />
+            </container:child>
+            <container:child layoutData="{verticalLayoutData}">
+                <g:Label text="{i18n.offlineIcon}"/>
+            </container:child>
+            <container:child layoutData="{imageLayoutData}">
+                <g:Image ui:field="offlineImage" />
+            </container:child>
+        </container:VerticalLayoutContainer>
+      </container:east>
+    </container:BorderLayoutContainer>
 
     <gxt:button>
       <button:TextButton ui:field="saveButton" text="OK" />

diff --git a/src/main/resources/org/traccar/web/client/i18n/Messages.properties b/src/main/resources/org/traccar/web/client/i18n/Messages.properties
@@ -52,6 +52,10 @@ uniqueIdentifier = Unique Identifier
 deviceTimeout = Timeout
 idleWhenSpeedIsLE = Idle when speed is <=
 select = Select
+# device markers dialog
+defaultIcon = Default
+selectedIcon = Selected
+offlineIcon = Offline
 # device view
 objects = Objects
 devices = Devices

diff --git a/src/main/resources/org/traccar/web/client/i18n/Messages_ru.properties b/src/main/resources/org/traccar/web/client/i18n/Messages_ru.properties
@@ -52,6 +52,10 @@ uniqueIdentifier = Уникальный Код
 deviceTimeout = Таймаут
 idleWhenSpeedIsLE = Стоит если скорость <=
 select = Выбрать
+# device markers dialog
+defaultIcon = По умолчанию
+selectedIcon = Выбран
+offlineIcon = Не в сети
 # device view
 objects = Объекты
 devices = Устройства