Fixed the broken Charts in the LeaderboardPanel

- moved the stylesheets for the CollapsablePanel to a new common .css file

java/com.sap.sailing.gwt.ui/AdminConsole.html

@@ -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                         -->

java/com.sap.sailing.gwt.ui/CommonControls.css

@@ -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;
+	
+}

java/com.sap.sailing.gwt.ui/Leaderboard.html

@@ -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>

java/com.sap.sailing.gwt.ui/RaceBoard.css

@@ -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;

java/com.sap.sailing.gwt.ui/RaceBoard.html

@@ -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>

java/com.sap.sailing.gwt.ui/build.properties

@@ -20,6 +20,7 @@ bin.includes = META-INF/,\
                crossdomain.xml,\
                images/,\
                reset.css,\
+               CommonControls.css,\
                RaceBoard.css,\
                RaceBoard.html,\
                Spectator.html,\

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/leaderboard/AbstractChartPanel.java

@@ -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) {
+//            if (chartAndBusyIndicatorPanel.getWidgetCount() > 1) {
-                chartAndBusyIndicatorPanel.remove(1);
+//                chartAndBusyIndicatorPanel.remove(1);
-            }
+//            }
-            chartAndBusyIndicatorPanel.add(chart);
+            this.setWidget(chart);
         }
     }
 
@@ -451,10 +457,9 @@ implements CompetitorSelectionChangeListener, RaceSelectionChangeListener, TimeL
 
     @Override
     public void onRaceSelectionChange(List<RaceIdentifier> selectedRaces) {
-        chart.removeAllSeries();
+      setCompetitorsAndTimePointsDTO(null);
-        seriesByCompetitor.clear();
+      clearChart(true);
-        markPassingSeriesByCompetitor.clear();
+      loadData();
-        loadData();
     }
 
     /**

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/leaderboard/CompareCompetitorsChartDialog.java

@@ -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");
+        multiChartPanel.setSize((Window.getClientWidth() - 350) + "px", (Window.getClientHeight() - 170) + "px");
-        ccp.addDataLoadedHandler(new DataLoadedHandler() {
+        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));
+    }
+
 }

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/raceboard/RaceBoardPanel.java

@@ -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,
+            // DON'T DELETE -> this is temporary for testing of different chart types
-                    timer, DetailType.WINDWARD_DISTANCE_TO_OVERALL_LEADER, stringMessages, errorReporter);
+//            ChartPanel competitorCharts = new ChartPanel(sailingService, competitorSelectionModel, raceSelectionProvider,
-            CollapsableComponentViewer<ChartSettings> chartViewer = new CollapsableComponentViewer<ChartSettings>(
+//                    timer, DetailType.WINDWARD_DISTANCE_TO_OVERALL_LEADER, stringMessages, errorReporter);
-                    competitorCharts, "auto", "500px", stringMessages);
+//            CollapsableComponentViewer<ChartSettings> chartViewer = new CollapsableComponentViewer<ChartSettings>(
-
-             // 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>(
 //                    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);
         }