@opengeoweb/knmi-components 19.1.0 → 19.2.0
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.
- package/dist/README.md +7 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.esm.js +656 -0
- package/dist/src/index.d.ts +5 -0
- package/dist/src/lib/api/api.d.ts +3 -0
- package/dist/src/lib/api/fakeApi.d.ts +1 -0
- package/dist/src/lib/api/hooks.d.ts +9 -0
- package/dist/src/lib/components/ComponentsLookup/ComponentsLookUp.d.ts +10 -0
- package/dist/src/lib/components/ComponentsLookup/index.d.ts +1 -0
- package/dist/src/lib/components/Trajks/TrajksForm.d.ts +14 -0
- package/dist/src/lib/components/Trajks/TrajksFormWrapper.d.ts +1 -0
- package/dist/src/lib/components/Trajks/index.d.ts +1 -0
- package/dist/src/lib/utils/Providers.d.ts +9 -0
- package/dist/src/lib/utils/i18n.d.ts +6 -0
- package/package.json +2 -1
package/dist/README.md
ADDED
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./src/index";
|
|
@@ -0,0 +1,656 @@
|
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { LinearProgress, Box, Grid, FormControlLabel, Radio, MenuItem, Checkbox, Button } from '@mui/material';
|
|
3
|
+
import { useFormContext } from 'react-hook-form';
|
|
4
|
+
import { FORM_FIELDS_NAMESPACE, ReactHookFormTextField, ReactHookFormNumberField, isLatitude, isLongitude, isValidMin, isValidMax, ReactHookFormDateTime, isXHoursBefore, isXHoursAfter, ReactHookFormRadioGroup, ReactHookFormSelect, ReactHookFormFormControl, ReactHookFormProvider, defaultFormOptions } from '@opengeoweb/form-fields';
|
|
5
|
+
import { sessionStorageProvider, SHARED_NAMESPACE, usePreventBrowserClose, AlertBanner, dateUtils, ErrorBoundary } from '@opengeoweb/shared';
|
|
6
|
+
import { useMutation } from '@tanstack/react-query';
|
|
7
|
+
import { useDispatch } from 'react-redux';
|
|
8
|
+
import { useAuthenticationContext } from '@opengeoweb/authentication';
|
|
9
|
+
import { snackbarActions, snackbarTypes } from '@opengeoweb/snackbar';
|
|
10
|
+
import { getHeaders, handleResponse } from '@opengeoweb/api';
|
|
11
|
+
import 'i18next';
|
|
12
|
+
import { useTranslation } from 'react-i18next';
|
|
13
|
+
|
|
14
|
+
var en = {
|
|
15
|
+
"error-auth-login": "This feature is protected by authentication. Please log in to proceed",
|
|
16
|
+
"error-publish": "Something went wrong while publishing. Please try again.",
|
|
17
|
+
"message-publish-success": "Product was published successfully",
|
|
18
|
+
"clear-form": "Clear",
|
|
19
|
+
"publish-form": "Publish",
|
|
20
|
+
"reference-name": "Reference name",
|
|
21
|
+
latitude: "Latitude",
|
|
22
|
+
longitude: "Longitude",
|
|
23
|
+
"release-height": "Release height (m)",
|
|
24
|
+
start: "Start",
|
|
25
|
+
"direction-back": "Backward",
|
|
26
|
+
"direction-for": "Forward",
|
|
27
|
+
"trajectory-duration": "Trajectory duration (hours)",
|
|
28
|
+
"num-vertical-levels": "Number of vertical levels",
|
|
29
|
+
"spatial-uncertainty": "Add spatial uncertainty",
|
|
30
|
+
"start-time-before-error-message": "The start time cannot lie more than {{hours}} hours in the past",
|
|
31
|
+
"start-time-after-error-message": "The start time cannot lie more than {{hours}} hours in the future",
|
|
32
|
+
"trajectory-duration-min-error": "The minimum duration is 1 hour",
|
|
33
|
+
"trajectory-duration-max-error": "The maximum duration is 125 hours",
|
|
34
|
+
"release-height-min-error": "The minimum release height is 0 meters",
|
|
35
|
+
"release-height-max-error": "The maximum release height is 10000 meters"
|
|
36
|
+
};
|
|
37
|
+
var fi = {
|
|
38
|
+
};
|
|
39
|
+
var no = {
|
|
40
|
+
};
|
|
41
|
+
var nl = {
|
|
42
|
+
"error-auth-login": "Deze functie wordt beschermd door authenticatie. Log in om verder te gaan",
|
|
43
|
+
"error-publish": "Er is iets mis gegaan met publiceren. Probeer het opnieuw.",
|
|
44
|
+
"message-publish-success": "Product is succesvol gepubliceerd",
|
|
45
|
+
"clear-form": "Wissen",
|
|
46
|
+
"publish-form": "Publiceren",
|
|
47
|
+
"reference-name": "Referentie naam",
|
|
48
|
+
latitude: "Latitude",
|
|
49
|
+
longitude: "Longitude",
|
|
50
|
+
"release-height": "Vrijgave hoogte (m)",
|
|
51
|
+
start: "Start",
|
|
52
|
+
"direction-back:": "Achteruit",
|
|
53
|
+
"direction-for": "Vooruit",
|
|
54
|
+
"trajectory-duration": "Traject duratie (uren)",
|
|
55
|
+
"num-vertical-levels": "Aantal verticale niveaus",
|
|
56
|
+
"spatial-uncertainty": "Ruimtelijke onzekerheid toevoegen",
|
|
57
|
+
"start-time-before-error-message": "De start tijd mag niet meer dan {{hours}} uur in het verleden liggen",
|
|
58
|
+
"start-time-after-error-message": "De start tijd mag niet meer dan {{hours}} uur in de toekomst liggen",
|
|
59
|
+
"trajectory-duration-min-error": "De minimale duur is 1 uur",
|
|
60
|
+
"trajectory-duration-max-error": "De maximale duur is 125 uur",
|
|
61
|
+
"release-height-min-error": "De minimale vrijgave hoogte is 0 meter",
|
|
62
|
+
"release-height-max-error": "De maximale Vrijgave hoogte is 10000 meter"
|
|
63
|
+
};
|
|
64
|
+
var knmicomponentTranslations = {
|
|
65
|
+
en: en,
|
|
66
|
+
fi: fi,
|
|
67
|
+
no: no,
|
|
68
|
+
nl: nl
|
|
69
|
+
};
|
|
70
|
+
|
|
71
|
+
function asyncGeneratorStep(n, t, e, r, o, a, c) {
|
|
72
|
+
try {
|
|
73
|
+
var i = n[a](c),
|
|
74
|
+
u = i.value;
|
|
75
|
+
} catch (n) {
|
|
76
|
+
return void e(n);
|
|
77
|
+
}
|
|
78
|
+
i.done ? t(u) : Promise.resolve(u).then(r, o);
|
|
79
|
+
}
|
|
80
|
+
function _asyncToGenerator(n) {
|
|
81
|
+
return function () {
|
|
82
|
+
var t = this,
|
|
83
|
+
e = arguments;
|
|
84
|
+
return new Promise(function (r, o) {
|
|
85
|
+
var a = n.apply(t, e);
|
|
86
|
+
function _next(n) {
|
|
87
|
+
asyncGeneratorStep(a, r, o, _next, _throw, "next", n);
|
|
88
|
+
}
|
|
89
|
+
function _throw(n) {
|
|
90
|
+
asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);
|
|
91
|
+
}
|
|
92
|
+
_next(void 0);
|
|
93
|
+
});
|
|
94
|
+
};
|
|
95
|
+
}
|
|
96
|
+
function _regenerator() {
|
|
97
|
+
/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */
|
|
98
|
+
var e,
|
|
99
|
+
t,
|
|
100
|
+
r = "function" == typeof Symbol ? Symbol : {},
|
|
101
|
+
n = r.iterator || "@@iterator",
|
|
102
|
+
o = r.toStringTag || "@@toStringTag";
|
|
103
|
+
function i(r, n, o, i) {
|
|
104
|
+
var c = n && n.prototype instanceof Generator ? n : Generator,
|
|
105
|
+
u = Object.create(c.prototype);
|
|
106
|
+
return _regeneratorDefine(u, "_invoke", function (r, n, o) {
|
|
107
|
+
var i,
|
|
108
|
+
c,
|
|
109
|
+
u,
|
|
110
|
+
f = 0,
|
|
111
|
+
p = o || [],
|
|
112
|
+
y = false,
|
|
113
|
+
G = {
|
|
114
|
+
p: 0,
|
|
115
|
+
n: 0,
|
|
116
|
+
v: e,
|
|
117
|
+
a: d,
|
|
118
|
+
f: d.bind(e, 4),
|
|
119
|
+
d: function (t, r) {
|
|
120
|
+
return i = t, c = 0, u = e, G.n = r, a;
|
|
121
|
+
}
|
|
122
|
+
};
|
|
123
|
+
function d(r, n) {
|
|
124
|
+
for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) {
|
|
125
|
+
var o,
|
|
126
|
+
i = p[t],
|
|
127
|
+
d = G.p,
|
|
128
|
+
l = i[2];
|
|
129
|
+
r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0));
|
|
130
|
+
}
|
|
131
|
+
if (o || r > 1) return a;
|
|
132
|
+
throw y = true, n;
|
|
133
|
+
}
|
|
134
|
+
return function (o, p, l) {
|
|
135
|
+
if (f > 1) throw TypeError("Generator is already running");
|
|
136
|
+
for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) {
|
|
137
|
+
i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u);
|
|
138
|
+
try {
|
|
139
|
+
if (f = 2, i) {
|
|
140
|
+
if (c || (o = "next"), t = i[o]) {
|
|
141
|
+
if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object");
|
|
142
|
+
if (!t.done) return t;
|
|
143
|
+
u = t.value, c < 2 && (c = 0);
|
|
144
|
+
} else 1 === c && (t = i.return) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1);
|
|
145
|
+
i = e;
|
|
146
|
+
} else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break;
|
|
147
|
+
} catch (t) {
|
|
148
|
+
i = e, c = 1, u = t;
|
|
149
|
+
} finally {
|
|
150
|
+
f = 1;
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
return {
|
|
154
|
+
value: t,
|
|
155
|
+
done: y
|
|
156
|
+
};
|
|
157
|
+
};
|
|
158
|
+
}(r, o, i), true), u;
|
|
159
|
+
}
|
|
160
|
+
var a = {};
|
|
161
|
+
function Generator() {}
|
|
162
|
+
function GeneratorFunction() {}
|
|
163
|
+
function GeneratorFunctionPrototype() {}
|
|
164
|
+
t = Object.getPrototypeOf;
|
|
165
|
+
var c = [][n] ? t(t([][n]())) : (_regeneratorDefine(t = {}, n, function () {
|
|
166
|
+
return this;
|
|
167
|
+
}), t),
|
|
168
|
+
u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c);
|
|
169
|
+
function f(e) {
|
|
170
|
+
return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e;
|
|
171
|
+
}
|
|
172
|
+
return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine(u), _regeneratorDefine(u, o, "Generator"), _regeneratorDefine(u, n, function () {
|
|
173
|
+
return this;
|
|
174
|
+
}), _regeneratorDefine(u, "toString", function () {
|
|
175
|
+
return "[object Generator]";
|
|
176
|
+
}), (_regenerator = function () {
|
|
177
|
+
return {
|
|
178
|
+
w: i,
|
|
179
|
+
m: f
|
|
180
|
+
};
|
|
181
|
+
})();
|
|
182
|
+
}
|
|
183
|
+
function _regeneratorDefine(e, r, n, t) {
|
|
184
|
+
var i = Object.defineProperty;
|
|
185
|
+
try {
|
|
186
|
+
i({}, "", {});
|
|
187
|
+
} catch (e) {
|
|
188
|
+
i = 0;
|
|
189
|
+
}
|
|
190
|
+
_regeneratorDefine = function (e, r, n, t) {
|
|
191
|
+
function o(r, n) {
|
|
192
|
+
_regeneratorDefine(e, r, function (e) {
|
|
193
|
+
return this._invoke(r, n, e);
|
|
194
|
+
});
|
|
195
|
+
}
|
|
196
|
+
r ? i ? i(e, r, {
|
|
197
|
+
value: n,
|
|
198
|
+
enumerable: !t,
|
|
199
|
+
configurable: !t,
|
|
200
|
+
writable: !t
|
|
201
|
+
}) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2));
|
|
202
|
+
}, _regeneratorDefine(e, r, n, t);
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
var config = sessionStorageProvider.getConfig();
|
|
206
|
+
var publisherBaseUrl = config.GW_KNMI_PUBLISHER_BASE_URL || '';
|
|
207
|
+
var publishProduct = /*#__PURE__*/function () {
|
|
208
|
+
var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(auth, data, productType) {
|
|
209
|
+
return _regenerator().w(function (_context) {
|
|
210
|
+
while (1) switch (_context.n) {
|
|
211
|
+
case 0:
|
|
212
|
+
if (productType === void 0) {
|
|
213
|
+
productType = 'trajks';
|
|
214
|
+
}
|
|
215
|
+
return _context.a(2, fetch(publisherBaseUrl + "/publish/" + productType, {
|
|
216
|
+
headers: getHeaders(auth),
|
|
217
|
+
method: 'POST',
|
|
218
|
+
body: JSON.stringify(data)
|
|
219
|
+
}).then(handleResponse));
|
|
220
|
+
}
|
|
221
|
+
}, _callee);
|
|
222
|
+
}));
|
|
223
|
+
return function publishProduct(_x, _x2, _x3) {
|
|
224
|
+
return _ref.apply(this, arguments);
|
|
225
|
+
};
|
|
226
|
+
}();
|
|
227
|
+
|
|
228
|
+
/* *
|
|
229
|
+
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
230
|
+
* you may not use this file except in compliance with the License.
|
|
231
|
+
* You may obtain a copy of the License at
|
|
232
|
+
*
|
|
233
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
234
|
+
*
|
|
235
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
236
|
+
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
237
|
+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
238
|
+
* See the License for the specific language governing permissions and
|
|
239
|
+
* limitations under the License.
|
|
240
|
+
*
|
|
241
|
+
* Copyright 2025 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
|
|
242
|
+
* Copyright 2025 - Finnish Meteorological Institute (FMI)
|
|
243
|
+
* Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
|
|
244
|
+
* */
|
|
245
|
+
var KNMICOMPONENTS_NAMESPACE = 'KNMIComponents';
|
|
246
|
+
var ns = [KNMICOMPONENTS_NAMESPACE, SHARED_NAMESPACE, FORM_FIELDS_NAMESPACE];
|
|
247
|
+
var useKNMIComponentsTranslation = function useKNMIComponentsTranslation() {
|
|
248
|
+
return useTranslation(ns);
|
|
249
|
+
};
|
|
250
|
+
|
|
251
|
+
var usePublishProduct = function usePublishProduct() {
|
|
252
|
+
var _useAuthenticationCon = useAuthenticationContext(),
|
|
253
|
+
auth = _useAuthenticationCon.auth;
|
|
254
|
+
var _useKNMIComponentsTra = useKNMIComponentsTranslation(),
|
|
255
|
+
t = _useKNMIComponentsTra.t;
|
|
256
|
+
var dispatch = useDispatch();
|
|
257
|
+
return useMutation({
|
|
258
|
+
mutationFn: function () {
|
|
259
|
+
var _mutationFn = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(_ref) {
|
|
260
|
+
var data;
|
|
261
|
+
return _regenerator().w(function (_context) {
|
|
262
|
+
while (1) switch (_context.n) {
|
|
263
|
+
case 0:
|
|
264
|
+
data = _ref.data;
|
|
265
|
+
if (auth) {
|
|
266
|
+
_context.n = 1;
|
|
267
|
+
break;
|
|
268
|
+
}
|
|
269
|
+
throw new Error('Authentication context not found');
|
|
270
|
+
case 1:
|
|
271
|
+
return _context.a(2, publishProduct(auth, data));
|
|
272
|
+
}
|
|
273
|
+
}, _callee);
|
|
274
|
+
}));
|
|
275
|
+
function mutationFn(_x) {
|
|
276
|
+
return _mutationFn.apply(this, arguments);
|
|
277
|
+
}
|
|
278
|
+
return mutationFn;
|
|
279
|
+
}(),
|
|
280
|
+
onSuccess: function () {
|
|
281
|
+
var _onSuccess = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(_data, _ref2) {
|
|
282
|
+
var clearForm;
|
|
283
|
+
return _regenerator().w(function (_context2) {
|
|
284
|
+
while (1) switch (_context2.n) {
|
|
285
|
+
case 0:
|
|
286
|
+
clearForm = _ref2.clearForm;
|
|
287
|
+
dispatch(snackbarActions.openSnackbar({
|
|
288
|
+
type: snackbarTypes.SnackbarMessageType.TRANSLATABLE_MESSAGE,
|
|
289
|
+
key: t('message-publish-success')
|
|
290
|
+
}));
|
|
291
|
+
clearForm();
|
|
292
|
+
case 1:
|
|
293
|
+
return _context2.a(2);
|
|
294
|
+
}
|
|
295
|
+
}, _callee2);
|
|
296
|
+
}));
|
|
297
|
+
function onSuccess(_x2, _x3) {
|
|
298
|
+
return _onSuccess.apply(this, arguments);
|
|
299
|
+
}
|
|
300
|
+
return onSuccess;
|
|
301
|
+
}()
|
|
302
|
+
});
|
|
303
|
+
};
|
|
304
|
+
|
|
305
|
+
var formStyles = {
|
|
306
|
+
padding: '32px 16px',
|
|
307
|
+
'.MuiSelect-select.MuiInputBase-input.MuiFilledInput-input': {
|
|
308
|
+
paddingTop: '17px',
|
|
309
|
+
paddingBottom: '0px'
|
|
310
|
+
},
|
|
311
|
+
'.MuiInputBase-input.MuiFilledInput-input': {
|
|
312
|
+
paddingTop: '15px',
|
|
313
|
+
paddingBottom: '2px'
|
|
314
|
+
},
|
|
315
|
+
'.MuiPickersSectionList-root': {
|
|
316
|
+
paddingTop: '17px',
|
|
317
|
+
paddingBottom: '0px'
|
|
318
|
+
}
|
|
319
|
+
};
|
|
320
|
+
var rowStyles = {
|
|
321
|
+
width: '100%',
|
|
322
|
+
display: 'flex',
|
|
323
|
+
flexWrap: 'wrap',
|
|
324
|
+
gap: '16px',
|
|
325
|
+
marginTop: '-8px'
|
|
326
|
+
};
|
|
327
|
+
var fieldStyles = {
|
|
328
|
+
flexGrow: 1,
|
|
329
|
+
flexBasis: '240px',
|
|
330
|
+
minWidth: '240px'
|
|
331
|
+
};
|
|
332
|
+
var fieldStylesRadio = {
|
|
333
|
+
flexGrow: 1,
|
|
334
|
+
flexBasis: '112px',
|
|
335
|
+
minWidth: '112px'
|
|
336
|
+
};
|
|
337
|
+
var MIN_HEIGHT = 0;
|
|
338
|
+
var MAX_HEIGHT = 10000;
|
|
339
|
+
var MIN_DURATION = 1;
|
|
340
|
+
var MAX_DURATION = 125;
|
|
341
|
+
var MIN_MAX_TIME = 120;
|
|
342
|
+
var generateDefaultValues = function generateDefaultValues() {
|
|
343
|
+
var _dateUtils$dateToStri;
|
|
344
|
+
return {
|
|
345
|
+
referenceName: '',
|
|
346
|
+
lat: '',
|
|
347
|
+
lon: '',
|
|
348
|
+
releaseHeight: '',
|
|
349
|
+
start: (_dateUtils$dateToStri = dateUtils.dateToString(dateUtils.sub(dateUtils.utc(), {}))) != null ? _dateUtils$dateToStri : '',
|
|
350
|
+
direction: 'forward',
|
|
351
|
+
duration: 48,
|
|
352
|
+
numVerticalLevels: 1,
|
|
353
|
+
spatialUncertainty: false
|
|
354
|
+
};
|
|
355
|
+
};
|
|
356
|
+
var Form = function Form() {
|
|
357
|
+
var _useKNMIComponentsTra = useKNMIComponentsTranslation(),
|
|
358
|
+
t = _useKNMIComponentsTra.t;
|
|
359
|
+
var _useFormContext = useFormContext(),
|
|
360
|
+
handleSubmit = _useFormContext.handleSubmit,
|
|
361
|
+
formState = _useFormContext.formState,
|
|
362
|
+
reset = _useFormContext.reset,
|
|
363
|
+
watch = _useFormContext.watch,
|
|
364
|
+
setValue = _useFormContext.setValue;
|
|
365
|
+
var dirtyFields = formState.dirtyFields,
|
|
366
|
+
isValid = formState.isValid;
|
|
367
|
+
var isDirty = Object.keys(dirtyFields).length > 0;
|
|
368
|
+
usePreventBrowserClose(isDirty);
|
|
369
|
+
var _usePublishProduct = usePublishProduct(),
|
|
370
|
+
publishProduct = _usePublishProduct.mutate,
|
|
371
|
+
publishError = _usePublishProduct.error,
|
|
372
|
+
isPublishing = _usePublishProduct.isPending;
|
|
373
|
+
var handleSendForm = function handleSendForm() {
|
|
374
|
+
void handleSubmit(function (data) {
|
|
375
|
+
publishProduct({
|
|
376
|
+
data: data,
|
|
377
|
+
clearForm: handleClearForm
|
|
378
|
+
});
|
|
379
|
+
})();
|
|
380
|
+
};
|
|
381
|
+
var handleClearForm = function handleClearForm() {
|
|
382
|
+
reset(generateDefaultValues());
|
|
383
|
+
};
|
|
384
|
+
var spatialUncertainty = watch('spatialUncertainty');
|
|
385
|
+
return jsxs("form", {
|
|
386
|
+
"data-testid": "trajks-form",
|
|
387
|
+
style: {
|
|
388
|
+
height: '100%',
|
|
389
|
+
overflowY: 'auto'
|
|
390
|
+
},
|
|
391
|
+
children: [isPublishing ? jsx(LinearProgress, {
|
|
392
|
+
color: "secondary",
|
|
393
|
+
sx: {
|
|
394
|
+
position: 'absolute',
|
|
395
|
+
width: '100%'
|
|
396
|
+
}
|
|
397
|
+
}) : null, publishError ? jsx(Box, {
|
|
398
|
+
sx: {
|
|
399
|
+
width: '100%'
|
|
400
|
+
},
|
|
401
|
+
children: jsx(AlertBanner, {
|
|
402
|
+
info: publishError.message,
|
|
403
|
+
shouldClose: true,
|
|
404
|
+
title: t('error-publish')
|
|
405
|
+
})
|
|
406
|
+
}) : null, jsxs(Grid, {
|
|
407
|
+
container: true,
|
|
408
|
+
spacing: 3,
|
|
409
|
+
sx: formStyles,
|
|
410
|
+
children: [jsx(ReactHookFormTextField, {
|
|
411
|
+
label: t('reference-name'),
|
|
412
|
+
name: "referenceName",
|
|
413
|
+
rules: {
|
|
414
|
+
required: true
|
|
415
|
+
},
|
|
416
|
+
size: "small"
|
|
417
|
+
}), jsxs(Box, {
|
|
418
|
+
sx: rowStyles,
|
|
419
|
+
children: [jsx(Box, {
|
|
420
|
+
sx: fieldStyles,
|
|
421
|
+
children: jsx(ReactHookFormNumberField, {
|
|
422
|
+
inputMode: "decimal",
|
|
423
|
+
label: t('latitude'),
|
|
424
|
+
name: "lat",
|
|
425
|
+
rules: {
|
|
426
|
+
required: true,
|
|
427
|
+
validate: {
|
|
428
|
+
isLatitude: isLatitude
|
|
429
|
+
}
|
|
430
|
+
},
|
|
431
|
+
size: "small"
|
|
432
|
+
})
|
|
433
|
+
}), jsx(Box, {
|
|
434
|
+
sx: fieldStyles,
|
|
435
|
+
children: jsx(ReactHookFormNumberField, {
|
|
436
|
+
inputMode: "decimal",
|
|
437
|
+
label: t('longitude'),
|
|
438
|
+
name: "lon",
|
|
439
|
+
rules: {
|
|
440
|
+
required: true,
|
|
441
|
+
validate: {
|
|
442
|
+
isLongitude: isLongitude
|
|
443
|
+
}
|
|
444
|
+
},
|
|
445
|
+
size: "small"
|
|
446
|
+
})
|
|
447
|
+
})]
|
|
448
|
+
}), jsxs(Box, {
|
|
449
|
+
sx: rowStyles,
|
|
450
|
+
children: [jsx(Box, {
|
|
451
|
+
sx: fieldStyles,
|
|
452
|
+
children: jsx(ReactHookFormNumberField, {
|
|
453
|
+
label: t('release-height'),
|
|
454
|
+
name: "releaseHeight",
|
|
455
|
+
rules: {
|
|
456
|
+
required: true,
|
|
457
|
+
validate: {
|
|
458
|
+
maxHeight: function maxHeight(value) {
|
|
459
|
+
return isValidMax(value, MAX_HEIGHT) || t('release-height-max-error', {
|
|
460
|
+
maxValue: MAX_HEIGHT
|
|
461
|
+
});
|
|
462
|
+
},
|
|
463
|
+
minHeight: function minHeight(value) {
|
|
464
|
+
return isValidMin(value, MIN_HEIGHT) || t('release-height-min-error', {
|
|
465
|
+
minHeightValue: MIN_HEIGHT
|
|
466
|
+
});
|
|
467
|
+
}
|
|
468
|
+
}
|
|
469
|
+
},
|
|
470
|
+
size: "small"
|
|
471
|
+
})
|
|
472
|
+
}), jsx(Box, {
|
|
473
|
+
sx: fieldStyles,
|
|
474
|
+
children: jsx(ReactHookFormDateTime, {
|
|
475
|
+
format: "dd/MM/yyyy HH:mm",
|
|
476
|
+
label: t('start'),
|
|
477
|
+
name: "start",
|
|
478
|
+
openTo: "hours",
|
|
479
|
+
rules: {
|
|
480
|
+
required: true,
|
|
481
|
+
validate: {
|
|
482
|
+
isValidDate: dateUtils.isValidIsoDateString,
|
|
483
|
+
isCurrentTimeWithinXHoursValue: function isCurrentTimeWithinXHoursValue(value) {
|
|
484
|
+
var isValidBefore = isXHoursBefore(dateUtils.getCurrentTimeAsString(), value, MIN_MAX_TIME);
|
|
485
|
+
if (!isValidBefore) {
|
|
486
|
+
return t('start-time-after-error-message', {
|
|
487
|
+
hours: MIN_MAX_TIME
|
|
488
|
+
});
|
|
489
|
+
}
|
|
490
|
+
var isValidAfter = isXHoursAfter(dateUtils.getCurrentTimeAsString(), value, MIN_MAX_TIME);
|
|
491
|
+
return isValidBefore && isValidAfter || t('start-time-before-error-message', {
|
|
492
|
+
hours: MIN_MAX_TIME
|
|
493
|
+
});
|
|
494
|
+
}
|
|
495
|
+
}
|
|
496
|
+
}
|
|
497
|
+
})
|
|
498
|
+
})]
|
|
499
|
+
}), jsx(ReactHookFormRadioGroup, {
|
|
500
|
+
name: "direction",
|
|
501
|
+
row: true,
|
|
502
|
+
rules: {
|
|
503
|
+
required: true
|
|
504
|
+
},
|
|
505
|
+
children: jsxs(Box, {
|
|
506
|
+
sx: rowStyles,
|
|
507
|
+
children: [jsx(Box, {
|
|
508
|
+
sx: fieldStylesRadio,
|
|
509
|
+
children: jsx(FormControlLabel, {
|
|
510
|
+
control: jsx(Radio, {}),
|
|
511
|
+
label: t('direction-for'),
|
|
512
|
+
value: "forward"
|
|
513
|
+
}, "forward")
|
|
514
|
+
}), jsx(Box, {
|
|
515
|
+
sx: fieldStylesRadio,
|
|
516
|
+
children: jsx(FormControlLabel, {
|
|
517
|
+
control: jsx(Radio, {}),
|
|
518
|
+
label: t('direction-back'),
|
|
519
|
+
value: "backward"
|
|
520
|
+
}, "backward")
|
|
521
|
+
})]
|
|
522
|
+
})
|
|
523
|
+
}), jsxs(Box, {
|
|
524
|
+
sx: rowStyles,
|
|
525
|
+
children: [jsx(Box, {
|
|
526
|
+
sx: fieldStyles,
|
|
527
|
+
children: jsx(ReactHookFormNumberField, {
|
|
528
|
+
label: t('trajectory-duration'),
|
|
529
|
+
name: "duration",
|
|
530
|
+
rules: {
|
|
531
|
+
required: true,
|
|
532
|
+
validate: {
|
|
533
|
+
maxDuration: function maxDuration(value) {
|
|
534
|
+
return isValidMax(value, MAX_DURATION) || t('trajectory-duration-max-error', {
|
|
535
|
+
maxValue: MAX_DURATION
|
|
536
|
+
});
|
|
537
|
+
},
|
|
538
|
+
minDuration: function minDuration(value) {
|
|
539
|
+
return (
|
|
540
|
+
// The min level depends on the unit
|
|
541
|
+
isValidMin(value, MIN_DURATION) || t('trajectory-duration-min-error', {
|
|
542
|
+
minLevelValue: MIN_DURATION
|
|
543
|
+
})
|
|
544
|
+
);
|
|
545
|
+
}
|
|
546
|
+
}
|
|
547
|
+
},
|
|
548
|
+
size: "small"
|
|
549
|
+
})
|
|
550
|
+
}), jsx(Box, {
|
|
551
|
+
sx: fieldStyles,
|
|
552
|
+
children: jsx(ReactHookFormSelect, {
|
|
553
|
+
label: t('num-vertical-levels'),
|
|
554
|
+
name: "numVerticalLevels",
|
|
555
|
+
rules: {
|
|
556
|
+
required: true
|
|
557
|
+
},
|
|
558
|
+
size: "small",
|
|
559
|
+
children: Array.from({
|
|
560
|
+
length: 10
|
|
561
|
+
}, function (_, i) {
|
|
562
|
+
return i + 1;
|
|
563
|
+
}).map(function (level) {
|
|
564
|
+
return jsx(MenuItem, {
|
|
565
|
+
value: level,
|
|
566
|
+
children: level
|
|
567
|
+
}, level);
|
|
568
|
+
})
|
|
569
|
+
})
|
|
570
|
+
})]
|
|
571
|
+
}), jsx(ReactHookFormFormControl, {
|
|
572
|
+
children: jsx(FormControlLabel, {
|
|
573
|
+
control: jsx(Checkbox, {
|
|
574
|
+
checked: spatialUncertainty,
|
|
575
|
+
color: "secondary",
|
|
576
|
+
name: "spatialUncertainty",
|
|
577
|
+
onChange: function onChange() {
|
|
578
|
+
setValue('spatialUncertainty', !spatialUncertainty, {
|
|
579
|
+
shouldDirty: true
|
|
580
|
+
});
|
|
581
|
+
}
|
|
582
|
+
}),
|
|
583
|
+
label: t('spatial-uncertainty')
|
|
584
|
+
})
|
|
585
|
+
}), jsxs(Grid, {
|
|
586
|
+
container: true,
|
|
587
|
+
size: 12,
|
|
588
|
+
spacing: 2,
|
|
589
|
+
sx: {
|
|
590
|
+
alignItems: 'center',
|
|
591
|
+
justifyContent: 'flex-end'
|
|
592
|
+
},
|
|
593
|
+
children: [jsx(Grid, {
|
|
594
|
+
children: jsx(Button, {
|
|
595
|
+
onClick: handleClearForm,
|
|
596
|
+
size: "small",
|
|
597
|
+
sx: {
|
|
598
|
+
width: '136px',
|
|
599
|
+
height: '32px'
|
|
600
|
+
},
|
|
601
|
+
variant: "tertiary",
|
|
602
|
+
children: t('clear-form')
|
|
603
|
+
})
|
|
604
|
+
}), jsx(Grid, {
|
|
605
|
+
children: jsx(Button, {
|
|
606
|
+
disabled: !isValid || isPublishing,
|
|
607
|
+
onClick: handleSendForm,
|
|
608
|
+
size: "small",
|
|
609
|
+
sx: {
|
|
610
|
+
width: '136px',
|
|
611
|
+
height: '32px'
|
|
612
|
+
},
|
|
613
|
+
variant: "primary",
|
|
614
|
+
children: t('publish-form')
|
|
615
|
+
})
|
|
616
|
+
})]
|
|
617
|
+
})]
|
|
618
|
+
})]
|
|
619
|
+
});
|
|
620
|
+
};
|
|
621
|
+
var TrajksForm = function TrajksForm(props) {
|
|
622
|
+
return jsx(ReactHookFormProvider, {
|
|
623
|
+
options: Object.assign({}, defaultFormOptions, {
|
|
624
|
+
defaultValues: generateDefaultValues()
|
|
625
|
+
}),
|
|
626
|
+
children: jsx(Form, Object.assign({}, props))
|
|
627
|
+
});
|
|
628
|
+
};
|
|
629
|
+
|
|
630
|
+
var TrajksFormWrapper = function TrajksFormWrapper() {
|
|
631
|
+
var _useKNMIComponentsTra = useKNMIComponentsTranslation(),
|
|
632
|
+
t = _useKNMIComponentsTra.t;
|
|
633
|
+
var _useAuthenticationCon = useAuthenticationContext(),
|
|
634
|
+
isLoggedIn = _useAuthenticationCon.isLoggedIn;
|
|
635
|
+
if (!isLoggedIn) {
|
|
636
|
+
return jsx(AlertBanner, {
|
|
637
|
+
title: t('error-auth-login')
|
|
638
|
+
});
|
|
639
|
+
}
|
|
640
|
+
return jsx(ErrorBoundary, {
|
|
641
|
+
children: jsx(TrajksForm, {})
|
|
642
|
+
});
|
|
643
|
+
};
|
|
644
|
+
|
|
645
|
+
var TRAJKS_COMPONENT_TYPE = 'TrajksModule';
|
|
646
|
+
var componentsLookUp = function componentsLookUp(payload) {
|
|
647
|
+
var componentType = payload.componentType;
|
|
648
|
+
switch (componentType) {
|
|
649
|
+
case TRAJKS_COMPONENT_TYPE:
|
|
650
|
+
return jsx(TrajksFormWrapper, {});
|
|
651
|
+
default:
|
|
652
|
+
return null;
|
|
653
|
+
}
|
|
654
|
+
};
|
|
655
|
+
|
|
656
|
+
export { Form, KNMICOMPONENTS_NAMESPACE, TrajksForm, componentsLookUp, generateDefaultValues, knmicomponentTranslations as knmiComponentTranslations };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const requestHandlers: import("msw").HttpHandler[];
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { UseMutationResult } from '@tanstack/react-query';
|
|
2
|
+
import type { TrajksFormValues } from '../components/Trajks';
|
|
3
|
+
type MutationReturnType<T> = UseMutationResult<Headers | null, Error, T>;
|
|
4
|
+
interface PublishProductProps {
|
|
5
|
+
data: TrajksFormValues;
|
|
6
|
+
clearForm: () => void;
|
|
7
|
+
}
|
|
8
|
+
export declare const usePublishProduct: () => MutationReturnType<PublishProductProps>;
|
|
9
|
+
export {};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
declare const TRAJKS_COMPONENT_TYPE: "TrajksModule";
|
|
2
|
+
export type TrajksComponentType = typeof TRAJKS_COMPONENT_TYPE;
|
|
3
|
+
export interface ComponentsLookUpPayload {
|
|
4
|
+
componentType: TrajksComponentType;
|
|
5
|
+
id: string;
|
|
6
|
+
title?: string;
|
|
7
|
+
initialProps: unknown;
|
|
8
|
+
}
|
|
9
|
+
export declare const componentsLookUp: (payload: ComponentsLookUpPayload) => React.ReactElement;
|
|
10
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './ComponentsLookUp';
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
export interface TrajksFormValues {
|
|
2
|
+
referenceName: string;
|
|
3
|
+
lat: number | string;
|
|
4
|
+
lon: number | string;
|
|
5
|
+
releaseHeight: number | string;
|
|
6
|
+
start: string;
|
|
7
|
+
direction: string;
|
|
8
|
+
duration: number;
|
|
9
|
+
numVerticalLevels: number;
|
|
10
|
+
spatialUncertainty: boolean;
|
|
11
|
+
}
|
|
12
|
+
export declare const generateDefaultValues: () => TrajksFormValues;
|
|
13
|
+
export declare const Form: () => React.JSX.Element;
|
|
14
|
+
export declare const TrajksForm: React.FC;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const TrajksFormWrapper: React.FC;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './TrajksForm';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { Theme } from '@mui/material';
|
|
2
|
+
import type { UseFormProps } from 'react-hook-form';
|
|
3
|
+
interface KNMIComponentsThemeFormProviderProps {
|
|
4
|
+
children: React.ReactNode;
|
|
5
|
+
options?: UseFormProps;
|
|
6
|
+
theme?: Theme;
|
|
7
|
+
}
|
|
8
|
+
export declare const KNMIComponentsThemeFormProvider: React.FC<KNMIComponentsThemeFormProviderProps>;
|
|
9
|
+
export {};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import i18n from 'i18next';
|
|
2
|
+
import type { UseTranslationResponse } from 'react-i18next';
|
|
3
|
+
export declare const KNMICOMPONENTS_NAMESPACE = "KNMIComponents";
|
|
4
|
+
export declare const initKNMIComponentsI18n: () => void;
|
|
5
|
+
export declare const translateInTestsAndStories: (key: string, params?: Record<string, string | number> | undefined) => string;
|
|
6
|
+
export declare const useKNMIComponentsTranslation: () => UseTranslationResponse<typeof KNMICOMPONENTS_NAMESPACE, typeof i18n>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@opengeoweb/knmi-components",
|
|
3
|
-
"version": "19.
|
|
3
|
+
"version": "19.2.0",
|
|
4
4
|
"description": "GeoWeb knmi-components library for the opengeoweb project",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -38,6 +38,7 @@
|
|
|
38
38
|
},
|
|
39
39
|
"files": [
|
|
40
40
|
"dist",
|
|
41
|
+
"!dist/package.json",
|
|
41
42
|
"README.md",
|
|
42
43
|
"package.json"
|
|
43
44
|
]
|