'].join('');
16 |
17 | export default {
18 | inputs: common.inputs,
19 | optional_inputs: common.optional_inputs,
20 | preferredSizes: [{ w: 800, h: 600 }, { w: 1024, h: 768 }, { w: 1280, h: 1024 }],
21 |
22 | init(config, el, errorHandler) {
23 | // Render template
24 | el.innerHTML = template;
25 |
26 | // load widget common features
27 | common.init(config, el);
28 |
29 | config.features = undefined;
30 | config.properties = undefined;
31 |
32 | // Update view
33 | function redraw(data) {
34 | const table = {};
35 | const features = [];
36 | Object.keys(data).forEach((i) => {
37 | const measure = data[i];
38 | if (!table[measure.property]) {
39 | table[measure.property] = [];
40 | }
41 | table[measure.property][measure.feature] = measure;
42 | if (features.indexOf(measure.feature) === -1) {
43 | features.push(measure.feature);
44 | }
45 | });
46 |
47 | let html = '
| '; 50 | Object.keys(features).forEach((c) => { 51 | html += ` | ${features[c]} | `; 52 | }); 53 | html += '|
|---|---|---|
| ${p} | `; 56 | Object.keys(features).forEach((f) => { 57 | f = features[f]; 58 | if (table[p][f]) { 59 | html += '';
60 | const m = table[p][f];
61 | const cell = ` ${m.value} ${m.uom} `
62 | + `${moment(m.time).fromNow()} `;
63 | html += cell;
64 | } else {
65 | html += ' | '; 66 | html += '(N/A)'; 67 | } 68 | html += ' | '; 69 | }); 70 | html += '
| Result Time | '; 34 | 35 | const sortedNames = Object.keys(properties).sort(); 36 | Object.keys(sortedNames).forEach((i) => { 37 | const name = sortedNames[i]; 38 | const { uom } = properties[name]; 39 | html += `${name} (${uom}) | `; 40 | }); 41 | html += '
|---|---|
| ${ld.display(new Date(parseInt(time, 10)))} | `; 51 | Object.keys(sortedNames).forEach((j) => { 52 | html += `${values[sortedNames[j]]} | `; 53 | }); 54 | html += '
63 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
--------------------------------------------------------------------------------
/src/test/fixtures/getFeatureOfInterestResponse.xml:
--------------------------------------------------------------------------------
1 |
2 | Data Browser
64 | 65 |
47 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
--------------------------------------------------------------------------------
/doc/slides/deckjs/themes/transition/horizontal-slide.css:
--------------------------------------------------------------------------------
1 | .csstransitions.csstransforms {
2 | overflow-x: hidden;
3 | }
4 | .csstransitions.csstransforms .deck-container > .slide {
5 | -webkit-transition: -webkit-transform 500ms ease-in-out;
6 | -moz-transition: -moz-transform 500ms ease-in-out;
7 | -ms-transition: -ms-transform 500ms ease-in-out;
8 | -o-transition: -o-transform 500ms ease-in-out;
9 | transition: transform 500ms ease-in-out;
10 | }
11 | .csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide {
12 | position: absolute;
13 | top: 0;
14 | left: 0;
15 | -webkit-box-sizing: border-box;
16 | -moz-box-sizing: border-box;
17 | box-sizing: border-box;
18 | width: 100%;
19 | padding: 0 48px;
20 | }
21 | .csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .slide {
22 | position: relative;
23 | left: 0;
24 | top: 0;
25 | -webkit-transition: -webkit-transform 500ms ease-in-out, opacity 500ms ease-in-out;
26 | -moz-transition: -moz-transform 500ms ease-in-out, opacity 500ms ease-in-out;
27 | -ms-transition: -ms-transform 500ms ease-in-out, opacity 500ms ease-in-out;
28 | -o-transition: -o-transform 500ms ease-in-out, opacity 500ms ease-in-out;
29 | transition: -webkit-transform 500ms ease-in-out, opacity 500ms ease-in-out;
30 | }
31 | .csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .deck-next, .csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .deck-after {
32 | visibility: visible;
33 | -webkit-transform: translate3d(200%, 0, 0);
34 | -moz-transform: translate(200%, 0);
35 | -ms-transform: translate(200%, 0);
36 | -o-transform: translate(200%, 0);
37 | transform: translate3d(200%, 0, 0);
38 | }
39 | .csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-previous {
40 | -webkit-transform: translate3d(-200%, 0, 0);
41 | -moz-transform: translate(-200%, 0);
42 | -ms-transform: translate(-200%, 0);
43 | -o-transform: translate(-200%, 0);
44 | transform: translate3d(-200%, 0, 0);
45 | }
46 | .csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-before {
47 | -webkit-transform: translate3d(-400%, 0, 0);
48 | -moz-transform: translate(-400%, 0);
49 | -ms-transform: translate(-400%, 0);
50 | -o-transform: translate(-400%, 0);
51 | transform: translate3d(-400%, 0, 0);
52 | }
53 | .csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-next {
54 | -webkit-transform: translate3d(200%, 0, 0);
55 | -moz-transform: translate(200%, 0);
56 | -ms-transform: translate(200%, 0);
57 | -o-transform: translate(200%, 0);
58 | transform: translate3d(200%, 0, 0);
59 | }
60 | .csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-after {
61 | -webkit-transform: translate3d(400%, 0, 0);
62 | -moz-transform: translate(400%, 0);
63 | -ms-transform: translate(400%, 0);
64 | -o-transform: translate(400%, 0);
65 | transform: translate3d(400%, 0, 0);
66 | }
67 | .csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-before .slide, .csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-previous .slide {
68 | visibility: visible;
69 | }
70 | .csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-child-current {
71 | -webkit-transform: none;
72 | -moz-transform: none;
73 | -ms-transform: none;
74 | -o-transform: none;
75 | transform: none;
76 | }
77 |
--------------------------------------------------------------------------------
/src/js/widget/timechart.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-param-reassign */
2 | import dataAccess from '../sos-data-access';
3 | import ld from '../locale-date';
4 | import common from '../widget-common';
5 |
6 | import $ from '../jQuery-globals';
7 |
8 | import 'flot/lib/jquery.mousewheel';
9 | import 'flot/source/jquery.canvaswrapper';
10 | import 'flot/source/jquery.colorhelpers';
11 | import 'flot/source/jquery.flot';
12 | import 'flot/source/jquery.flot.uiConstants';
13 |
14 | import 'flot-plugins/dist/source/misc/jquery.flot.tooltip';
15 |
16 | const flotReq = require.context('../../../node_modules/flot/source/', true, /flot.*\.js$/);
17 | flotReq.keys().forEach(flotReq);
18 |
19 | // TODO readd legend
20 | // TODO readd pan and zoom
21 |
22 | const template = [
23 | '',
29 | ].join('');
30 |
31 | const timechart = {
32 | inputs: common.inputs.concat(['features', 'properties', 'time_start', 'time_end', 'title']),
33 | optional_inputs: common.optional_inputs,
34 | preferredSizes: [{ w: 650, h: 530 }],
35 |
36 | init(config, el, errorHandler) {
37 | // Render template
38 | el.innerHTML = template;
39 | el.querySelector('h3').innerHTML = config.title;
40 | const graph = el.querySelector('.graph');
41 |
42 | // load widget common features
43 | common.init(config, el);
44 |
45 | function redraw(data) {
46 | const series = {};
47 | Object.keys(data).forEach((i) => {
48 | const measure = data[i];
49 | const label = `${measure.property} (${measure.feature})`;
50 | if (!series[label]) {
51 | series[label] = {
52 | data: [],
53 | label,
54 | };
55 | }
56 | series[label].data.push([measure.time.getTime() / 1000, measure.value]);
57 | });
58 |
59 | // Sort data by time, convert to array
60 | const arr = [];
61 | Object.keys(series).forEach((k) => {
62 | series[k].data.sort((a, b) => b[0] - a[0]);
63 | arr.push(series[k]);
64 | });
65 |
66 | const options = {
67 | xaxis: {
68 | mode: 'time',
69 | timezone: ld.utc() ? 'UTC' : 'browser',
70 | },
71 | yaxis: {
72 | zoomRange: false,
73 | panRange: false,
74 | },
75 | grid: {
76 | hoverable: true,
77 | },
78 | legend: {
79 | container: el.querySelector('.legend'),
80 | },
81 | series: {
82 | lines: {
83 | show: true,
84 | },
85 | points: {
86 | show: true,
87 | },
88 | },
89 | tooltip: true,
90 | tooltipOpts: {
91 | content: data.length ? `[%x] %s: %y.2 ${data[0].uom}` : '',
92 | },
93 | zoom: {
94 | interactive: true,
95 | },
96 | pan: {
97 | interactive: true,
98 | },
99 | };
100 |
101 | if (config.colors) {
102 | options.colors = config.colors;
103 | }
104 |
105 | const plot = $.plot(graph, arr, options);
106 |
107 | if (config.callback) {
108 | config.callback(plot, graph);
109 | }
110 | }
111 |
112 | // Setup SOS data access
113 | const data = dataAccess(config, redraw, errorHandler);
114 | data.read();
115 | },
116 | };
117 |
118 | export default timechart;
119 |
--------------------------------------------------------------------------------
/src/js/widget/progressbar.css:
--------------------------------------------------------------------------------
1 | .progressbar.widget .progress {
2 | height: 85px;
3 | width: 90%;
4 | margin: 0 auto;
5 | padding-left: 12px;
6 | padding-right: 12px;
7 | }
8 |
9 | .progressbar.widget .background-bar {
10 | text-align: left;
11 | margin-top: 30px;
12 | background: #e9e5e2;
13 | background-image: -webkit-gradient(linear, left top, left bottom, from(#e1ddd9), to(#e9e5e2));
14 | background-image: -webkit-linear-gradient(top, #e1ddd9, #e9e5e2);
15 | background-image: -moz-linear-gradient(top, #e1ddd9, #e9e5e2);
16 | background-image: -ms-linear-gradient(top, #e1ddd9, #e9e5e2);
17 | background-image: -o-linear-gradient(top, #e1ddd9, #e9e5e2);
18 | background-image: linear-gradient(top, #e1ddd9, #e9e5e2);
19 | height: 20px;
20 | border-radius: 10px;
21 | -moz-box-shadow: 0 1px 0 #bebbb9 inset, 0 1px 0 #fcfcfc;
22 | -webkit-box-shadow: 0 1px 0 #bebbb9 inset, 0 1px 0 #fcfcfc;
23 | box-shadow: 0 1px 0 #bebbb9 inset, 0 1px 0 #fcfcfc;
24 | }
25 | .progressbar.widget .bar {
26 | width: 10px;
27 | height: 18px;
28 | position: absolute;
29 | border-radius: 10px;
30 | -moz-box-shadow: 0 1px 0 #fcfcfc inset, 0 1px 0 #bebbb9;
31 | -webkit-box-shadow: 0 1px 0 #fcfcfc inset, 0 1px 0 #bebbb9;
32 | box-shadow: 0 1px 0 #fcfcfc inset, 0 1px 0 #bebbb9;
33 | }
34 | .progressbar.widget .min {
35 | position: relative;
36 | top: -20px;
37 | float: left;
38 | width: 0;
39 | }
40 | .progressbar.widget .max {
41 | position: relative;
42 | top: -20px;
43 | float: right;
44 | }
45 | .progressbar.widget .value {
46 | position: relative;
47 | top: 25px;
48 | text-align: right;
49 | }
50 | .progressbar.widget .pink {
51 | background-color: #f674a4;
52 | background-image: -webkit-gradient(linear, left top, left bottom, from(#f674a4), to(#e06995));
53 | background-image: -webkit-linear-gradient(top, #f674a4, #e06995);
54 | background-image: -moz-linear-gradient(top, #f674a4, #e06995);
55 | background-image: -ms-linear-gradient(top, #f674a4, #e06995);
56 | background-image: -o-linear-gradient(top, #f674a4, #e06995);
57 | background-image: linear-gradient(top, #f674a4, #e06995);
58 | }
59 | .progressbar.widget .yellow {
60 | background-color: #f0bb4b;
61 | background-image: -webkit-gradient(linear, left top, left bottom, from(#f0bb4b), to(#d9aa44));
62 | background-image: -webkit-linear-gradient(top, #f0bb4b, #d9aa44);
63 | background-image: -moz-linear-gradient(top, #f0bb4b, #d9aa44);
64 | background-image: -ms-linear-gradient(top, #f0bb4b, #d9aa44);
65 | background-image: -o-linear-gradient(top, #f0bb4b, #d9aa44);
66 | background-image: linear-gradient(top, #f0bb4b, #d9aa44);
67 | }
68 | .progressbar.widget .green {
69 | background-color: #a1ce5b;
70 | background-image: -webkit-gradient(linear, left top, left bottom, from(#a1ce5b), to(#91ba52));
71 | background-image: -webkit-linear-gradient(top, #a1ce5b, #91ba52);
72 | background-image: -moz-linear-gradient(top, #a1ce5b, #91ba52);
73 | background-image: -ms-linear-gradient(top, #a1ce5b, #91ba52);
74 | background-image: -o-linear-gradient(top, #a1ce5b, #91ba52);
75 | background-image: linear-gradient(top, #a1ce5b, #91ba52);
76 | }
77 | .progressbar.widget .blue {
78 | background-color: #66b3cc;
79 | background-image: -webkit-gradient(linear, left top, left bottom, from(#66b3cc), to(#5da3ba));
80 | background-image: -webkit-linear-gradient(top, #66b3cc, #5da3ba);
81 | background-image: -moz-linear-gradient(top, #66b3cc, #5da3ba);
82 | background-image: -ms-linear-gradient(top, #66b3cc, #5da3ba);
83 | background-image: -o-linear-gradient(top, #66b3cc, #5da3ba);
84 | background-image: linear-gradient(top, #66b3cc, #5da3ba);
85 | }
86 |
--------------------------------------------------------------------------------
/doc/slides/deckjs/themes/transition/vertical-slide.css:
--------------------------------------------------------------------------------
1 | .csstransitions.csstransforms .deck-container {
2 | overflow-y: hidden;
3 | }
4 | .csstransitions.csstransforms .deck-container > .slide {
5 | -webkit-transition: -webkit-transform 500ms ease-in-out;
6 | -moz-transition: -moz-transform 500ms ease-in-out;
7 | -ms-transition: -ms-transform 500ms ease-in-out;
8 | -o-transition: -o-transform 500ms ease-in-out;
9 | transition: transform 500ms ease-in-out;
10 | }
11 | .csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide {
12 | position: absolute;
13 | top: 0;
14 | left: 0;
15 | -webkit-box-sizing: border-box;
16 | -moz-box-sizing: border-box;
17 | box-sizing: border-box;
18 | width: 100%;
19 | padding: 0 48px;
20 | }
21 | .csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .slide {
22 | position: relative;
23 | left: 0;
24 | top: 0;
25 | -webkit-transition: -webkit-transform 500ms ease-in-out, opacity 500ms ease-in-out;
26 | -moz-transition: -moz-transform 500ms ease-in-out, opacity 500ms ease-in-out;
27 | -ms-transition: -ms-transform 500ms ease-in-out, opacity 500ms ease-in-out;
28 | -o-transition: -o-transform 500ms ease-in-out, opacity 500ms ease-in-out;
29 | transition: -webkit-transform 500ms ease-in-out, opacity 500ms ease-in-out;
30 | }
31 | .csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .deck-next, .csstransitions.csstransforms .deck-container:not(.deck-menu) > .slide .deck-after {
32 | visibility: visible;
33 | -webkit-transform: translate3d(0, 1600px, 0);
34 | -moz-transform: translate(0, 1600px);
35 | -ms-transform: translate(0, 1600px);
36 | -o-transform: translate(0, 1600px);
37 | transform: translate3d(0, 1600px, 0);
38 | }
39 | .csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-previous {
40 | -webkit-transform: translate3d(0, -200%, 0);
41 | -moz-transform: translate(0, -200%);
42 | -ms-transform: translate(0, -200%);
43 | -o-transform: translate(0, -200%);
44 | transform: translate3d(0, -200%, 0);
45 | }
46 | .csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-before {
47 | -webkit-transform: translate3d(0, -400%, 0);
48 | -moz-transform: translate(0, -400%);
49 | -ms-transform: translate(0, -400%);
50 | -o-transform: translate(0, -400%);
51 | transform: translate3d(0, -400%, 0);
52 | }
53 | .csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-next {
54 | -webkit-transform: translate3d(0, 200%, 0);
55 | -moz-transform: translate(0, 200%);
56 | -ms-transform: translate(0, 200%);
57 | -o-transform: translate(0, 200%);
58 | transform: translate3d(0, 200%, 0);
59 | }
60 | .csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-after {
61 | -webkit-transform: translate3d(0, 400%, 0);
62 | -moz-transform: translate(0, 400%);
63 | -ms-transform: translate(0, 400%);
64 | -o-transform: translate(0, 400%);
65 | transform: translate3d(0, 400%, 0);
66 | }
67 | .csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-before .slide, .csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-previous .slide {
68 | visibility: visible;
69 | }
70 | .csstransitions.csstransforms .deck-container:not(.deck-menu) > .deck-child-current {
71 | -webkit-transform: none;
72 | -moz-transform: none;
73 | -ms-transform: none;
74 | -o-transform: none;
75 | transform: none;
76 | }
77 | .csstransitions.csstransforms .deck-prev-link {
78 | left: auto;
79 | right: 8px;
80 | top: 59px;
81 | -webkit-transform: rotate(90deg);
82 | -moz-transform: rotate(90deg);
83 | -ms-transform: rotate(90deg);
84 | -o-transform: rotate(90deg);
85 | transform: rotate(90deg);
86 | }
87 | .csstransitions.csstransforms .deck-next-link {
88 | top: 99px;
89 | -webkit-transform: rotate(90deg);
90 | -moz-transform: rotate(90deg);
91 | -ms-transform: rotate(90deg);
92 | -o-transform: rotate(90deg);
93 | transform: rotate(90deg);
94 | }
95 |
--------------------------------------------------------------------------------
/doc/slides/img/s_logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
63 |
--------------------------------------------------------------------------------
/src/assets/img/s_logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
63 |
--------------------------------------------------------------------------------
/src/assets/examples/meteo.apb.es/TorreControl.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 | Sirena
48 |
49 |
72 |
50 |
69 |
51 |
68 |
52 |
67 |
53 |
58 |
54 |
55 |
56 |
57 |
59 |
62 |
60 |
61 |
63 |
66 |
64 |
65 |
70 |
71 |
47 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
--------------------------------------------------------------------------------
/src/assets/img/gridtile.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/src/js/sos-data-access.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-nested-ternary, camelcase */
2 | import SOS, { isArray } from './SOS';
3 |
4 | const propertyNames = {};
5 | const waitingDescribeResponse = {};
6 | const propertyCallbackQueue = {};
7 |
8 | export default (config, redraw, errorHandler) => {
9 | SOS.setUrl(config.service);
10 |
11 | function getPropertyName(procedure, id, callback, context) {
12 | if (!propertyNames[procedure]) {
13 | // Queue callback call
14 | if (!propertyCallbackQueue[procedure]) {
15 | propertyCallbackQueue[procedure] = [];
16 | }
17 |
18 | propertyCallbackQueue[procedure].push({
19 | callback,
20 | id,
21 | context,
22 | });
23 |
24 | if (!waitingDescribeResponse[procedure]) {
25 | waitingDescribeResponse[procedure] = true;
26 | // Trigger a DescribeSensor, cache all property names for this procedure
27 | SOS.describeSensor(procedure, (description) => {
28 | let properties = Object.prototype.hasOwnProperty.call(description, 'ProcessModel')
29 | ? description.ProcessModel.outputs.OutputList.output
30 | : description.System.outputs.OutputList.output;
31 | properties = properties instanceof Array ? properties : [properties];
32 | const types = ['Quantity', 'Count', 'Boolean', 'Category', 'Text', 'ObservableProperty'];
33 |
34 | const names = [];
35 | Object.values(properties).forEach((property) => {
36 | Object.values(types).forEach((type) => {
37 | if (Object.prototype.hasOwnProperty.call(property, type)) {
38 | // eslint-disable-next-line no-param-reassign
39 | property.id = property[type].definition;
40 | }
41 | });
42 | names[property.id] = property.name;
43 | });
44 | propertyNames[procedure] = names;
45 |
46 | // Clear propertyCallbackQueue
47 | while (propertyCallbackQueue[procedure].length) {
48 | const elem = propertyCallbackQueue[procedure].shift();
49 | elem.callback.call(undefined, propertyNames[procedure][elem.id], elem.context);
50 | }
51 | }, errorHandler);
52 | }
53 | } else {
54 | callback(propertyNames[procedure][id], context);
55 | }
56 | }
57 |
58 | function parse(observations) {
59 | if (!observations.length) {
60 | redraw([]);
61 | }
62 |
63 | // Get tabular data from observations
64 | const data = [];
65 |
66 | function addObservation(property, observation) {
67 | const foi = observation.featureOfInterest;
68 | data.push({
69 | time: new Date(observation.resultTime),
70 | value: Object.prototype.hasOwnProperty.call(observation.result, 'value') ? observation.result.value : observation.result,
71 | feature: foi.name ? foi.name.value : (foi.identifier ? foi.identifier.value : foi),
72 | property,
73 | uom: Object.prototype.hasOwnProperty.call(observation.result, 'uom') ? observation.result.uom : '(N/A)',
74 | });
75 | if (data.length === observations.length) {
76 | redraw(data);
77 | }
78 | }
79 | Object.values(observations).forEach((observation) => {
80 | getPropertyName(observation.procedure, observation.observableProperty,
81 | addObservation, observation);
82 | });
83 | }
84 |
85 | function read() {
86 | const {
87 | offering, feature, property, features, properties, time_start, time_end,
88 | } = config;
89 | const getFeatures = feature
90 | ? [feature]
91 | : isArray(features)
92 | ? features
93 | : features
94 | ? JSON.parse(features)
95 | : undefined;
96 | const getProperties = property
97 | ? [property]
98 | : isArray(properties)
99 | ? properties
100 | : properties
101 | ? JSON.parse(properties)
102 | : undefined;
103 | const time = (time_start && time_end) ? [time_start, time_end] : 'latest';
104 | SOS.getObservation(offering, getFeatures, getProperties, time, parse, errorHandler);
105 | }
106 |
107 | return {
108 | read,
109 | };
110 | };
111 |
--------------------------------------------------------------------------------
/src/assets/wizard/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 | Torre Control
48 |
49 |
89 |
50 |
62 |
51 |
61 |
52 |
54 | P4-DIC SUD: Edifici PIF ZAL Prat
53 |
55 |
56 |
57 |
58 |
59 |
60 |
63 |
75 |
64 |
74 |
65 |
67 | 02-SIRENA: Balisa moll nou Contradic
66 |
68 |
69 |
70 |
71 |
72 |
73 |
76 |
88 |
77 |
87 |
78 |
80 | 03-ADOSSAT: BOCANA NORD
79 |
81 |
82 |
83 |
84 |
85 |
86 |
35 |
37 |
38 |
39 |
40 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
--------------------------------------------------------------------------------
/src/js/SensorWidget.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-param-reassign */
2 | import i18n from './i18n';
3 | import './SensorWidgets.css';
4 |
5 | // eslint-disable-next-line camelcase,no-undef
6 | __webpack_public_path__ = document.currentScript.src.replace(/[^/]*$/, '');
7 |
8 | const instances = {};
9 | // eslint-disable-next-line no-plusplus
10 | const uid = ((i) => () => `SensorWidgetTarget-${++i}`)(0);
11 |
12 | export default function SensorWidget(name, config, renderTo) {
13 | const target = renderTo || document.body;
14 |
15 | function errorHandler(message, url, request) {
16 | let text = '';
17 | if (url) {
18 | text = `[${url}] `;
19 | }
20 | if (request && request.request) {
21 | text += `${request.request}: `;
22 | }
23 | if (message) {
24 | text += message;
25 | }
26 | target.innerHTML = `
41 |
91 |
42 |
90 |
43 |
89 |
44 |
55 |
45 |
53 |
54 |
46 |
48 | Widget Configuration Form
47 |
49 |
51 |
52 |
56 |
88 |
57 |
64 |
58 |
60 | Widget View
59 |
61 |
62 |
63 |
65 |
87 |
66 |
68 | Take Away
67 |
69 |
74 |
86 |
75 |
85 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 | ${text}
`;
27 | }
28 |
29 | function checkConfig(widgetName, widgetInputs, widgetConfig) {
30 | const missing = [];
31 |
32 | Object.values(widgetInputs).forEach((input) => {
33 | if (!Object.prototype.hasOwnProperty.call(widgetConfig, input)) {
34 | missing.push(input);
35 | }
36 | });
37 | if (missing.length) {
38 | errorHandler(i18n.t("The '{name}' widget is missing some mandatory parameters: ", { name: widgetName }) + missing.join(', '));
39 | }
40 | return !missing.length;
41 | }
42 |
43 | if (name && config) {
44 | if (!target.id) target.id = uid();
45 |
46 | if (!config.service) {
47 | config.service = '/52n-sos/sos/json';
48 | }
49 |
50 | import(/* webpackChunkName: "widget-[request]" */ `./widget/${name}.js`)
51 | .then(({ default: widget }) => {
52 | target.innerHTML = '';
53 | if (Object.prototype.hasOwnProperty.call(instances, target.id) && instances[target.id] && Object.prototype.hasOwnProperty.call(instances[target.id], 'destroy')) {
54 | console.debug(`Destroying previous widget on ElementId=${target.id}`);
55 | instances[target.id].destroy();
56 | delete instances[target.id];
57 | }
58 | if (checkConfig(name, widget.inputs, config)) {
59 | console.debug(`Creating new ${name} widget on ElementId=${target.id}`);
60 | instances[target.id] = widget.init(config, target, errorHandler);
61 | }
62 | }).catch((cause) => {
63 | console.error(cause);
64 | errorHandler(i18n.t("Widget '{name}' cannot be found, or there was an error instantiating it", { name }));
65 | });
66 | } else if (!name) {
67 | errorHandler(i18n.t('No widget name specified'));
68 | }
69 | return {
70 | name,
71 | config,
72 | renderTo: target,
73 | inspect(cb) {
74 | import(/* webpackChunkName: "widget-[request]" */ `./widget/${name}.js`)
75 | .then(({ default: widget }) => {
76 | cb.call(this, widget.inputs, widget.optional_inputs, widget.preferredSizes);
77 | });
78 | },
79 | url() {
80 | function relPathToAbs(pathname) {
81 | const output = [];
82 | pathname.replace(/^(\.\.?(\/|$))+/, '')
83 | .replace(/\/(\.(\/|$))+/g, '/')
84 | .replace(/\/\.\.$/, '/../')
85 | .replace(/\/?[^/]*/g, (p) => {
86 | if (p === '/..') {
87 | output.pop();
88 | } else {
89 | output.push(p);
90 | }
91 | });
92 | return output.join('').replace(/^\//, pathname.charAt(0) === '/' ? '/' : '');
93 | }
94 | let url = `${relPathToAbs('../widget/')}?`;
95 | url += `name=${encodeURIComponent(name)}&`;
96 | url += Object.keys(config).map((key) => {
97 | let val = config[key];
98 | if (typeof config[key] === 'object') {
99 | val = JSON.stringify(config[key]);
100 | }
101 | return `${key}=${encodeURIComponent(val)}`;
102 | }).join('&');
103 | url += `&lang=${i18n.getLang()}`;
104 | return url;
105 | },
106 | iframe(w, h) {
107 | w = w || '100%';
108 | h = h || '100%';
109 | return ``;
110 | },
111 | javascript() {
112 | return `SensorWidget('${name}', ${JSON.stringify(config, null, 3)}, document.getElementById('${name}-container'));`;
113 | },
114 | };
115 | }
116 |
--------------------------------------------------------------------------------
/doc/slides/deckjs/themes/style/neon.css:
--------------------------------------------------------------------------------
1 | .deck-container {
2 | font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
3 | font-size: 1.75em;
4 | color: #aaa;
5 | background: #000;
6 | }
7 | .deck-container .slide {
8 | background: #000;
9 | }
10 | .deck-container .slide h1 {
11 | color: #0af;
12 | font-weight: normal;
13 | font-weight: 100;
14 | text-shadow: 0 0 50px #0af, 0 0 3px #fff;
15 | }
16 | .deck-container .slide h2 {
17 | color: #af0;
18 | border-bottom-color: #ccc;
19 | font-weight: normal;
20 | font-weight: 100;
21 | text-shadow: 0 0 15px #af0, 0 0 2px #fff;
22 | border-bottom: 1px solid #333;
23 | }
24 | .deck-container .slide h3 {
25 | color: #fff;
26 | font-weight: normal;
27 | font-weight: 100;
28 | text-shadow: 0 0 10px #fff, 0 0 2px #fff;
29 | }
30 | .deck-container .slide pre {
31 | border-color: #333;
32 | }
33 | .deck-container .slide pre code {
34 | color: #fff;
35 | }
36 | .deck-container .slide code {
37 | color: #f0a;
38 | }
39 | .deck-container .slide blockquote {
40 | font-size: 2em;
41 | padding: 1em 2em;
42 | color: #fff;
43 | border-left: 5px solid #fff;
44 | }
45 | .deck-container .slide blockquote p {
46 | margin: 0;
47 | }
48 | .deck-container .slide blockquote cite {
49 | font-size: .5em;
50 | font-style: normal;
51 | font-weight: normal;
52 | font-weight: 100;
53 | color: #aaa;
54 | text-shadow: 0 0 15px #fff, 0 0 2px #fff;
55 | }
56 | .deck-container .slide ::-moz-selection {
57 | background: #a0f;
58 | }
59 | .deck-container .slide ::selection {
60 | background: #a0f;
61 | }
62 | .deck-container .slide a, .deck-container .slide a:hover, .deck-container .slide a:focus, .deck-container .slide a:active, .deck-container .slide a:visited {
63 | color: #f0a;
64 | text-decoration: none;
65 | }
66 | .deck-container .slide a:hover, .deck-container .slide a:focus {
67 | text-decoration: underline;
68 | }
69 | .deck-container .deck-prev-link, .deck-container .deck-next-link {
70 | background: #f0a;
71 | text-shadow: 0 0 3px #fff;
72 | }
73 | .deck-container .deck-prev-link, .deck-container .deck-prev-link:hover, .deck-container .deck-prev-link:focus, .deck-container .deck-prev-link:active, .deck-container .deck-prev-link:visited, .deck-container .deck-next-link, .deck-container .deck-next-link:hover, .deck-container .deck-next-link:focus, .deck-container .deck-next-link:active, .deck-container .deck-next-link:visited {
74 | color: #fff;
75 | }
76 | .deck-container .deck-prev-link:hover, .deck-container .deck-prev-link:focus, .deck-container .deck-next-link:hover, .deck-container .deck-next-link:focus {
77 | text-decoration: none;
78 | }
79 | .boxshadow .deck-container .deck-prev-link:hover, .boxshadow .deck-container .deck-prev-link:focus, .boxshadow .deck-container .deck-next-link:hover, .boxshadow .deck-container .deck-next-link:focus {
80 | -webkit-box-shadow: 0 0 20px #f0a, 0 0 5px #fff;
81 | -moz-box-shadow: 0 0 20px #f0a, 0 0 5px #fff;
82 | box-shadow: 0 0 20px #f0a, 0 0 5px #fff;
83 | }
84 | .deck-container > .slide .deck-before, .deck-container > .slide .deck-previous {
85 | opacity: 0.4;
86 | }
87 | .deck-container > .slide .deck-before:not(.deck-child-current) .deck-before, .deck-container > .slide .deck-before:not(.deck-child-current) .deck-previous, .deck-container > .slide .deck-previous:not(.deck-child-current) .deck-before, .deck-container > .slide .deck-previous:not(.deck-child-current) .deck-previous {
88 | opacity: 1;
89 | }
90 | .deck-container > .slide .deck-child-current {
91 | opacity: 1;
92 | }
93 | .deck-container .deck-status {
94 | font-size: 0.6666em;
95 | }
96 | .deck-container .goto-form {
97 | background: #000;
98 | border: 1px solid #f0a;
99 | }
100 | .deck-container .goto-form label {
101 | color: #fff;
102 | }
103 | .deck-container.deck-menu .slide {
104 | background: #333;
105 | }
106 | .deck-container.deck-menu .deck-current {
107 | background: #444;
108 | }
109 | .boxshadow .deck-container.deck-menu .deck-current {
110 | background: #000;
111 | -webkit-box-shadow: 0 0 20px #f0a, 0 0 5px #fff;
112 | -moz-box-shadow: 0 0 20px #f0a, 0 0 5px #fff;
113 | box-shadow: 0 0 20px #f0a, 0 0 5px #fff;
114 | }
115 | .no-touch .deck-container.deck-menu .slide:hover {
116 | background: #444;
117 | }
118 | .no-touch.boxshadow .deck-container.deck-menu .slide:hover {
119 | background: #000;
120 | -webkit-box-shadow: 0 0 20px #f0a, 0 0 5px #fff;
121 | -moz-box-shadow: 0 0 20px #f0a, 0 0 5px #fff;
122 | box-shadow: 0 0 20px #f0a, 0 0 5px #fff;
123 | }
124 |
--------------------------------------------------------------------------------
/doc/slides/deckjs/extensions/hash/deck.hash.js:
--------------------------------------------------------------------------------
1 | /*!
2 | Deck JS - deck.hash
3 | Copyright (c) 2011 Caleb Troughton
4 | Dual licensed under the MIT license and GPL license.
5 | https://github.com/imakewebthings/deck.js/blob/master/MIT-license.txt
6 | https://github.com/imakewebthings/deck.js/blob/master/GPL-license.txt
7 | */
8 |
9 | /*
10 | This module adds deep linking to individual slides, enables internal links
11 | to slides within decks, and updates the address bar with the hash as the user
12 | moves through the deck. A permalink anchor is also updated. Standard themes
13 | hide this link in browsers that support the History API, and show it for
14 | those that do not. Slides that do not have an id are assigned one according to
15 | the hashPrefix option. In addition to the on-slide container state class
16 | kept by core, this module adds an on-slide state class that uses the id of each
17 | slide.
18 | */
19 | (function ($, deck, window, undefined) {
20 | var $d = $(document),
21 | $window = $(window),
22 |
23 | /* Collection of internal fragment links in the deck */
24 | $internals,
25 |
26 | /*
27 | Internal only function. Given a string, extracts the id from the hash,
28 | matches it to the appropriate slide, and navigates there.
29 | */
30 | goByHash = function(str) {
31 | var id = str.substr(str.indexOf("#") + 1),
32 | slides = $[deck]('getSlides');
33 |
34 | $.each(slides, function(i, $el) {
35 | if ($el.attr('id') === id) {
36 | $[deck]('go', i);
37 | return false;
38 | }
39 | });
40 |
41 | // If we don't set these to 0 the container scrolls due to hashchange
42 | $[deck]('getContainer').scrollLeft(0).scrollTop(0);
43 | };
44 |
45 | /*
46 | Extends defaults/options.
47 |
48 | options.selectors.hashLink
49 | The element matching this selector has its href attribute updated to
50 | the hash of the current slide as the user navigates through the deck.
51 |
52 | options.hashPrefix
53 | Every slide that does not have an id is assigned one at initialization.
54 | Assigned ids take the form of hashPrefix + slideIndex, e.g., slide-0,
55 | slide-12, etc.
56 |
57 | options.preventFragmentScroll
58 | When deep linking to a hash of a nested slide, this scrolls the deck
59 | container to the top, undoing the natural browser behavior of scrolling
60 | to the document fragment on load.
61 | */
62 | $.extend(true, $[deck].defaults, {
63 | selectors: {
64 | hashLink: '.deck-permalink'
65 | },
66 |
67 | hashPrefix: 'slide-',
68 | preventFragmentScroll: true
69 | });
70 |
71 |
72 | $d.bind('deck.init', function() {
73 | var opts = $[deck]('getOptions');
74 | $internals = $(),
75 | slides = $[deck]('getSlides');
76 |
77 | $.each(slides, function(i, $el) {
78 | var hash;
79 |
80 | /* Hand out ids to the unfortunate slides born without them */
81 | if (!$el.attr('id') || $el.data('deckAssignedId') === $el.attr('id')) {
82 | $el.attr('id', opts.hashPrefix + i);
83 | $el.data('deckAssignedId', opts.hashPrefix + i);
84 | }
85 |
86 | hash ='#' + $el.attr('id');
87 |
88 | /* Deep link to slides on init */
89 | if (hash === window.location.hash) {
90 | $[deck]('go', i);
91 | }
92 |
93 | /* Add internal links to this slide */
94 | $internals = $internals.add('a[href="' + hash + '"]');
95 | });
96 |
97 | if (!Modernizr.hashchange) {
98 | /* Set up internal links using click for the poor browsers
99 | without a hashchange event. */
100 | $internals.unbind('click.deckhash').bind('click.deckhash', function(e) {
101 | goByHash($(this).attr('href'));
102 | });
103 | }
104 |
105 | /* Set up first id container state class */
106 | if (slides.length) {
107 | $[deck]('getContainer').addClass(opts.classes.onPrefix + $[deck]('getSlide').attr('id'));
108 | };
109 | })
110 | /* Update permalink, address bar, and state class on a slide change */
111 | .bind('deck.change', function(e, from, to) {
112 | var hash = '#' + $[deck]('getSlide', to).attr('id'),
113 | hashPath = window.location.href.replace(/#.*/, '') + hash,
114 | opts = $[deck]('getOptions'),
115 | osp = opts.classes.onPrefix,
116 | $c = $[deck]('getContainer');
117 |
118 | $c.removeClass(osp + $[deck]('getSlide', from).attr('id'));
119 | $c.addClass(osp + $[deck]('getSlide', to).attr('id'));
120 |
121 | $(opts.selectors.hashLink).attr('href', hashPath);
122 | if (Modernizr.history) {
123 | window.history.replaceState({}, "", hashPath);
124 | }
125 | });
126 |
127 | /* Deals with internal links in modern browsers */
128 | $window.bind('hashchange.deckhash', function(e) {
129 | if (e.originalEvent && e.originalEvent.newURL) {
130 | goByHash(e.originalEvent.newURL);
131 | }
132 | else {
133 | goByHash(window.location.hash);
134 | }
135 | })
136 | /* Prevent scrolling on deep links */
137 | .bind('load', function() {
138 | if ($[deck]('getOptions').preventFragmentScroll) {
139 | $[deck]('getContainer').scrollLeft(0).scrollTop(0);
140 | }
141 | });
142 | })(jQuery, 'deck', this);
--------------------------------------------------------------------------------
/src/assets/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
88 |
89 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
--------------------------------------------------------------------------------
/src/test/XML.test.js:
--------------------------------------------------------------------------------
1 | import { expect } from 'chai';
2 | import XML from '../js/XML';
3 |
4 | import getLatestObservationRequest from './fixtures/getLatestObservationsRequest.xml';
5 |
6 | const removeWhiteSpace = (str) => str.replace(/\s+/g, ' ').replace(/>[\t ]+<').trim();
7 |
8 | describe('XML', () => {
9 | describe('#read()', () => {
10 | it('should read simple XML', () => {
11 | // GIVEN
12 | const givenXml = '
90 | 
91 |
99 |
100 |
101 |
91 | Sensor Widgets
92 |Configurable graphical components for your SOS sensor data.
93 |100% Javascript. Extensible. MIT licensed.
94 |95 | 96 | Build your own » 97 |
98 |