ublo-lib 1.26.8 → 1.26.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/es/lbm/components/lumiplan/api.js +6 -0
  2. package/es/lbm/components/lumiplan/domain.module.css +63 -0
  3. package/es/lbm/components/lumiplan/header.js +39 -0
  4. package/es/lbm/components/lumiplan/header.module.css +19 -0
  5. package/es/lbm/components/lumiplan/i18n/fr.json +7 -0
  6. package/es/lbm/components/lumiplan/lumiplan.js +41 -1
  7. package/es/lbm/components/lumiplan/lumiplan.module.css +11 -3
  8. package/es/lbm/components/lumiplan/opening.js +29 -12
  9. package/es/lbm/components/lumiplan/opening.module.css +65 -0
  10. package/es/lbm/components/lumiplan/pois.js +3 -0
  11. package/es/lbm/components/lumiplan/pois.module.css +32 -0
  12. package/es/lbm/components/lumiplan/print-button.js +29 -0
  13. package/es/lbm/components/lumiplan/print-button.module.css +28 -0
  14. package/es/lbm/components/lumiplan/road-condition.module.css +16 -0
  15. package/es/lbm/components/lumiplan/signature.js +24 -0
  16. package/es/lbm/components/lumiplan/signature.module.css +16 -0
  17. package/es/lbm/components/lumiplan/todays-tips.module.css +6 -0
  18. package/es/lbm/components/lumiplan/toolbar.js +31 -0
  19. package/es/lbm/components/lumiplan/toolbar.module.css +39 -0
  20. package/es/lbm/components/lumiplan/weather/snow-data.module.css +16 -0
  21. package/es/lbm/components/lumiplan/weather/weather-data.module.css +16 -0
  22. package/es/lbm/components/lumiplan/weather/weather-days.module.css +6 -0
  23. package/es/lbm/components/lumiplan/weather/weather-zones.module.css +6 -0
  24. package/es/lbm/components/lumiplan/weather/weather.js +74 -40
  25. package/es/lbm/components/lumiplan/weather/weather.module.css +50 -0
  26. package/package.json +1 -1
@@ -47,4 +47,10 @@ export async function getPois(resort) {
47
47
  return Fetcher.get(endpoint, {
48
48
  resort
49
49
  });
50
+ }
51
+ export async function getSignature(resort) {
52
+ const endpoint = `${lumiplanApi}/signature`;
53
+ return Fetcher.get(endpoint, {
54
+ resort
55
+ });
50
56
  }
@@ -83,18 +83,22 @@
83
83
 
84
84
  .slope.GREEN {
85
85
  --color: #00a52c;
86
+ print-color-adjust: exact;
86
87
  }
87
88
 
88
89
  .slope.BLUE {
89
90
  --color: #0062ae;
91
+ print-color-adjust: exact;
90
92
  }
91
93
 
92
94
  .slope.RED {
93
95
  --color: #f4000f;
96
+ print-color-adjust: exact;
94
97
  }
95
98
 
96
99
  .slope.BLACK {
97
100
  --color: #000;
101
+ print-color-adjust: exact;
98
102
  }
99
103
 
100
104
  .slopePill {
@@ -121,3 +125,62 @@
121
125
  .mapButton:is(:hover, :focus) {
122
126
  opacity: 0.9;
123
127
  }
128
+
129
+ @media print {
130
+ div[data-mode="weather"] .domain {
131
+ display: none;
132
+ }
133
+
134
+ .domain {
135
+ padding: 0;
136
+ margin-top: 0;
137
+ }
138
+
139
+ .title {
140
+ display: none;
141
+ }
142
+
143
+ .domain,
144
+ .title,
145
+ .card {
146
+ background-color: hsl(var(--grey-000));
147
+ color: hsl(var(--grey-800));
148
+ }
149
+
150
+ .info {
151
+ justify-content: space-around;
152
+ }
153
+
154
+ .card {
155
+ height: 100px;
156
+ flex-direction: row;
157
+ gap: 5px;
158
+ padding: 0;
159
+ }
160
+
161
+ .card > svg {
162
+ flex: 0 0 60px;
163
+ width: 60px;
164
+ height: 60px;
165
+ fill: hsl(var(--primary));
166
+ }
167
+
168
+ .cardTitle {
169
+ font-size: 16px;
170
+ color: hsl(var(--primary));
171
+ }
172
+
173
+ .cardCount {
174
+ flex: 1 0 50%;
175
+ font-size: 33px;
176
+ color: hsl(var(--primary));
177
+ }
178
+
179
+ .mapButton {
180
+ display: none;
181
+ }
182
+
183
+ .slopes {
184
+ color: hsl(var(--primary));
185
+ }
186
+ }
@@ -0,0 +1,39 @@
1
+ import { useUbloContext } from "ublo/with-ublo";
2
+ import T from "./i18n/translations";
3
+ import styles from "./header.module.css";
4
+ import { jsx as _jsx } from "react/jsx-runtime";
5
+ import { jsxs as _jsxs } from "react/jsx-runtime";
6
+ export default function Title({
7
+ date,
8
+ mode
9
+ }) {
10
+ const {
11
+ lang
12
+ } = useUbloContext();
13
+ const langFormat = lang === "fr" ? "fr-FR" : "en-UK";
14
+ const options = {
15
+ day: "2-digit",
16
+ month: "2-digit",
17
+ year: "numeric",
18
+ hour: "2-digit",
19
+ minute: "2-digit",
20
+ hour12: lang === "fr" ? false : true
21
+ };
22
+ const formattedDate = date.toLocaleDateString(langFormat, options);
23
+ return _jsxs("div", {
24
+ className: styles.header,
25
+ children: [_jsxs("div", {
26
+ className: styles.title,
27
+ children: [_jsx(T, {
28
+ id: "print.bulletin"
29
+ }), " ", _jsx(T, {
30
+ id: `print.${mode}`
31
+ })]
32
+ }), _jsxs("div", {
33
+ className: styles.subtitle,
34
+ children: [_jsx(T, {
35
+ id: "print.subtitle"
36
+ }), formattedDate]
37
+ })]
38
+ });
39
+ }
@@ -0,0 +1,19 @@
1
+ .header {
2
+ display: none;
3
+ }
4
+
5
+ @media print {
6
+ .header {
7
+ display: flex;
8
+ flex-direction: column;
9
+ align-items: center;
10
+ gap: 10px;
11
+ margin-top: 10px;
12
+ font-size: 14px;
13
+ color: hsl(var(--primary));
14
+ }
15
+
16
+ .title {
17
+ text-transform: uppercase;
18
+ }
19
+ }
@@ -252,6 +252,13 @@
252
252
  "available": "Disponible",
253
253
  "unavailable": "Indispo"
254
254
  },
255
+ "print": {
256
+ "label": "Imprimer",
257
+ "weather": "Météo et neige",
258
+ "trails": "Infos pistes",
259
+ "bulletin": "Bulletin",
260
+ "subtitle": "Bulletin édité le : "
261
+ },
255
262
  "METER": "m",
256
263
  "KMH": "km/h",
257
264
  "CENTIMETER": "cm",
@@ -2,12 +2,15 @@ import * as React from "react";
2
2
  import { useInView } from "framer-motion";
3
3
  import getConfig from "next/config";
4
4
  import ResortSelector from "./resort-selector";
5
+ import Toolbar from "./toolbar";
5
6
  import TodaysTips from "./todays-tips";
6
7
  import RoadCondition from "./road-condition";
7
8
  import Weather from "./weather";
8
9
  import Domain from "./domain";
9
10
  import Pois from "./pois";
11
+ import Header from "./header";
10
12
  import Opening from "./opening";
13
+ import Signature from "./signature";
11
14
  import * as API from "./api";
12
15
  import css from "./lumiplan.module.css";
13
16
  import { jsx as _jsx } from "react/jsx-runtime";
@@ -42,6 +45,34 @@ export default function Lumiplan() {
42
45
  const [resortAccess, setResortAccess] = React.useState();
43
46
  const [domain, setDomain] = React.useState();
44
47
  const [pois, setPois] = React.useState();
48
+ const [timestamp, setTimestamp] = React.useState(new Date());
49
+ const [signature, setSignature] = React.useState();
50
+ const [mode, setMode] = React.useState("weather");
51
+ const fetchAllData = async () => {
52
+ try {
53
+ const [opening, weather, access, domain, pois, signature] = await Promise.all([API.getResortOpening(currentResortId), Promise.all([API.getWeather(currentResortId), API.getSnow(currentResortId)]), API.getResortAccess(currentResortId), Promise.all([API.getSlopes(currentResortId), API.getLifts(currentResortId)]), API.getPois(currentResortId), API.getSignature(currentResortId)]);
54
+ setResortOpening(opening);
55
+ setWeather({
56
+ weather: weather[0],
57
+ snow: weather[1]
58
+ });
59
+ setResortAccess(access);
60
+ setDomain({
61
+ slopes: domain[0],
62
+ lifts: domain[1]
63
+ });
64
+ setPois(pois);
65
+ setSignature(signature);
66
+ setTimestamp(new Date());
67
+ } catch (error) {
68
+ setResortOpening(null);
69
+ setWeather(null);
70
+ setResortAccess(null);
71
+ setDomain(null);
72
+ setPois(null);
73
+ setSignature(null);
74
+ }
75
+ };
45
76
  React.useEffect(() => {
46
77
  setResortOpening(undefined);
47
78
  if (isTodaysTipsInView || isOpeningsInView) {
@@ -119,11 +150,18 @@ export default function Lumiplan() {
119
150
  }
120
151
  }, [currentResortId, isPoisInView]);
121
152
  return _jsxs("div", {
153
+ "data-mode": mode,
122
154
  className: css.lumiplan,
123
- children: [_jsx(ResortSelector, {
155
+ children: [_jsx(Header, {
156
+ date: timestamp,
157
+ mode: mode
158
+ }), _jsx(ResortSelector, {
124
159
  resorts: lumiplanResorts,
125
160
  currentResortId: currentResortId,
126
161
  setCurrentResortId: setCurrentResortId
162
+ }), _jsx(Toolbar, {
163
+ setMode: setMode,
164
+ fetchAllData: fetchAllData
127
165
  }), _jsx(TodaysTips, {
128
166
  ref: todaysTipsRef,
129
167
  resortOpening: resortOpening
@@ -143,6 +181,8 @@ export default function Lumiplan() {
143
181
  ref: openingsRef,
144
182
  resortOpening: resortOpening,
145
183
  showOpening: currentResort.showOpening
184
+ }), _jsx(Signature, {
185
+ signature: signature
146
186
  })]
147
187
  });
148
188
  }
@@ -1,5 +1,13 @@
1
- @media (min-width: 780px) {
2
- .lumiplan {
3
- padding-top: 34px;
1
+ @media print {
2
+ :is(
3
+ .lumiplan[hidden],
4
+ :global(.content__header-zone),
5
+ :global(.header-menu),
6
+ :global(.breadcrumb),
7
+ :global(.header-tools__tagline),
8
+ :global(.header-tools__items),
9
+ :global(.footer)
10
+ ) {
11
+ display: none;
4
12
  }
5
13
  }
@@ -58,14 +58,20 @@ const Opening = React.forwardRef(({
58
58
  children: [_jsx("th", {}), orderedDays.map((day, i) => {
59
59
  const dayNumber = new Date();
60
60
  dayNumber.setDate(dayNumber.getDate() + i);
61
- return _jsx("th", {
61
+ const weekDay = t(lang, `opening.days.${day.dayType}`);
62
+ return _jsxs("th", {
62
63
  className: css.heading,
63
- children: _jsxs("div", {
64
- className: css.headingInner,
65
- children: [_jsx(T, {
66
- id: `opening.days.${day.dayType}`
67
- }), " ", dayNumber.getDate()]
68
- })
64
+ children: [_jsx(_Fragment, {
65
+ children: _jsxs("div", {
66
+ className: css.headingInner,
67
+ children: [weekDay, " ", dayNumber.getDate()]
68
+ })
69
+ }), _jsx(_Fragment, {
70
+ children: _jsxs("div", {
71
+ className: css.headingPrinted,
72
+ children: [formatPrintedDays(weekDay), dayNumber.getDate()]
73
+ })
74
+ })]
69
75
  }, day.dayType);
70
76
  })]
71
77
  })
@@ -97,8 +103,11 @@ function Rows({
97
103
  className: css.heading,
98
104
  children: _jsxs("span", {
99
105
  className: css.rowHeadingInner,
100
- children: [_jsx(Icon, {}), _jsx(T, {
101
- id: `opening.${kind}`
106
+ children: [_jsx(Icon, {}), _jsx("span", {
107
+ className: css.kindPrinted,
108
+ children: _jsx(T, {
109
+ id: `opening.${kind}`
110
+ })
102
111
  })]
103
112
  })
104
113
  }), rows.map(({
@@ -113,9 +122,14 @@ function Rows({
113
122
  className: classes,
114
123
  children: _jsxs("span", {
115
124
  className: css.cellInner,
116
- children: [_jsx(T, {
117
- id: code
118
- }), !open && _jsx(Icons.Cross, {})]
125
+ children: [_jsx("span", {
126
+ className: css.hiddenPrint,
127
+ children: _jsx(T, {
128
+ id: code
129
+ })
130
+ }), !open && _jsx(Icons.Cross, {}), open && _jsx(Icons.Check, {
131
+ className: css.showPrint
132
+ })]
119
133
  })
120
134
  }, `${dayType}-${kind}`);
121
135
  })]
@@ -127,4 +141,7 @@ function reorganizeDays(days, index) {
127
141
  const daysBefore = days.slice(0, index);
128
142
  const daysAfter = days.slice(index);
129
143
  return [...daysAfter, ...daysBefore];
144
+ }
145
+ function formatPrintedDays(day) {
146
+ return `${day.slice(0, 3)}. `;
130
147
  }
@@ -81,6 +81,10 @@
81
81
  padding-right: 10px;
82
82
  }
83
83
 
84
+ .headingPrinted {
85
+ display: none;
86
+ }
87
+
84
88
  .headingInner {
85
89
  width: fit-content;
86
90
  min-width: 120px;
@@ -156,3 +160,64 @@
156
160
  .cellAvailable {
157
161
  color: hsl(var(--secondary));
158
162
  }
163
+
164
+ .showPrint {
165
+ display: none;
166
+ }
167
+
168
+ @media print {
169
+ div[data-mode="weather"] .opening {
170
+ display: none;
171
+ }
172
+
173
+ .tableInner {
174
+ padding: 0 !important;
175
+ }
176
+
177
+ .tableOuter::before,
178
+ .tableOuter::after {
179
+ display: none;
180
+ }
181
+
182
+ .heading {
183
+ max-width: 50px;
184
+ padding: 0;
185
+ }
186
+
187
+ .kindPrinted {
188
+ position: relative;
189
+ left: 5px;
190
+ }
191
+
192
+ .rowHeadingInner {
193
+ position: relative;
194
+ bottom: 10px;
195
+ display: inline-block;
196
+ max-width: 50px;
197
+ min-width: 50px;
198
+ width: fit-content;
199
+ padding: 0;
200
+ gap: 0;
201
+ }
202
+
203
+ .headingInner,
204
+ .hiddenPrint {
205
+ display: none;
206
+ }
207
+
208
+ .showPrint {
209
+ display: block;
210
+ }
211
+
212
+ .headingPrinted {
213
+ width: fit-content;
214
+ min-width: 80px;
215
+ display: flex;
216
+ flex-direction: column;
217
+ text-align: center;
218
+ gap: 10px;
219
+ margin: 20px 0;
220
+ background-color: hsla(var(--secondary), 10%);
221
+ white-space: nowrap;
222
+ }
223
+ }
@@ -264,6 +264,9 @@ const Pois = React.forwardRef(({
264
264
  })]
265
265
  })]
266
266
  })]
267
+ }), message?.data && _jsx("b", {
268
+ className: css.printedMessage,
269
+ children: message.data
267
270
  })]
268
271
  }), _jsx("div", {
269
272
  className: css.poiMessage,
@@ -155,3 +155,35 @@
155
155
  .poiPopover {
156
156
  min-width: auto;
157
157
  }
158
+
159
+ .printedMessage {
160
+ display: none;
161
+ }
162
+
163
+ @media print {
164
+ div[data-mode="weather"] .pois {
165
+ display: none;
166
+ }
167
+
168
+ .list {
169
+ grid-template-columns: repeat(3, 1fr);
170
+ }
171
+
172
+ .zone {
173
+ gap: 33px;
174
+ }
175
+
176
+ .poiMessage,
177
+ .poiIcon {
178
+ display: none;
179
+ }
180
+
181
+ .poiDetail {
182
+ width: 50%;
183
+ }
184
+
185
+ .printedMessage {
186
+ display: block;
187
+ font-size: 12px;
188
+ }
189
+ }
@@ -0,0 +1,29 @@
1
+ import * as React from "react";
2
+ import Button from "dt-design-system/es/button";
3
+ import T from "./i18n/translations";
4
+ import styles from "./print-button.module.css";
5
+ import { jsx as _jsx } from "react/jsx-runtime";
6
+ export default function PrintButton({
7
+ fetchAllData,
8
+ mode,
9
+ setMode
10
+ }) {
11
+ const triggerPrint = async () => {
12
+ setMode(mode);
13
+ await fetchAllData();
14
+ window.requestAnimationFrame(() => {
15
+ window.print();
16
+ });
17
+ };
18
+ return _jsx("div", {
19
+ className: styles.wrapper,
20
+ children: _jsx(Button, {
21
+ variant: "secondary",
22
+ compact: true,
23
+ onClick: triggerPrint,
24
+ children: _jsx(T, {
25
+ id: `print.${mode}`
26
+ })
27
+ })
28
+ });
29
+ }
@@ -0,0 +1,28 @@
1
+ .wrapper {
2
+ display: flex;
3
+ align-items: center;
4
+ gap: 10px;
5
+ margin: 10px 0;
6
+ }
7
+
8
+ @media (min-width: 780px) {
9
+ .wrapper {
10
+ margin: 0;
11
+ }
12
+ }
13
+
14
+ .wrapper button {
15
+ font-size: 12px;
16
+ }
17
+
18
+ @media (min-width: 780px) {
19
+ .wrapper button {
20
+ font-size: 14px;
21
+ }
22
+ }
23
+
24
+ @media print {
25
+ .wrapper {
26
+ display: none;
27
+ }
28
+ }
@@ -93,3 +93,19 @@
93
93
  .bottom {
94
94
  font-size: 15px;
95
95
  }
96
+
97
+ @media print {
98
+ div[data-mode="trails"] .conditions {
99
+ display: none;
100
+ }
101
+
102
+ .title {
103
+ font-size: 20px;
104
+ }
105
+
106
+ .status,
107
+ .surface,
108
+ .equipment {
109
+ font-size: 14px;
110
+ }
111
+ }
@@ -0,0 +1,24 @@
1
+ import Image from "next/image";
2
+ import getConfig from "next/config";
3
+ import styles from "./signature.module.css";
4
+ import { jsx as _jsx } from "react/jsx-runtime";
5
+ const {
6
+ publicRuntimeConfig
7
+ } = getConfig();
8
+ const {
9
+ lumiplanApi
10
+ } = publicRuntimeConfig;
11
+ export default function Signature({
12
+ signature
13
+ }) {
14
+ if (!signature) return null;
15
+ return _jsx("div", {
16
+ className: styles.signature,
17
+ children: _jsx(Image, {
18
+ src: `${lumiplanApi}/labellemontagne-white.svg`,
19
+ height: 400,
20
+ width: 100,
21
+ alt: "labellemontagne"
22
+ })
23
+ });
24
+ }
@@ -0,0 +1,16 @@
1
+ .signature {
2
+ display: none;
3
+ }
4
+
5
+ @media print {
6
+ .signature {
7
+ height: 100px;
8
+ padding: 5px 10px;
9
+ background-color: hsl(var(--primary));
10
+ color: hsl(var(--grey-000));
11
+ print-color-adjust: exact;
12
+ display: flex;
13
+ align-items: center;
14
+ justify-content: center;
15
+ }
16
+ }
@@ -33,3 +33,9 @@
33
33
  font-size: 16px;
34
34
  color: hsl(var(--primary));
35
35
  }
36
+
37
+ @media print {
38
+ .tips {
39
+ display: none;
40
+ }
41
+ }
@@ -0,0 +1,31 @@
1
+ import * as React from "react";
2
+ import * as Icons from "dt-design-system/es/icons";
3
+ import PrintButton from "./print-button";
4
+ import T from "./i18n/translations";
5
+ import styles from "./toolbar.module.css";
6
+ import { jsx as _jsx } from "react/jsx-runtime";
7
+ import { jsxs as _jsxs } from "react/jsx-runtime";
8
+ export default function Toolbar({
9
+ setMode,
10
+ fetchAllData
11
+ }) {
12
+ return _jsx("div", {
13
+ className: styles.toolbar,
14
+ children: _jsxs("div", {
15
+ className: styles.inner,
16
+ children: [_jsx(Icons.Printer, {
17
+ className: styles.icon
18
+ }), _jsx(T, {
19
+ id: "print.label"
20
+ }), _jsx(PrintButton, {
21
+ fetchAllData: fetchAllData,
22
+ mode: "weather",
23
+ setMode: setMode
24
+ }), _jsx(PrintButton, {
25
+ fetchAllData: fetchAllData,
26
+ mode: "trails",
27
+ setMode: setMode
28
+ })]
29
+ })
30
+ });
31
+ }
@@ -0,0 +1,39 @@
1
+ .toolbar {
2
+ position: relative;
3
+ margin-bottom: 34px;
4
+ padding: 10px;
5
+ background-color: hsla(var(--grey-800), 2%);
6
+ }
7
+
8
+ /* Hide toolbar on touch devices */
9
+ @media (hover: none) {
10
+ .toolbar {
11
+ display: none;
12
+ }
13
+ }
14
+
15
+ .inner {
16
+ display: flex;
17
+ justify-content: flex-end;
18
+ gap: 10px;
19
+ width: 100%;
20
+ max-width: 1200px;
21
+ margin: 0 auto;
22
+ font-size: 14px;
23
+ }
24
+
25
+ @media (min-width: 768px) {
26
+ .inner {
27
+ font-size: 16px;
28
+ }
29
+ }
30
+
31
+ .icon {
32
+ flex: 0 0 16px;
33
+ }
34
+
35
+ @media print {
36
+ .toolbar {
37
+ display: none;
38
+ }
39
+ }
@@ -41,3 +41,19 @@
41
41
  color: hsl(var(--primary));
42
42
  font-size: 14px;
43
43
  }
44
+
45
+ @media print {
46
+ .snowIcon {
47
+ flex: 0 0 40px;
48
+ width: 40px;
49
+ height: 40px;
50
+ }
51
+ .snow {
52
+ flex-direction: column;
53
+ gap: 10px;
54
+ }
55
+
56
+ .snowDepth {
57
+ font-size: 24px;
58
+ }
59
+ }
@@ -61,3 +61,19 @@
61
61
  color: hsl(var(--primary));
62
62
  font-size: 14px;
63
63
  }
64
+
65
+ @media print {
66
+ .weatherData {
67
+ flex-direction: column;
68
+ gap: 10px;
69
+ }
70
+
71
+ .weatherData > svg {
72
+ flex: 0 0 40px;
73
+ width: 40px;
74
+ height: 40px;
75
+ }
76
+ .weatherInfoTemperatures {
77
+ font-size: 24px;
78
+ }
79
+ }
@@ -64,3 +64,9 @@ button.daySelected {
64
64
  button.day b {
65
65
  text-transform: uppercase;
66
66
  }
67
+
68
+ @media print {
69
+ .days {
70
+ display: none;
71
+ }
72
+ }
@@ -77,3 +77,9 @@ button.zoneSelected {
77
77
  button.zone b {
78
78
  text-transform: uppercase;
79
79
  }
80
+
81
+ @media print {
82
+ .zones {
83
+ display: none;
84
+ }
85
+ }
@@ -1,4 +1,5 @@
1
1
  import * as React from "react";
2
+ import classNames from "classnames";
2
3
  import { useUbloContext } from "ublo/with-ublo";
3
4
  import Button from "dt-design-system/es/button";
4
5
  import Tooltip from "dt-design-system/es/tooltip";
@@ -7,10 +8,10 @@ import * as Icons from "dt-design-system/es/icons";
7
8
  import AvalancheRisk from "./avalanche-risk";
8
9
  import SnowData from "./snow-data";
9
10
  import WeatherData from "./weather-data";
10
- import { t } from "../i18n/translations";
11
- import css from "./weather.module.css";
11
+ import T, { t } from "../i18n/translations";
12
12
  import Days from "./weather-days";
13
13
  import Zones from "./weather-zones";
14
+ import css from "./weather.module.css";
14
15
  import { jsx as _jsx } from "react/jsx-runtime";
15
16
  import { jsxs as _jsxs } from "react/jsx-runtime";
16
17
  const Weather = React.forwardRef(({
@@ -40,29 +41,29 @@ const Weather = React.forwardRef(({
40
41
  return null;
41
42
  }
42
43
  const {
43
- weatherZones
44
+ weatherZones,
45
+ weatherPreviews
44
46
  } = weather.weather;
45
47
  const {
46
48
  snowZones
47
49
  } = weather.snow;
50
+ const forecastList = weatherPreviews.find(preview => preview.type === "WEATHER_BULLETIN_OF_NEXT_DAY");
51
+ const forecastData = forecastList?.data?.find(f => f.language.startsWith(lang));
52
+ const forecast = forecastData?.data;
48
53
  const {
49
54
  weatherInfos
50
- } = weatherZones[currentZoneIndex] || {};
55
+ } = weatherZones[currentZoneIndex];
51
56
  const days = weatherInfos.slice(0, 4);
52
- const {
53
- am,
54
- pm
55
- } = days[currentDayIndex] || {};
56
- const snowData = snowZones[currentZoneIndex] || {};
57
- const ExpandIcon = expanded ? Icons.MinusCircle : Icons.PlusCircle;
58
- const toggleExpanded = () => {
59
- setExpanded(!expanded);
60
- };
61
57
  return _jsxs("div", {
62
58
  ref: ref,
63
59
  className: css.weather,
64
60
  "data-tags": t(lang, "weather.title"),
65
- children: [_jsx(Zones, {
61
+ children: [_jsx("div", {
62
+ className: css.forecast,
63
+ dangerouslySetInnerHTML: {
64
+ __html: forecast
65
+ }
66
+ }), _jsx(Zones, {
66
67
  weatherZones: weatherZones,
67
68
  currentZoneIndex: currentZoneIndex,
68
69
  setCurrentZoneIndex: setCurrentZoneIndex
@@ -71,33 +72,66 @@ const Weather = React.forwardRef(({
71
72
  currentDayIndex: currentDayIndex,
72
73
  setCurrentDayIndex: setCurrentDayIndex,
73
74
  lang: lang
74
- }), _jsxs("div", {
75
- className: css.info,
76
- children: [_jsx(AvalancheRisk, {
77
- avalancheRisk: snowData.avalancheRisk
78
- }), _jsxs("div", {
79
- className: css.infoBottom,
80
- children: [_jsx(SnowData, {
81
- data: snowData,
82
- expanded: expanded
83
- }), _jsx(WeatherData, {
84
- kind: "am",
85
- data: am,
86
- expanded: expanded
87
- }), _jsx(WeatherData, {
88
- kind: "pm",
89
- data: pm,
90
- expanded: expanded
75
+ }), weatherZones.map((zone, i) => {
76
+ const {
77
+ weatherInfos,
78
+ name,
79
+ altitude
80
+ } = zone;
81
+ const {
82
+ value,
83
+ unit
84
+ } = altitude;
85
+ const days = weatherInfos.slice(0, 4);
86
+ const {
87
+ am,
88
+ pm
89
+ } = days[currentDayIndex] || {};
90
+ const classes = classNames(css.info, {
91
+ [css.infoHidden]: currentZoneIndex !== i
92
+ });
93
+ const snowData = snowZones[i] || {};
94
+ const ExpandIcon = expanded ? Icons.MinusCircle : Icons.PlusCircle;
95
+ const toggleExpanded = () => {
96
+ setExpanded(!expanded);
97
+ };
98
+ return _jsxs("div", {
99
+ className: classes,
100
+ children: [_jsxs("span", {
101
+ className: css.printedName,
102
+ children: [_jsx("b", {
103
+ children: name
104
+ }), " ", value, _jsx("span", {
105
+ children: _jsx(T, {
106
+ id: unit
107
+ })
108
+ })]
109
+ }), _jsx(AvalancheRisk, {
110
+ avalancheRisk: snowData.avalancheRisk
111
+ }), _jsxs("div", {
112
+ className: css.infoBottom,
113
+ children: [_jsx(SnowData, {
114
+ data: snowData,
115
+ expanded: expanded
116
+ }), _jsx(WeatherData, {
117
+ kind: "am",
118
+ data: am,
119
+ expanded: expanded
120
+ }), _jsx(WeatherData, {
121
+ kind: "pm",
122
+ data: pm,
123
+ expanded: expanded
124
+ })]
125
+ }), _jsx(Tooltip, {
126
+ content: t(lang, expanded ? "see-less" : "see-more"),
127
+ children: _jsx(Button, {
128
+ className: css.expandButton,
129
+ variant: "transparent",
130
+ onClick: toggleExpanded,
131
+ children: _jsx(ExpandIcon, {})
132
+ })
91
133
  })]
92
- }), _jsx(Tooltip, {
93
- content: t(lang, expanded ? "see-less" : "see-more"),
94
- children: _jsx(Button, {
95
- className: css.expandButton,
96
- variant: "transparent",
97
- onClick: toggleExpanded,
98
- children: _jsx(ExpandIcon, {})
99
- })
100
- })]
134
+ }, i);
101
135
  })]
102
136
  });
103
137
  });
@@ -31,6 +31,10 @@
31
31
  background-color: hsla(var(--primary), 10%);
32
32
  }
33
33
 
34
+ .infoHidden {
35
+ display: none;
36
+ }
37
+
34
38
  .infoBottom {
35
39
  display: flex;
36
40
  flex-direction: column;
@@ -48,3 +52,49 @@
48
52
  .expandButton {
49
53
  margin: 0 auto;
50
54
  }
55
+
56
+ .printedName {
57
+ display: none;
58
+ }
59
+
60
+ .forecast {
61
+ display: none;
62
+ }
63
+
64
+ @media print {
65
+ div[data-mode="trails"] .weather {
66
+ display: none;
67
+ }
68
+
69
+ .infoBottom {
70
+ flex-direction: row;
71
+ align-items: flex-start;
72
+ gap: 10px;
73
+ }
74
+
75
+ .infoHidden {
76
+ display: flex;
77
+ flex-direction: column;
78
+ gap: 30px;
79
+ padding: 34px 16px;
80
+ }
81
+
82
+ .expandButton {
83
+ display: none;
84
+ }
85
+
86
+ .printedName {
87
+ font-size: 24px;
88
+ font-weight: 700;
89
+ display: block;
90
+ text-align: center;
91
+ margin: -20px 0;
92
+ color: hsl(var(--primary));
93
+ }
94
+
95
+ .forecast {
96
+ display: block;
97
+ font-size: 14px;
98
+ color: hsl(var(--primary));
99
+ }
100
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ublo-lib",
3
- "version": "1.26.8",
3
+ "version": "1.26.10",
4
4
  "peerDependencies": {
5
5
  "dt-design-system": "^3.8.3",
6
6
  "leaflet": "^1.9.1",