Fixed the broken Charts in the LeaderboardPanel

- moved the stylesheets for the CollapsablePanel to a new common .css file
This commit is contained in:
fmittag committed 2012-02-15 22:08:22 +01:00
1 parent 5e523ad07f
commit c0b15afbea
9 files changed
+187 -115

No files matched your search

@@ -12,6 +12,7 @@
<!-- -->
<!-- Consider inlining CSS to reduce the number of requested files -->
<!-- -->
<link href="CommonControls.css" rel="stylesheet" type="text/css">
<!-- -->
<!-- Any title is fine -->
@@ -0,0 +1,85 @@
.collapsablePanel {
background: #b6b6b6;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
overflow: hidden;
border: 1px solid #aaaaaa;
margin: 0 0 15px 0;
}
.collapsablePanel-content {
background: #fff;
margin: 12px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width: auto !important;
border: 1px solid #aaaaaa;
}
.collapsablePanel-header {
background: url(images/titlebar-background.png) 0 0 repeat-x;
padding: 0;
margin: 0;
height: 42px;
position: relative;
-webkit-border-top-left-radius: 4px;
-moz-border-top-left-radius: 4px;
border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
-moz-border-top-right-radius: 4px;
border-top-right-radius: 4px;
}
.collapsablePanel:last-child {
margin-bottom: 0;
}
.collapsablePanel-open {
}
.collapsablePanel-closed {
}
.collapsablePanel-header-text{
font-family: 'UbuntuBold', Arial, Verdana, sans-serif;
text-transform: uppercase;
margin: 15px 0 0 13px;
float: left;
}
.collapsablePanel-header-image{
float:left;
margin: 13px 0 0 0;
}
.collapsablePanel-header-collapse{
height:100%;
display: block;
padding: 0 0 0 10px;
color: #3b3b3b;
}
.collapsablePanel-header-collapse:hover {
color: #3b3b3b;
}
.collapsablePanel-toolbar {
position: absolute;
top: 0;
right: 0;
height: 43px;
width: 43px;
overflow: hidden;
}
.collapsablePanel-toolbar table {
border-collapse: collapse;
}
.collapsablePanel-toolbar a {
display: block;
padding: 9px;
}
@@ -9,6 +9,7 @@
<meta content='black' name='apple-mobile-web-app-status-bar-style'>
<!-- <link href='iphone-splash-screen.png' rel='apple-touch-startup-image'> -->
<link href='images/sap-sailing-app-icon.png' rel='apple-touch-icon'>
<link href="CommonControls.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="highcharts/js/highcharts.js"></script>
-86
View File
@@ -183,92 +183,6 @@ input.magnifier {
width: 100%;
}
.collapsablePanel {
background: #b6b6b6;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
overflow: hidden;
border: 1px solid #aaaaaa;
margin: 0 0 15px 0;
}
.collapsablePanel-content {
background: #fff;
margin: 12px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width: auto !important;
border: 1px solid #aaaaaa;
}
.collapsablePanel-header {
background: url(images/titlebar-background.png) 0 0 repeat-x;
padding: 0;
margin: 0;
height: 42px;
position: relative;
-webkit-border-top-left-radius: 4px;
-moz-border-top-left-radius: 4px;
border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
-moz-border-top-right-radius: 4px;
border-top-right-radius: 4px;
}
.collapsablePanel:last-child {
margin-bottom: 0;
}
.collapsablePanel-open {
}
.collapsablePanel-closed {
}
.collapsablePanel-header-text{
font-family: 'UbuntuBold', Arial, Verdana, sans-serif;
text-transform: uppercase;
margin: 15px 0 0 13px;
float: left;
}
.collapsablePanel-header-image{
float:left;
margin: 13px 0 0 0;
}
.collapsablePanel-header-collapse{
height:100%;
display: block;
padding: 0 0 0 10px;
color: #3b3b3b;
}
.collapsablePanel-header-collapse:hover {
color: #3b3b3b;
}
.collapsablePanel-toolbar {
position: absolute;
top: 0;
right: 0;
height: 43px;
width: 43px;
overflow: hidden;
}
.collapsablePanel-toolbar table {
border-collapse: collapse;
}
.collapsablePanel-toolbar a {
display: block;
padding: 9px;
}
.raceBoardNavigation {
float: right;
margin: 26px 0 0 0;
@@ -9,6 +9,7 @@
<meta content='black' name='apple-mobile-web-app-status-bar-style'>
<!-- <link href='iphone-splash-screen.png' rel='apple-touch-startup-image'> -->
<link href='images/sap-sailing-app-icon.png' rel='apple-touch-icon'>
<link href="CommonControls.css" rel="stylesheet" type="text/css">
<!--<link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700,300italic,400italic,500italic,700italic' rel='stylesheet' type='text/css'>-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
@@ -20,6 +20,7 @@ bin.includes = META-INF/,\
crossdomain.xml,\
images/,\
reset.css,\
CommonControls.css,\
RaceBoard.css,\
RaceBoard.html,\
Spectator.html,\
@@ -111,7 +111,13 @@ implements CompetitorSelectionChangeListener, RaceSelectionChangeListener, TimeL
// chartAndBusyIndicatorPanel.add(chart);
// chartAndBusyIndicatorPanel.showWidget(0);
loadData();
List<RaceIdentifier> selectedRaces = raceSelectionProvider.getSelectedRaces();
if(!selectedRaces.isEmpty()) {
loadData();
}
}
protected void selectRace(final RaceIdentifier selectedRace) {
}
private Chart createChart(DetailType dataToShow) {
@@ -434,10 +440,10 @@ implements CompetitorSelectionChangeListener, RaceSelectionChangeListener, TimeL
if (dataToShow != this.dataToShow) {
this.dataToShow = dataToShow;
chart = createChart(dataToShow);
if (chartAndBusyIndicatorPanel.getWidgetCount() > 1) {
chartAndBusyIndicatorPanel.remove(1);
}
chartAndBusyIndicatorPanel.add(chart);
// if (chartAndBusyIndicatorPanel.getWidgetCount() > 1) {
// chartAndBusyIndicatorPanel.remove(1);
// }
this.setWidget(chart);
}
}
@@ -451,10 +457,9 @@ implements CompetitorSelectionChangeListener, RaceSelectionChangeListener, TimeL
@Override
public void onRaceSelectionChange(List<RaceIdentifier> selectedRaces) {
chart.removeAllSeries();
seriesByCompetitor.clear();
markPassingSeriesByCompetitor.clear();
loadData();
setCompetitorsAndTimePointsDTO(null);
clearChart(true);
loadData();
}
/**
@@ -1,5 +1,6 @@
package com.sap.sailing.gwt.ui.leaderboard;
import java.util.Collections;
import java.util.List;
import com.google.gwt.dom.client.EventTarget;
@@ -12,8 +13,13 @@ import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Anchor;
import com.google.gwt.user.client.ui.DialogBox;
import com.google.gwt.user.client.ui.FlexTable;
import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.HasHorizontalAlignment;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Panel;
import com.google.gwt.user.client.ui.RadioButton;
import com.google.gwt.user.client.ui.Widget;
import com.sap.sailing.domain.common.RaceIdentifier;
import com.sap.sailing.gwt.ui.client.CompetitorSelectionProvider;
import com.sap.sailing.gwt.ui.client.ErrorReporter;
@@ -24,6 +30,8 @@ import com.sap.sailing.gwt.ui.client.StringMessages;
import com.sap.sailing.gwt.ui.client.Timer;
import com.sap.sailing.gwt.ui.leaderboard.AbstractChartPanel.DataLoadedEvent;
import com.sap.sailing.gwt.ui.leaderboard.AbstractChartPanel.DataLoadedHandler;
import com.sap.sailing.gwt.ui.shared.components.CollapsablePanel;
import com.sap.sailing.gwt.ui.shared.components.ComponentToolbar;
/**
* A dialog box that holds a {@link MultiChartPanel} and manages a {@link RaceSelectionProvider} of its own.
@@ -34,16 +42,23 @@ import com.sap.sailing.gwt.ui.leaderboard.AbstractChartPanel.DataLoadedHandler;
public class CompareCompetitorsChartDialog extends DialogBox {
private Anchor closeAnchor;
private final RaceSelectionProvider raceSelectionProvider;
private final MultiChartPanel multiChartPanel;
private final CollapsablePanel collapsablePanel;
public CompareCompetitorsChartDialog(SailingServiceAsync sailingService,
List<RaceIdentifier> races, final CompetitorSelectionProvider competitorSelectionProvider, Timer timer,
StringMessages stringConstants, ErrorReporter errorReporter) {
super(false);
RaceSelectionProvider raceSelectionProvider = new RaceSelectionModel();
raceSelectionProvider = new RaceSelectionModel();
raceSelectionProvider.setAllRaces(races);
final MultiChartPanel ccp = new MultiChartPanel(sailingService, competitorSelectionProvider, raceSelectionProvider,
multiChartPanel = new MultiChartPanel(sailingService, competitorSelectionProvider, raceSelectionProvider,
timer, stringConstants, errorReporter);
ccp.setSize((Window.getClientWidth() - 350) + "px", (Window.getClientHeight() - 170) + "px");
ccp.addDataLoadedHandler(new DataLoadedHandler() {
multiChartPanel.setSize((Window.getClientWidth() - 350) + "px", (Window.getClientHeight() - 170) + "px");
multiChartPanel.addDataLoadedHandler(new DataLoadedHandler() {
@Override
public void onDataLoaded(DataLoadedEvent event) {
CompareCompetitorsChartDialog.this.setPopupPosition(5, 5);
@@ -51,8 +66,25 @@ public class CompareCompetitorsChartDialog extends DialogBox {
CompareCompetitorsChartDialog.this.show();
}
});
this.add(ccp);
this.setPopupPosition(5, 5);
FlowPanel contentPanel = new FlowPanel();
collapsablePanel = new CollapsablePanel("", true);
collapsablePanel.setSize("100%", "100%");
collapsablePanel.setOpen(true);
ComponentToolbar<MultiChartSettings> toolbar = new ComponentToolbar<MultiChartSettings>(multiChartPanel, stringConstants);
toolbar.addSettingsButton();
collapsablePanel.setHeaderToolbar(toolbar);
collapsablePanel.setContent(contentPanel);
Widget componentEntryWidget = multiChartPanel.getEntryWidget();
createRaceChooserPanel(contentPanel);
contentPanel.add(componentEntryWidget);
this.add(collapsablePanel);
this.setPopupPosition(15, 15);
//this.setSize((int) (Window.getClientWidth()*0.9) + "px", (int) (Window.getClientHeight() * 0.9) + "px");
closeAnchor = new Anchor("x");
@@ -79,15 +111,48 @@ public class CompareCompetitorsChartDialog extends DialogBox {
closeAnchor.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
competitorSelectionProvider.removeCompetitorSelectionChangeListener(ccp);
competitorSelectionProvider.removeCompetitorSelectionChangeListener(multiChartPanel);
hide();
}
});
Window.addResizeHandler(new ResizeHandler() {
@Override
public void onResize(ResizeEvent event) {
ccp.setSize((Window.getClientWidth() - 250) + "px", (Window.getClientHeight() - 90) + "px");
multiChartPanel.setSize((Window.getClientWidth() - 250) + "px", (Window.getClientHeight() - 90) + "px");
}
});
}
private void createRaceChooserPanel(Panel parentPanel) {
HorizontalPanel raceChooserPanel = new HorizontalPanel();
raceChooserPanel.setSpacing(5);
boolean first = true;
for (final RaceIdentifier selectedRace : raceSelectionProvider.getAllRaces()) {
RadioButton raceSelectionRadioButton = new RadioButton("chooseRace");
raceSelectionRadioButton.setText(selectedRace.toString());
raceChooserPanel.add(raceSelectionRadioButton);
if (first) {
raceSelectionRadioButton.setValue(true);
selectRace(selectedRace);
first = false;
}
raceSelectionRadioButton.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
selectRace(selectedRace);
}
});
}
parentPanel.add(raceChooserPanel);
}
private void selectRace(final RaceIdentifier selectedRace) {
if(selectedRace != null)
collapsablePanel.getHeaderTextAccessor().setText(selectedRace.getRaceName());
else
collapsablePanel.getHeaderTextAccessor().setText("");
raceSelectionProvider.setSelection(Collections.singletonList(selectedRace));
}
}
@@ -16,7 +16,6 @@ import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.FormPanel;
import com.google.gwt.user.client.ui.Panel;
import com.google.gwt.user.client.ui.Widget;
import com.sap.sailing.domain.common.DetailType;
import com.sap.sailing.domain.common.RaceIdentifier;
import com.sap.sailing.domain.common.WindSource;
import com.sap.sailing.domain.common.impl.Util.Pair;
@@ -36,11 +35,11 @@ import com.sap.sailing.gwt.ui.client.Timer;
import com.sap.sailing.gwt.ui.client.Timer.PlayModes;
import com.sap.sailing.gwt.ui.client.URLFactory;
import com.sap.sailing.gwt.ui.client.UserAgentChecker.UserAgentTypes;
import com.sap.sailing.gwt.ui.leaderboard.ChartPanel;
import com.sap.sailing.gwt.ui.leaderboard.ChartSettings;
import com.sap.sailing.gwt.ui.leaderboard.LeaderboardPanel;
import com.sap.sailing.gwt.ui.leaderboard.LeaderboardSettings;
import com.sap.sailing.gwt.ui.leaderboard.LeaderboardSettingsFactory;
import com.sap.sailing.gwt.ui.leaderboard.MultiChartPanel;
import com.sap.sailing.gwt.ui.leaderboard.MultiChartSettings;
import com.sap.sailing.gwt.ui.shared.EventDTO;
import com.sap.sailing.gwt.ui.shared.RaceDTO;
import com.sap.sailing.gwt.ui.shared.RaceTimesInfoDTO;
@@ -156,17 +155,17 @@ public class RaceBoardPanel extends FormPanel implements EventDisplayer, RaceSel
collapsableViewers.add(windChartViewer);
}
if(showCompetitorCharts) {
ChartPanel competitorCharts = new ChartPanel(sailingService, competitorSelectionModel, raceSelectionProvider,
timer, DetailType.WINDWARD_DISTANCE_TO_OVERALL_LEADER, stringMessages, errorReporter);
CollapsableComponentViewer<ChartSettings> chartViewer = new CollapsableComponentViewer<ChartSettings>(
competitorCharts, "auto", "500px", stringMessages);
// DON'T DELETE -> this is temporary for testing of different chart types
// MultiChartPanel competitorCharts = new MultiChartPanel(sailingService, competitorSelectionModel, raceSelectionProvider,
// timer, stringMessages, errorReporter);
// CollapsableComponentViewer<MultiChartSettings> chartViewer = new CollapsableComponentViewer<MultiChartSettings>(
// DON'T DELETE -> this is temporary for testing of different chart types
// ChartPanel competitorCharts = new ChartPanel(sailingService, competitorSelectionModel, raceSelectionProvider,
// timer, DetailType.WINDWARD_DISTANCE_TO_OVERALL_LEADER, stringMessages, errorReporter);
// CollapsableComponentViewer<ChartSettings> chartViewer = new CollapsableComponentViewer<ChartSettings>(
// competitorCharts, "auto", "500px", stringMessages);
MultiChartPanel competitorCharts = new MultiChartPanel(sailingService, competitorSelectionModel, raceSelectionProvider,
timer, stringMessages, errorReporter);
CollapsableComponentViewer<MultiChartSettings> chartViewer = new CollapsableComponentViewer<MultiChartSettings>(
competitorCharts, "auto", "500px", stringMessages);
competitorCharts.onRaceSelectionChange(raceSelectionProvider.getSelectedRaces());
collapsableViewers.add(chartViewer);
}