Commit 178b22a0 authored by pacome's avatar pacome

[client/timeserie] update style on map info

parent bf274e1a
import { DIV, SPAN } from 'sdi/components/elements';
import { DIV, SPAN, H3 } from 'sdi/components/elements';
import tr, { fromRecord } from 'sdi/locale';
import {
// getSelectedKind,
getCurrentFeature,
getSelectedStationList,
getSelectedKind,
} from 'timeserie/src/queries/timeserie';
// import { ParameterType } from 'timeserie/src/types';
import { Feature } from 'sdi/source';
import { getFeaturePropOption } from 'sdi/util';
import { Option } from 'fp-ts/lib/Option';
import { renderStation } from '../legend/table';
import { markdown } from 'sdi/ports/marked';
import { ParameterType } from 'timeserie/src/types';
// const renderId = () =>
// getSelectedId().map(id =>
......@@ -21,21 +26,41 @@ import { Option } from 'fp-ts/lib/Option';
// )
// );
// const kindLabel = (kind: ParameterType) => {
// switch (kind) {
// case 'ground-quantity':
// return tr.ts('legendGroundQuantity');
// case 'ground-quality':
// return tr.ts('legendGroundQuality');
// case 'surface':
// return tr.ts('legendSurface');
// }
// };
const kindLabel = (kind: ParameterType) => {
switch (kind) {
case 'ground-quantity':
return tr.ts('legendGroundQuantity');
case 'ground-quality':
return tr.ts('legendGroundQuality');
case 'surface':
return tr.ts('legendSurface');
}
};
const renderKind = () =>
H3(
{},
getSelectedKind().map((kind) => kindLabel(kind))
);
const renderStationList = () =>
DIV(
{ className: 'table-item-list' },
getSelectedStationList().map(renderStation)
);
const renderMultiselectHelp = () =>
DIV(
{ className: 'helptext' },
markdown(tr.ts('stationMultiselectHelptext'))
);
// const renderKind = () =>
// H3(
// const renderStations = () =>
// DIV(
// {},
// getSelectedKind().map((kind) => kindLabel(kind))
// // H3({}, tr.ts('perStation')),
// renderKind(),
// renderMultiselectHelp(),
// renderStationList()
// );
const renderName = (f: Feature) =>
......@@ -515,12 +540,12 @@ const renderSite = (f: Feature) => {
const render = () =>
DIV(
{ className: 'map-info' },
// H2({}, tr.ts('StationInfos')),
// renderKind(),
// renderId(),
renderKind(),
renderMultiselectHelp(),
renderStationList(),
getCurrentFeature().map((f) =>
DIV(
{},
{ className: 'map-info__items' },
renderCode(f),
renderGidSite(f),
renderBECode(f),
......
import { DIV, H3 } from 'sdi/components/elements';
import { DIV } from 'sdi/components/elements';
import map from '../map';
import legend from '../legend/map';
import plotLegend, { renderStation } from '../legend/plot';
import plotLegend from '../legend/plot';
import info from '../info';
import plot from '../plot';
import {
......@@ -17,12 +17,12 @@ import renderNoDataMessage from '../nodata-message';
import renderSelection from '../point-selector';
import {
getLevel,
getSelectedStationList,
getSelectedKind,
// getSelectedStationList,
// getSelectedKind,
} from 'timeserie/src/queries/timeserie';
import { markdown } from 'sdi/ports/marked';
import tr from 'sdi/locale';
import { ParameterType } from 'timeserie/src/types';
// import { markdown } from 'sdi/ports/marked';
// import tr from 'sdi/locale';
// import { ParameterType } from 'timeserie/src/types';
const renderActions = () =>
DIV(
......@@ -46,48 +46,48 @@ const renderContentSideFooter = () =>
renderButtonTableSmall()
);
const renderStationList = () =>
DIV(
{ className: 'table-item-list' },
getSelectedStationList().map(renderStation)
);
const renderMultiselectHelp = () =>
DIV(
{ className: 'helptext' },
markdown(tr.ts('stationMultiselectHelptext'))
);
// const renderStationList = () =>
// DIV(
// { className: 'table-item-list' },
// getSelectedStationList().map(renderStation)
// );
// const renderMultiselectHelp = () =>
// DIV(
// { className: 'helptext' },
// markdown(tr.ts('stationMultiselectHelptext'))
// );
const kindLabel = (kind: ParameterType) => {
switch (kind) {
case 'ground-quantity':
return tr.ts('legendGroundQuantity');
case 'ground-quality':
return tr.ts('legendGroundQuality');
case 'surface':
return tr.ts('legendSurface');
}
};
// const kindLabel = (kind: ParameterType) => {
// switch (kind) {
// case 'ground-quantity':
// return tr.ts('legendGroundQuantity');
// case 'ground-quality':
// return tr.ts('legendGroundQuality');
// case 'surface':
// return tr.ts('legendSurface');
// }
// };
const renderKind = () =>
H3(
{},
getSelectedKind().map((kind) => kindLabel(kind))
);
// const renderKind = () =>
// H3(
// {},
// getSelectedKind().map((kind) => kindLabel(kind))
// );
const renderStations = () =>
DIV(
{},
// H3({}, tr.ts('perStation')),
renderKind(),
renderMultiselectHelp(),
renderStationList()
);
// const renderStations = () =>
// DIV(
// {},
// // H3({}, tr.ts('perStation')),
// renderKind(),
// renderMultiselectHelp(),
// renderStationList()
// );
const renderSidebar = () =>
DIV(
{ className: 'content__side' },
legend(),
renderStations(),
// renderStations(),
info(),
plotLegend(),
renderContentSideFooter()
......
......@@ -78,10 +78,15 @@
overflow: auto;
.map-info {
overflow: auto;
overflow: hidden;
display: flex;
flex-direction: column;
// padding: @margin;
// background: @bgLightColor;
padding-left: 35px;
&__items {
padding-left: 35px;
overflow: auto;
}
}
&--footer {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment