diff --git a/www-client/src/main/java/fr/agrometinfo/www/client/presenter/LayoutPresenter.java b/www-client/src/main/java/fr/agrometinfo/www/client/presenter/LayoutPresenter.java
index d01795f48933c7d2391329d472d992cffbb05615..e395b31494020dd97678d33bccfd16bfddf7e04d 100644
--- a/www-client/src/main/java/fr/agrometinfo/www/client/presenter/LayoutPresenter.java
+++ b/www-client/src/main/java/fr/agrometinfo/www/client/presenter/LayoutPresenter.java
@@ -118,7 +118,7 @@ public final class LayoutPresenter implements Presenter {
}
final String regionName = regions.getOrDefault(choice.getFeatureId(), CSTS.metropolitanFrance());
mapPresenter.loadValues(choice, chosenIndicator, periodName, regionName);
- rightPanelPresenter.loadValues(choice);
+ rightPanelPresenter.loadValues(choice, periodName);
}
/**
diff --git a/www-client/src/main/java/fr/agrometinfo/www/client/presenter/RightPanelPresenter.java b/www-client/src/main/java/fr/agrometinfo/www/client/presenter/RightPanelPresenter.java
index ebc372ae6358ac0264575460fded235e08962b26..385f1a1ec04137b9a1843c27420f401a8dffd10a 100644
--- a/www-client/src/main/java/fr/agrometinfo/www/client/presenter/RightPanelPresenter.java
+++ b/www-client/src/main/java/fr/agrometinfo/www/client/presenter/RightPanelPresenter.java
@@ -37,6 +37,11 @@ public final class RightPanelPresenter implements FeatureSelectHandler, Presente
*/
boolean isVisible();
+ /**
+ * @param periodName name of chosen period
+ */
+ void setPeriodName(String periodName);
+
/**
* Display summary data.
*
@@ -70,14 +75,22 @@ public final class RightPanelPresenter implements FeatureSelectHandler, Presente
*/
private DominoElement<HTMLElement> container;
+ /**
+ * Name of chosen period.
+ */
+ private String periodName;
+
/**
* Load indicator values on the panel.
*
- * @param c user choice for the indicator values
+ * @param c user choice for the indicator values
+ * @param pName name of chosen period
*/
- public void loadValues(final ChoiceDTO c) {
+ public void loadValues(final ChoiceDTO c, final String pName) {
GWT.log("RightPanelPresenter.loadValues() " + c);
currentChoice = c;
+ periodName = pName;
+ view.setPeriodName(pName);
IndicatorServiceFactory.INSTANCE
.getSummary(c.getIndicator(), c.getPeriod(), c.getLevel(), c.getFeatureId(), c.getYear()) //
.onSuccess(view::setSummary)//
@@ -101,7 +114,7 @@ public final class RightPanelPresenter implements FeatureSelectHandler, Presente
choice.setFeatureId(event.getId());
choice.setLevel(event.getLevel());
choice.setYear(currentChoice.getYear());
- loadValues(choice);
+ loadValues(choice, periodName);
view.show();
}
diff --git a/www-client/src/main/java/fr/agrometinfo/www/client/ui/CardDetails.java b/www-client/src/main/java/fr/agrometinfo/www/client/ui/CardDetails.java
new file mode 100644
index 0000000000000000000000000000000000000000..158102fdfc5e17de26cfa411aaa481ef0f32f5ba
--- /dev/null
+++ b/www-client/src/main/java/fr/agrometinfo/www/client/ui/CardDetails.java
@@ -0,0 +1,114 @@
+package fr.agrometinfo.www.client.ui;
+
+import org.dominokit.domino.ui.icons.Icons;
+import org.dominokit.domino.ui.utils.BaseDominoElement;
+import org.dominokit.domino.ui.utils.DominoElement;
+import org.jboss.elemento.Elements;
+
+import elemental2.dom.HTMLDivElement;
+import elemental2.dom.HTMLElement;
+
+/**
+ * A component provides a content container.
+ *
+ * @author Olivier Maury
+ */
+public class CardDetails extends BaseDominoElement<HTMLElement, CardDetails> {
+ /**
+ * Creates new card instance.
+ *
+ * @return new instance with no title and no body
+ */
+ public static CardDetails create() {
+ return new CardDetails();
+ }
+
+ /**
+ * Container for the main text.
+ */
+ private final DominoElement<HTMLDivElement> body = DominoElement.div();
+
+ /**
+ * Root element.
+ */
+ private final DominoElement<HTMLElement> root = DominoElement.of(//
+ Elements.createElement("details", HTMLElement.class));
+
+ /**
+ * Container for the subtitle.
+ */
+ private final DominoElement<HTMLDivElement> subTitle = DominoElement.div().css("subtitle").hide();
+
+ /**
+ * Container for the title, in bold.
+ */
+ private final DominoElement<HTMLDivElement> title = DominoElement.div().css("title");
+
+ /**
+ * Container for the associated value.
+ */
+ private final DominoElement<HTMLDivElement> value = DominoElement.div().css("value");
+
+ /**
+ * Constructor.
+ */
+ public CardDetails() {
+ final HTMLElement sum = Elements.createElement("summary", HTMLElement.class);
+ sum.append(Elements.span().addAll(title, subTitle, value).element());
+ sum.append(Icons.MDI_ICONS.information_outline_mdi().element());
+ root.add(sum);
+ root.add(body);
+ root.css("card-details");
+ }
+
+ @Override
+ public final HTMLElement element() {
+ return root.element();
+ }
+
+ /**
+ * Sets the body of the card.
+ *
+ * @param bodyText the body of the card
+ * @return same instance
+ */
+ public CardDetails setBody(final String bodyText) {
+ body.textContent(bodyText);
+ return this;
+ }
+
+ /**
+ * Sets the subtitle of the card.
+ *
+ * @param subTitleText the subtitle of the header
+ * @return same instance
+ */
+ public CardDetails setSubTitle(final String subTitleText) {
+ subTitle.textContent(subTitleText);
+ subTitle.toggleDisplay(subTitleText != null && !subTitleText.isEmpty());
+ return this;
+ }
+
+ /**
+ * Sets the title of the card.
+ *
+ * @param titleText the title of the header
+ * @return same instance
+ */
+ public CardDetails setTitle(final String titleText) {
+ title.textContent(titleText);
+ return this;
+ }
+
+ /**
+ * Sets the value of the card.
+ *
+ * @param valueText the value of the header
+ * @return same instance
+ */
+ public CardDetails setValue(final String valueText) {
+ value.textContent(valueText);
+ return this;
+ }
+
+}
diff --git a/www-client/src/main/java/fr/agrometinfo/www/client/view/RightPanelView.java b/www-client/src/main/java/fr/agrometinfo/www/client/view/RightPanelView.java
index b582ae4b0bf566d1e6e1b3f151365de0c867255e..05550f6a87fb43b781eec0c3ff0db6578c5ebf81 100644
--- a/www-client/src/main/java/fr/agrometinfo/www/client/view/RightPanelView.java
+++ b/www-client/src/main/java/fr/agrometinfo/www/client/view/RightPanelView.java
@@ -9,13 +9,10 @@ import java.util.List;
import java.util.Map;
import org.dominokit.domino.ui.button.Button;
-import org.dominokit.domino.ui.cards.Card;
import org.dominokit.domino.ui.grid.Column;
import org.dominokit.domino.ui.grid.Row;
import org.dominokit.domino.ui.icons.Icons;
-import org.dominokit.domino.ui.notifications.Notification;
import org.dominokit.domino.ui.utils.DominoElement;
-import org.dominokit.domino.ui.utils.TextNode;
import org.jboss.elemento.Elements;
import org.jboss.elemento.EventType;
import org.jboss.elemento.HtmlContentBuilder;
@@ -56,6 +53,7 @@ import fr.agrometinfo.www.client.event.FeatureSelectEvent;
import fr.agrometinfo.www.client.i18n.AppConstants;
import fr.agrometinfo.www.client.i18n.AppMessages;
import fr.agrometinfo.www.client.presenter.RightPanelPresenter;
+import fr.agrometinfo.www.client.ui.CardDetails;
import fr.agrometinfo.www.client.util.ApplicationUtils;
import fr.agrometinfo.www.client.util.DateUtils;
import fr.agrometinfo.www.shared.dto.IndicatorDTO;
@@ -145,7 +143,7 @@ public final class RightPanelView implements RightPanelPresenter.View {
/**
* Card for the daily average value for the user choice.
*/
- private final Card averageCard = Card.create();
+ private final CardDetails averageCard = CardDetails.create();
/**
* Back link.
@@ -165,7 +163,7 @@ public final class RightPanelView implements RightPanelPresenter.View {
/**
* Card for the daily comparison value for the user choice.
*/
- private final Card comparisonCard = Card.create();
+ private final CardDetails comparisonCard = CardDetails.create();
/**
* Container for the panel.
@@ -196,6 +194,11 @@ public final class RightPanelView implements RightPanelPresenter.View {
* Values according to user's choice.
*/
private SummaryDTO summary;
+ /**
+ * Name of chosen period.
+ */
+ private String periodName;
+
/**
* Constructor.
*
@@ -288,6 +291,23 @@ public final class RightPanelView implements RightPanelPresenter.View {
lineChartContainer.appendChild((Node) chart.getChartElement().as());
}
+ private String getDescription(final boolean comparison) {
+ final IndicatorDTO indicator = summary.getIndicator();
+ String region = summary.getFeatureName();
+ if (region == null) {
+ region = CSTS.metropolitanFrance();
+ }
+ String message;
+ if (comparison) {
+ message = MSGS.comparedValue(indicator.getDescription(), summary.getPeriod(), region,
+ summary.getChoice().getYear());
+ } else {
+ message = MSGS.averageValue(indicator.getDescription(), summary.getPeriod(), region,
+ summary.getChoice().getYear());
+ }
+ return message;
+ }
+
@Override
public void hide() {
layoutView.hideRightPanel();
@@ -307,9 +327,7 @@ public final class RightPanelView implements RightPanelPresenter.View {
container.add(header);
- averageCard.addHeaderAction(Icons.ACTION_ICONS.info_outline(), e -> this.showDescription(false));
- comparisonCard.addHeaderAction(Icons.ACTION_ICONS.info_outline(), e -> this.showDescription(true));
- comparisonCard.setDescription(CSTS.comparisonPeriod());
+ comparisonCard.setTitle(CSTS.comparisonPeriod());
container.add(Row.create() //
.addColumn(Column.span6().add(averageCard)) //
@@ -323,6 +341,11 @@ public final class RightPanelView implements RightPanelPresenter.View {
return layoutView.isRightPanelVisible();
}
+ @Override
+ public void setPeriodName(final String name) {
+ periodName = name;
+ }
+
@Override
public void setPresenter(final RightPanelPresenter p) {
presenter = p;
@@ -373,7 +396,7 @@ public final class RightPanelView implements RightPanelPresenter.View {
final NumberFormat nf = NumberFormat.getFormat("0.#");
final DateTimeFormat df = DateTimeFormat.getFormat(PredefinedFormat.DATE_MEDIUM);
header.element().innerHTML = "";
- header.add(title);
+ header.add(title + ", " + periodName);
header.add(Elements.br());
header.add(Elements.small(df.format(data.getDate())));
@@ -381,14 +404,14 @@ public final class RightPanelView implements RightPanelPresenter.View {
// Average
averageCard.setTitle(indicator.getDescription());
- averageCard.getBody().clearElement();
- averageCard.getBody().appendChild(TextNode.of(nf.format(data.getAverageValue()) + " " + indicator.getUnit()));
+ averageCard.setValue(nf.format(data.getAverageValue()) + " " + indicator.getUnit());
+ averageCard.setBody(getDescription(false));
// Comparison
comparisonCard.setTitle(CSTS.normalComparison());
- comparisonCard.getBody().clearElement();
- comparisonCard.getBody()
- .appendChild(TextNode.of(nf.format(data.getComparedValue()) + " " + indicator.getUnit()));
+ comparisonCard.setSubTitle(CSTS.comparisonPeriod());
+ comparisonCard.setValue(nf.format(data.getComparedValue()) + " " + indicator.getUnit());
+ comparisonCard.setBody(getDescription(true));
// Chart
createBarChart(data.getMonthlyValues());
@@ -400,21 +423,4 @@ public final class RightPanelView implements RightPanelPresenter.View {
layoutView.showRightPanel();
}
- private void showDescription(final boolean comparison) {
- final IndicatorDTO indicator = summary.getIndicator();
- String region = summary.getFeatureName();
- if (region == null) {
- region = CSTS.metropolitanFrance();
- }
- String message;
- if (comparison) {
- message = MSGS.comparedValue(indicator.getDescription(), summary.getPeriod(), region,
- summary.getChoice().getYear());
- } else {
- message = MSGS.averageValue(indicator.getDescription(), summary.getPeriod(), region,
- summary.getChoice().getYear());
- }
- Notification.create(message).show();
- }
-
}
diff --git a/www-client/src/main/resources/fr/agrometinfo/www/client/public/style.css b/www-client/src/main/resources/fr/agrometinfo/www/client/public/style.css
index 5e9dc11e4bad0e110921ee7cd186c2b58f8db766..5d83a5e317ccef9fdf656fe5d389311d926a2a3d 100644
--- a/www-client/src/main/resources/fr/agrometinfo/www/client/public/style.css
+++ b/www-client/src/main/resources/fr/agrometinfo/www/client/public/style.css
@@ -119,6 +119,47 @@ select {
.comparison-btn {
min-width: 10em;
}
+
+/* card-details */
+
+details.card-details {
+ background: #fff;
+ border-radius: 5px;
+ box-shadow: 0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);
+ margin-bottom: 10px;
+}
+
+details.card-details > div,
+details.card-details > summary {
+ padding: 10px 15px;
+}
+
+details.card-details > summary {
+ color: #30353b;
+ list-style: none;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+details.card-details > summary::-webkit-details-marker {
+ display: none;
+}
+details.card-details > summary i {
+ background-size: cover;
+ cursor: pointer;
+ transition: 0.2s;
+}
+details.card-details > summary div.title {
+ font-weight: bold;
+}
+details.card-details[open] > summary {
+ border-bottom: 1px solid rgba(204,204,204,0.35);
+}
+details.card-details[open] > summary i {
+ transform: rotate(180deg);
+}
+
+
.float-right {
float: right;
}