This repository has been archived by the owner on Apr 1, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
119 lines (108 loc) · 5.92 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<script src="plot-converter.dev.js"></script>
<script src="http://localhost:4201/runtime.js" defer></script>
<script src="http://localhost:4201/polyfills-es5.js" nomodule defer></script>
<script src="http://localhost:4201/polyfills.js" defer></script>
<script src="http://localhost:4201/styles.js" defer></script>
<script src="http://localhost:4201/scripts.js" defer></script>
<script src="http://localhost:4201/vendor.js" defer></script>
<script src="http://localhost:4201/main.js" defer></script>
</head>
<body>
<h1>Test Plot JSON converter</h1>
<table style="width: 100%">
<tr>
<td>
<button onclick="doConversion();">Convert</button> <label><input type="checkbox" id="gasmalObjects"> Convert gasmallen as objects, not polygons</label>
<p id="message" style="border: 1px solid black; padding: 2px; font-weight: bold">...</p>
<p>
<script>
function doConversion() {
console.clear();
const input = document.getElementById('input').value;
const convertGasMalObjects = document.getElementById('gasmalObjects').checked;
const result = PlotConverter.convert(input, console.log, convertGasMalObjects);
console.log(result);
document.getElementById('message').innerText = result.message;
const outputEl = document.getElementById('output');
const testEl = document.getElementsByTagName('lcms-test')[0];
if (!result.succeeded) {
outputEl.value = 'Error converting JSON: ' + result.message;
testEl.setAttribute('load-geo-json', '[]');
} else {
outputEl.value = result.output;
testEl.setAttribute('load-geo-json', result.output);
}
}
window.addEventListener('load', () => {
console.log(PlotConverter.hello());
const testdata = [
'test',
'boog',
'boog1',
'ellipse',
'cirkels',
'curve',
'lijnen',
'pijlen',
'polylijn',
'rechthoeken',
'schets',
'symbolen',
'tekst',
'vuurhaard',
'sectormal',
'gasmallen',
'raster',
'calamiteitenroute',
'Legenda',
];
const selected = window.sessionStorage.getItem('testfile') || testdata[0];
const select = document.getElementById('testfiles');
testdata.forEach(t => {
const option = document.createElement('option');
option.value = t;
option.innerText = t;
if (t === selected) {
option.selected = 'selected';
}
select.append(option);
});
loadfile();
/* fetch(`testdata/${selected}.json`).then(r => r.text().then(text => {
document.getElementById('input').value = text;
doConversion();
}));*/
});
function loadfile() {
const selected = document.getElementById('testfiles').value;
window.sessionStorage.setItem('testfile', selected);
fetch(`testdata/${selected}.json`).then(r => r.text().then(text => {
document.getElementById('input').value = text;
doConversion();
}));
}
</script>
</p>
<p>
Input JSON:<br>
<p><select id="testfiles" onchange="loadfile();"></select></p>
<textarea id="input" cols="80" rows="10"></textarea>
</p>
<textarea readonly id="output" cols="80" rows="10"></textarea>
</td>
<td style="width: 100%">
Run <tt>npm run start-elements</tt> in the <tt>lcms-plot</tt> project to see the map with the result.
<lcms-test></lcms-test>
<div style="position: relative; margin: 20px; width: calc(95% - 1px); height: 450px; border: 1px solid black">
<lcms-situation-view asset-prefix="http://localhost:4201/"></lcms-situation-view>
</div>
</td>
</tr>
</table>
</body>
</html>