diff options
| author | Andrew Harvey <andrew@alantgeo.com.au> | 2021-07-02 19:02:09 +1000 |
|---|---|---|
| committer | Andrew Harvey <andrew@alantgeo.com.au> | 2021-07-02 19:02:09 +1000 |
| commit | e4a71e40ce2dd95815293052fe63157f57a52584 (patch) | |
| tree | fe5a9046c4f3ddbe40ba09bbdb01381869486500 /www | |
| parent | 3ada77ccc88722429f760a34e9840831d555f8ff (diff) | |
add script and html to preview maproulette cooperative challenge
Diffstat (limited to 'www')
| -rw-r--r-- | www/mrPreview.html | 110 |
1 files changed, 110 insertions, 0 deletions
diff --git a/www/mrPreview.html b/www/mrPreview.html new file mode 100644 index 0000000..8fcc3fa --- /dev/null +++ b/www/mrPreview.html @@ -0,0 +1,110 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset='utf-8' /> + <title>MapRoulette Preview</title> + <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> + <style> + body { margin:0; padding:0; } + #map { position:absolute; top:0; bottom:0; width:100%; } + + tr:nth-child(odd) { + background-color: #eee + } + tr:nth-child(even) { + background-color: #ddd; + } + + .modify { + background-color: orange; + } + .add { + background-color: lightgreen; + } + .remove { + background-color: red; + } + .row { + margin: 10px; + border-width: 1px; + border-color: black; + border-style: solid; + } + </style> +</head> +<body> + <div id="content"></div> +<script> + fetch('changes.json') + .then(res => res.json()) + .then(changes => { + renderChanges(changes) + }) + function renderChanges(changes) { + const content = document.getElementById('content') + for (const [id, change] of Object.entries(changes)) { + const header = document.createElement('h2') + header.textContent = id + content.appendChild(header) + + const table = document.createElement('table') + + // table header + const headerRow = document.createElement('tr') + + const headerTag = document.createElement('th') + headerTag.textContent = 'Tag' + headerRow.appendChild(headerTag) + + const headerBefore = document.createElement('th') + headerBefore.textContent = 'Before' + headerRow.appendChild(headerBefore) + + const headerAfter = document.createElement('th') + headerAfter.textContent = 'After' + headerRow.appendChild(headerAfter) + + table.appendChild(headerRow) + + // properties + const distinctKeys = [...new Set([...Object.keys(change.before.properties), ...Object.keys(change.after.properties)])] + for (const key of distinctKeys) { + const tr = document.createElement('tr') + + const tdKey = document.createElement('td') + tdKey.textContent = key + + const tdBefore = document.createElement('td') + const beforeValue = change.before.properties[key] + tdBefore.textContent = beforeValue + + const tdAfter = document.createElement('td') + const afterValue = change.after.properties[key] + tdAfter.textContent = afterValue + + if (beforeValue && afterValue && beforeValue !== afterValue) { + tdBefore.classList.add('modify') + tdAfter.classList.add('modify') + } + + if (!beforeValue && afterValue) { + tdAfter.classList.add('add') + } + + if (beforeValue && !afterValue) { + tdAfter.classList.add('remove') + } + + tr.appendChild(tdKey) + tr.appendChild(tdBefore) + tr.appendChild(tdAfter) + + table.appendChild(tr) + } + + content.appendChild(table) + } + } +</script> +</body> +</html> |