-
Notifications
You must be signed in to change notification settings - Fork 145
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
For #85 - moved device icon selection to a separate dialog window
- Loading branch information
Showing
6 changed files
with
275 additions
and
33 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
186 changes: 186 additions & 0 deletions
186
src/main/java/org/traccar/web/client/view/DeviceMarkersDialog.java
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,186 @@ | ||
| /* | ||
| * Copyright 2015 Vitaly Litvak ([email protected]) | ||
| * | ||
| * 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. | ||
| */ | ||
| package org.traccar.web.client.view; | ||
|
|
||
| import com.google.gwt.core.client.GWT; | ||
| import com.google.gwt.resources.client.ClientBundle; | ||
| import com.google.gwt.resources.client.CssResource; | ||
| import com.google.gwt.safehtml.shared.SafeHtml; | ||
| import com.google.gwt.safehtml.shared.SafeHtmlBuilder; | ||
| import com.google.gwt.text.shared.AbstractSafeHtmlRenderer; | ||
| 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.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.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.event.SelectEvent; | ||
| import org.traccar.web.shared.model.Device; | ||
| import org.traccar.web.shared.model.DeviceIconType; | ||
| import org.traccar.web.shared.model.Position; | ||
|
|
||
| public class DeviceMarkersDialog { | ||
| private static DeviceMarkersDialogUiBinder uiBinder = GWT.create(DeviceMarkersDialogUiBinder.class); | ||
|
|
||
| interface DeviceMarkersDialogUiBinder extends UiBinder<Widget, DeviceMarkersDialog> { | ||
| } | ||
|
|
||
| interface Resources extends ClientBundle { | ||
| @ClientBundle.Source("PicturesListView.css") | ||
| Style css(); | ||
| } | ||
|
|
||
| interface Style extends CssResource { | ||
| String thumb(); | ||
|
|
||
| String thumbWrap(); | ||
|
|
||
| String over(); | ||
|
|
||
| String select(); | ||
| } | ||
|
|
||
| public interface DeviceMarkerHandler { | ||
| void onSave(DeviceIconType icon); | ||
| } | ||
|
|
||
| @UiField | ||
| Window window; | ||
|
|
||
| ListStore<Marker> store; | ||
|
|
||
| @UiField(provided = true) | ||
| ListView<Marker, Marker> view; | ||
|
|
||
| final DeviceMarkerHandler handler; | ||
|
|
||
| static abstract class Marker { | ||
| abstract String getKey(); | ||
| abstract String getURL(); | ||
| } | ||
|
|
||
| class BuiltInMarker extends Marker { | ||
| final DeviceIconType icon; | ||
|
|
||
| BuiltInMarker(DeviceIconType icon) { | ||
| this.icon = icon; | ||
| } | ||
|
|
||
| @Override | ||
| String getKey() { | ||
| return icon.name(); | ||
| } | ||
|
|
||
| @Override | ||
| String getURL() { | ||
| return icon.getPositionIconType(Position.Status.OFFLINE).getURL(false); | ||
| } | ||
| } | ||
|
|
||
| public DeviceMarkersDialog(DeviceIconType selectedIcon, DeviceMarkerHandler handler) { | ||
| this.handler = handler; | ||
|
|
||
| ModelKeyProvider<Marker> keyProvider = new ModelKeyProvider<Marker>() { | ||
| @Override | ||
| public String getKey(Marker item) { | ||
| return item.getKey(); | ||
| } | ||
| }; | ||
|
|
||
| Marker selectedMarker = null; | ||
| store = new ListStore<Marker>(keyProvider); | ||
| for (DeviceIconType icon : DeviceIconType.values()) { | ||
| Marker marker = new BuiltInMarker(icon); | ||
| store.add(marker); | ||
| if (selectedIcon == icon) { | ||
| selectedMarker = marker; | ||
| } | ||
| } | ||
|
|
||
| final Resources resources = GWT.create(Resources.class); | ||
| resources.css().ensureInjected(); | ||
|
|
||
| final Style style = resources.css(); | ||
|
|
||
| ListViewCustomAppearance<Marker> appearance = new ListViewCustomAppearance<Marker>("." + style.thumbWrap(), style.over(), style.select()) { | ||
| @Override | ||
| public void renderEnd(SafeHtmlBuilder builder) { | ||
| String markup = new StringBuilder("<div class=\"").append(CommonStyles.get().clear()).append("\"></div>").toString(); | ||
| builder.appendHtmlConstant(markup); | ||
| } | ||
|
|
||
| @Override | ||
| public void renderItem(SafeHtmlBuilder builder, SafeHtml content) { | ||
| builder.appendHtmlConstant("<div class='" + style.thumbWrap() + "' style='border: 1px solid white'>"); | ||
| builder.append(content); | ||
| builder.appendHtmlConstant("</div>"); | ||
| } | ||
| }; | ||
|
|
||
| view = new ListView<Marker, Marker>(store, new IdentityValueProvider<Marker>() { | ||
| @Override | ||
| public void setValue(Marker object, Marker value) { | ||
| } | ||
| }, appearance); | ||
|
|
||
| view.setCell(new SimpleSafeHtmlCell<Marker>(new AbstractSafeHtmlRenderer<Marker>() { | ||
| @Override | ||
| public SafeHtml render(Marker object) { | ||
| SafeHtmlBuilder builder = new SafeHtmlBuilder(); | ||
| return builder | ||
| .appendHtmlConstant("<div class=\"") | ||
| .appendHtmlConstant(style.thumb()) | ||
| .appendHtmlConstant("\" style=\"background: url(") | ||
| .appendHtmlConstant(object.getURL()) | ||
| .appendHtmlConstant(") no-repeat center center;\"></div>") | ||
| .toSafeHtml(); | ||
| } | ||
| })); | ||
|
|
||
| view.getSelectionModel().setSelectionMode(com.sencha.gxt.core.client.Style.SelectionMode.SINGLE); | ||
|
|
||
| uiBinder.createAndBindUi(this); | ||
|
|
||
| view.getSelectionModel().select(selectedMarker, false); | ||
| } | ||
|
|
||
| public void show() { | ||
| window.show(); | ||
| } | ||
|
|
||
| public void hide() { | ||
| window.hide(); | ||
| } | ||
|
|
||
| @UiHandler("saveButton") | ||
| public void onOKClicked(SelectEvent event) { | ||
| Marker selected = view.getSelectionModel().getSelectedItem(); | ||
| handler.onSave(selected == null ? null : ((BuiltInMarker) selected).icon); | ||
| hide(); | ||
| } | ||
|
|
||
| @UiHandler("cancelButton") | ||
| public void onCancelClicked(SelectEvent event) { | ||
| hide(); | ||
| } | ||
| } |
29 changes: 29 additions & 0 deletions
29
src/main/java/org/traccar/web/client/view/DeviceMarkersDialog.ui.xml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| <!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"> | ||
|
|
||
| <ui:with type="com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer.VerticalLayoutData" field="verticalLayoutData"> | ||
| <ui:attributes width="1" height="1" /> | ||
| </ui:with> | ||
|
|
||
| <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> | ||
|
|
||
| <gxt:button> | ||
| <button:TextButton ui:field="saveButton" text="OK" /> | ||
| </gxt:button> | ||
| <gxt:button> | ||
| <button:TextButton ui:field="cancelButton" text="{i18n.cancel}" /> | ||
| </gxt:button> | ||
| </gxt:Window> | ||
|
|
||
| </ui:UiBinder> |
30 changes: 30 additions & 0 deletions
30
src/main/resources/org/traccar/web/client/view/PicturesListView.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| .thumb { | ||
| padding: 3px; | ||
| height: 40px; | ||
| width: 70px; | ||
| } | ||
|
|
||
| .thumbWrap { | ||
| border: 1px solid white; | ||
| float: left; | ||
| display: block; | ||
| margin: 4px 0 4px 4px; | ||
| padding: 5px; | ||
| font: 11px Arial, Helvetica, sans-serif; | ||
| } | ||
|
|
||
| .over { | ||
| background: repeat-x scroll left top #EFEFEF; | ||
| border: 1px solid #ddd !important; | ||
| padding: 5px; | ||
| } | ||
|
|
||
| .select { | ||
| background: none repeat scroll 0 50% #DFE8F6; | ||
| border: 1px dotted #A3BAE9 !important; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .select .thumb { | ||
| background: none repeat scroll 0 0 transparent; | ||
| } |