Commit 4eeab8d1 authored by pacome's avatar pacome

[client/timeserie] update style for prams picker

parent 941e63d1
import { DIV, H2 } from 'sdi/components/elements';
import { DIV, H3 } from 'sdi/components/elements';
import tr from 'sdi/locale';
import { nameToString } from 'sdi/components/button/names';
import { getLevel } from 'timeserie/src/queries/timeserie';
......@@ -17,7 +17,7 @@ const renderSurface = () =>
className: 'item-style',
style: {
color: '#6e8cff',
fontSize: '16pt',
fontSize: '12pt',
},
},
nameToString('dot-circle-o')
......@@ -33,7 +33,7 @@ const renderGroundQuality = () =>
className: 'item-style',
style: {
color: '#c68700',
fontSize: '16pt',
fontSize: '12pt',
},
},
nameToString('dot-circle-o')
......@@ -49,7 +49,7 @@ const renderGroundQuantity = () =>
className: 'item-style',
style: {
color: '#00729a',
fontSize: '16pt',
fontSize: '12pt',
},
},
nameToString('dot-circle-o')
......@@ -60,7 +60,7 @@ const renderGroundQuantity = () =>
const render = () =>
DIV(
{ className: 'map-legend' },
H2({}, tr.ts('legend')),
H3({}, tr.ts('legend')),
renderSurface(),
renderGroundQuality(),
renderGroundQuantity()
......
......@@ -35,33 +35,27 @@ import { markdown } from 'sdi/ports/marked';
const logger = debug('sdi:events/timeserie');
const renderParameterIsEmpty = (param: Parameter) =>
getTimeserieBetweenDates(param.id).map(dataElem => {
getTimeserieBetweenDates(param.id).map((dataElem) => {
if (dataElem.ts.length < 1) {
return DIV(
{},
"No data" //TODO translations
'No data' //TODO translations
);
} else {
return DIV({});
}
}
);
});
const renderStats = (param: Parameter) =>
getHighligthParameter().map(ps => {
getHighligthParameter().map((ps) => {
if (ps.id === param.id) {
return stats(param);
}
else {
} else {
return DIV({});
}
});
const renderNormItem = ({ name, value }: PlotNorm) =>
DIV(
{ className: 'legend-item__norms' },
......@@ -105,7 +99,7 @@ const renderLegendItem = (param: Parameter, i: number) => {
if (isHighlighted) {
return DIV(
{
className: 'legend-item highlighted',
className: 'plot-legend-item highlighted',
key: `rp - ${param.id} `,
onClick: () => clearHighligthParameter(),
},
......@@ -114,7 +108,7 @@ const renderLegendItem = (param: Parameter, i: number) => {
} else {
return DIV(
{
className: 'legend-item',
className: 'plot-legend-item',
key: `rp - ${param.id} `,
onClick: () => {
clearHighligthParameter();
......@@ -150,13 +144,10 @@ export const renderStation = (s: StationSelection, index: number) =>
{
key: `table - feature - ${index} `,
className: stationClassName(index),
onClick: () => setSelectedStationIndex(index)
onClick: () => setSelectedStationIndex(index),
},
// SPAN({ className: 'identifier' }, feature.id),
SPAN(
{ className: 'name' },
stationString(s),
)
SPAN({ className: 'name' }, stationString(s))
);
const renderStationList = () =>
......@@ -179,11 +170,7 @@ const renderStations = () =>
);
const render = () =>
DIV(
{ className: 'plot-legend' },
renderParamsLegend(),
renderStations(),
);
DIV({ className: 'plot-legend' }, renderParamsLegend(), renderStations());
logger('loaded');
......
......@@ -6,13 +6,15 @@ import {
getSelectedGroup,
getParameterFilteredList,
getSelectedParameterRaw,
getLevel
getLevel,
findParameter,
} from '../queries/timeserie';
import { Parameter, GroupData } from '../remote/timeserie';
import { ParameterType } from '../types';
import { ParameterType, ParameterSelection } from '../types';
import {
setSelectedGroup,
clearSelectedGroup
clearSelectedGroup,
deselectParameter,
} from '../events/timeserie';
import { renderDeselectButton } from './button';
import { fromPredicate } from 'fp-ts/lib/Option';
......@@ -21,21 +23,21 @@ import { configAddParameter, navigateInPlace } from '../events/route';
const logger = debug('sdi:param-picker');
const notSelectedGroup = fromPredicate<GroupData>(g =>
getSelectedGroup().fold(true, sg => sg.id !== g.id)
const notSelectedGroup = fromPredicate<GroupData>((g) =>
getSelectedGroup().fold(true, (sg) => sg.id !== g.id)
);
const renderGroupHeader = () =>
getSelectedGroup().map(group =>
getSelectedGroup().map((group) =>
DIV(
{
className: 'group__item group--selected'
className: 'group__item group--selected',
},
renderDeselectButton(clearSelectedGroup),
DIV(
{
id: `group-${group.id}`,
className: 'group__label'
className: 'group__label',
},
fromRecord(group.name)
)
......@@ -43,13 +45,13 @@ const renderGroupHeader = () =>
);
const renderGroup = (group: GroupData) =>
notSelectedGroup(group).map(group =>
notSelectedGroup(group).map((group) =>
LI(
{
className: 'group__item',
key: `group-${group.id}`,
id: `group-${group.id}`,
onClick: () => setSelectedGroup(group)
onClick: () => setSelectedGroup(group),
},
fromRecord(group.name)
)
......@@ -58,7 +60,7 @@ const renderGroup = (group: GroupData) =>
const renderGroupPicker = () =>
DIV(
{ className: 'picker-params' },
H2({}, tr.ts('groupPicker')),
H2({ className: 'subtitle' }, tr.ts('groupPicker')),
renderGroupHeader(),
UL(
{ className: 'group__list' },
......@@ -71,34 +73,57 @@ const renderParameter = (kind: ParameterType) => (param: Parameter) =>
{
className: 'parameter__item',
key: `rp-${kind}-${param.id}`,
onClick: () => configAddParameter(param.id).map(config => {
return getLevel().map(level => {
navigateInPlace(level, config);
})
})
onClick: () =>
configAddParameter(param.id).map((config) => {
return getLevel().map((level) => {
navigateInPlace(level, config);
});
}),
},
fromRecord(param.name)
);
const notSelectedParam = (
kind: ParameterType,
) => {
const notSelectedParam = (kind: ParameterType) => {
const selection = getSelectedParameterRaw();
return ((p: Parameter) =>
selection.findIndex(s => s.id === p.id && s.kind === kind) === -1);
return (p: Parameter) =>
selection.findIndex((s) => s.id === p.id && s.kind === kind) === -1;
};
const renderHelpText = () =>
DIV({ className: 'helptext' }, tr.ts('helptext:paramsPicker'));
const unselectButton = (kind: ParameterType, id: number) =>
renderDeselectButton(() => deselectParameter(kind, id));
const renderSelectedParam = ({ kind, id }: ParameterSelection) =>
DIV(
{ className: 'param--selected', key: `rp-${kind}-${id}` },
unselectButton(kind, id),
DIV(
{ className: 'param__label' },
findParameter(kind, id).map((p) => fromRecord(p.name))
)
);
const renderParamPicker = () =>
DIV(
{ className: 'picker-params' },
H2({}, tr.ts('paramPicker')),
H2({ className: 'subtitle' }, tr.ts('paramPicker')),
INPUT({ type: 'text', placeholder: tr.ts('filter') }), // FIX ME
UL(
{ className: 'parameter__list' },
getParameterFilteredList().map(({ kind, params }) =>
params.filter(notSelectedParam(kind)).map(renderParameter(kind))
)
),
DIV(
{ className: 'selected-params' },
H2({ className: 'subtitle' }, tr.ts('paramsToDisplay')),
// renderHelpText(),
DIV(
{ className: 'parameter__list' },
getSelectedParameterRaw().map(renderSelectedParam)
)
)
);
......
......@@ -9,45 +9,22 @@ import {
navigateTable,
getConfig,
} from 'timeserie/src/events/route';
import tr, { fromRecord } from 'sdi/locale';
import {
renderButtonTable,
renderButtonPlot,
renderDeselectButton,
renderBackHomeBtn,
} from '../button';
import { getLevel } from 'timeserie/src/queries/timeserie';
import {
getSelectedParameterRaw,
findParameter,
getLevel,
} from 'timeserie/src/queries/timeserie';
import { ParameterSelection, ParameterType } from 'timeserie/src/types';
import {
deselectParameter,
clearWindowStart,
clearWindowEnd,
clearHighligthParameter,
} from 'timeserie/src/events/timeserie';
const renderHelpText = () =>
DIV({ className: 'helptext' }, tr.ts('helptext:paramsPicker'));
const unselectButton = (kind: ParameterType, id: number) =>
renderDeselectButton(() => deselectParameter(kind, id));
const renderSelectedParam = ({ kind, id }: ParameterSelection) =>
DIV(
{ className: 'param--selected', key: `rp-${kind}-${id}` },
unselectButton(kind, id),
DIV(
{ className: 'param__label' },
findParameter(kind, id).map((p) => fromRecord(p.name))
)
);
import tr from 'sdi/locale';
const renderContentSideFooter = () =>
DIV(
{ className: 'content__side--footer' },
{ className: 'content__main--footer' },
renderButtonPlot(() => {
getLevel().map((l) => getConfig().map((c) => navigatePlot(l, c)));
clearWindowStart();
......@@ -60,21 +37,18 @@ const renderContentSideFooter = () =>
);
const renderSidebar = () =>
DIV(
{ className: 'content__side' },
legend(),
info(),
H2({}, tr.ts('paramsToDisplay')),
renderHelpText(),
getSelectedParameterRaw().map(renderSelectedParam),
renderContentSideFooter()
);
DIV({ className: 'content__side' }, legend(), info());
const renderMain = () =>
DIV(
{ className: 'content__main' },
DIV({ className: 'content__map' }, map(), renderBackHomeBtn()),
paramPicker()
DIV(
{ className: 'content__params' },
H2({ className: 'main-title' }, tr.ts('paramPickerMainTitle')),
paramPicker(),
renderContentSideFooter()
)
);
export const render = () =>
......
......@@ -46,17 +46,19 @@ const levelSwitch = () =>
const renderHelptextHome = () =>
DIV({ className: 'pitch' }, markdown(tr.ts('helptext:home')));
const render = () =>
const renderSidebar = () =>
DIV(
{ className: 'content content--index' },
DIV(
{ className: 'content__wrapper wrapper--left' },
renderWelcomeMessage(),
levelSwitch(),
renderHelptextHome(),
legend()
),
map()
{ className: 'content__side' },
renderWelcomeMessage(),
levelSwitch(),
renderHelptextHome(),
// H2({}, tr.ts('legend')),
legend()
);
const renderMain = () => DIV({ className: 'content__main' }, map());
const render = () =>
DIV({ className: 'content content--index' }, renderSidebar(), renderMain());
export default render;
......@@ -284,17 +284,22 @@ const messages = {
},
paramsToDisplay: {
fr: `Paramètres à visualiser`,
fr: `Paramètres sélectionnés`,
nl: '', // nltodo
},
groupPicker: {
fr: `Choix d'un groupe de paramètres`,
fr: `Filtrer par groupe physico-chimique`,
nl: '', // nltodo
},
paramPickerMainTitle: {
fr: `Sélection des paramètres à visualiser`,
nl: '', // nltodo
},
paramPicker: {
fr: `Sélection du paramètre`,
fr: `Sélection des paramètres`,
nl: '', // nltodo
},
......
......@@ -22,10 +22,8 @@
}
}
// from client/view : should be refactored (compose/view/geothermie/ts) in CS-style
.legend-item {
margin-bottom: @margin;
.plot-legend-item {
margin-bottom: @margin / 2;
padding: @margin / 2;
cursor: default;
transition: all 300ms;
......@@ -39,7 +37,7 @@
}
}
&__title {
.legend-item__title {
width: 100%;
display: flex;
align-items: baseline;
......@@ -69,7 +67,7 @@
}
}
&__stat {
.legend-item__stat {
display: flex;
flex-wrap: wrap;
......@@ -96,7 +94,7 @@
}
}
&__norms {
.legend-item__norms {
margin-left: calc(~'@{margin} + 10px');
// margin-left: 32px;
font-size: 0.7rem;
......
.map-info {
background-color: @bgLightColor;
padding: @margin / 2;
padding-top: 0px;
h2 {
padding-bottom: @margin;
padding-top: @margin / 2;
position: sticky;
top: 0;
background-color: @bgLightColor;
}
// background-color: @bgLightColor;
// padding: @margin / 2;
// padding-top: 0px;
// h2 {
// padding-bottom: @margin;
// padding-top: @margin / 2;
// position: sticky;
// top: 0;
// background-color: @bgLightColor;
// }
}
.station-info-item {
......
.content__params {
height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
padding: @margin;
background-color: @bgLightColor;
.content__main--footer {
margin-top: @margin;
display: flex;
justify-content: flex-end;
}
h2.main-title {
border-bottom: @borderDark;
margin-bottom: @margin;
}
}
.pickers__wrapper {
display: flex;
height: 100%;
overflow: hidden;
> div {
flex: 1;
......@@ -17,11 +38,12 @@
input {
margin-bottom: @margin;
font-size: 0.8rem;
}
.parameter__list {
}
.parameter__item {
.selected-params {
border-top: @borderDark;
padding-top: @margin;
}
}
......@@ -37,10 +59,10 @@
}
}
&__label {
padding: 0.5rem;
padding: 0.3rem;
font-size: 0.8rem;
text-transform: uppercase;
background-color: @bgLightColor;
// text-transform: uppercase;
// background-color: @bgLightColor;
}
}
......@@ -52,13 +74,13 @@ ul {
overflow-y: auto;
li {
padding: 0.5rem;
padding: 0.3rem 0;
font-size: 0.8rem;
text-transform: uppercase;
background-color: @bgLightColor;
// text-transform: uppercase;
// background-color: @bgLightColor;
cursor: default;
margin-bottom: @margin / 3;
margin-right: @margin / 3;
// margin-bottom: @margin / 2;
// margin-right: @margin / 3;
width: fit-content;
&:hover {
color: @activeColor;
......
......@@ -4,6 +4,26 @@
.timeserie-inner {
h2 {
padding-bottom: @margin;
&.subtitle {
color: @inactiveColor;
font-size: 1.2rem;
}
}
.legend-item {
display: flex;
margin-bottom: @margin;
.item-style {
.awsomefont();
.legendItemPosition();
justify-content: center;
flex-shrink: 0;
margin-right: @margin / 2;
}
.item-label {
font-size: 0.8rem;
}
}
}
......@@ -13,6 +33,7 @@
overflow: hidden;
.content__main {
position: relative;
height: 100%;
width: 100%;
display: flex;
......@@ -62,14 +83,6 @@
}
}
}
// .content__body {
// position: relative;
// width: 100%;
// height: 100%;
// overflow: hidden;
// }
}
@actionFooterH: 40px;
......
//index page
.content--index {
flex-direction: initial;
.content__wrapper {
flex-direction: column;
width: @panel-rightW;
padding-right: @margin;
flex-shrink: 0;
&.wrapper--left {
> div {
width: 100%;
}
h1 {
font-size: 250%;
margin-bottom: @margin;
}
.switch {
width: 100%;
margin: @margin 0;
height: 2.5em;
border-radius: 2.5em;
display: flex;
justify-content: space-between;
align-items: center;
background-color: @bgLightColor;
border: 2px solid @greyMedium;
cursor: default;
box-sizing: border-box;
.label {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
height: calc(~'2.5em - 4px');
font-weight: @fwSemiBold;
color: @inactiveColor;
border-radius: 2.5em;
border: 2px solid transparent;
box-sizing: border-box;
&.active {
color: @bodyBgColor;
background-color: @activeColor;
border: 2px solid @bgLightColor;
}
h1 {
font-size: 250%;
margin-bottom: @margin;
}
&.inactive:hover {
color: @activeColor;
}
.switch {
width: 100%;
margin: @margin 0;
height: 2.5em;
border-radius: 2.5em;
display: flex;
justify-content: space-between;
align-items: center;
background-color: @bgLightColor;
border: 2px solid @greyMedium;
cursor: default;
box-sizing: border-box;
// &.ground {
// margin-left: -2px;
// }
// &.surface {