From 26825b07deda19fd1f61756bed88a636ad29675c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ferdinand=20M=C3=BCtsch?= Date: Thu, 16 Dec 2021 19:30:09 +0100 Subject: [PATCH] refactor: migrate most non-chart-related js logic to petite-vue (resolve #282) --- static/assets/base.js | 37 +++++++++++ static/assets/{app.js => summary.js} | 61 +---------------- views/foot.tpl.html | 2 +- views/menu-main.tpl.html | 10 +-- views/settings.tpl.html | 21 ------ views/signup.tpl.html | 98 +++++++++++++--------------- views/summary.tpl.html | 88 +++++++++++++++---------- 7 files changed, 144 insertions(+), 173 deletions(-) create mode 100644 static/assets/base.js rename static/assets/{app.js => summary.js} (90%) diff --git a/static/assets/base.js b/static/assets/base.js new file mode 100644 index 0000000..678fdf0 --- /dev/null +++ b/static/assets/base.js @@ -0,0 +1,37 @@ +// @formatter:off +const MD5 = function(d){var r = M(V(Y(X(d),8*d.length)));return r.toLowerCase()};function M(d){for(var _,m="0123456789ABCDEF",f="",r=0;r>>4&15)+m.charAt(15&_);return f}function X(d){for(var _=Array(d.length>>2),m=0;m<_.length;m++)_[m]=0;for(m=0;m<8*d.length;m+=8)_[m>>5]|=(255&d.charCodeAt(m/8))<>5]>>>m%32&255);return _}function Y(d,_){d[_>>5]|=128<<_%32,d[14+(_+64>>>9<<4)]=_;for(var m=1732584193,f=-271733879,r=-1732584194,i=271733878,n=0;n>16)+(_>>16)+(m>>16)<<16|65535&m}function bit_rol(d,_){return d<<_|d>>>32-_} + +function findParentAttribute(el, attrName) { + if (el.attributes[attrName]) return el.attributes[attrName] + if (!el.parentNode || !el.parentNode.attributes) return null + return findParentAttribute(el.parentNode, attrName) +} + +function copyApiKey(event) { + const el = document.getElementById('api-key-container') + el.select() + el.setSelectionRange(0, 9999) + document.execCommand('copy') + event.stopPropagation() +} + +window.addEventListener('load', () => { + const baseUrl = location.href.substring(0, location.href.lastIndexOf('/')) + document.querySelectorAll('.with-url-src').forEach(e => { + e.setAttribute('src', e.getAttribute('src').replace('%s', baseUrl)) + }) + document.querySelectorAll('.with-url-src-no-scheme').forEach(e => { + const strippedUrl = baseUrl.replace(/https?:\/\//, '') + e.setAttribute('src', e.getAttribute('src').replace('%s', strippedUrl)) + }) + document.querySelectorAll('.with-url-value').forEach(e => { + e.setAttribute('value', e.getAttribute('value').replace('%s', baseUrl)) + }) + document.querySelectorAll('.with-url-inner').forEach(e => { + e.innerHTML = e.innerHTML.replace('%s', baseUrl) + }) + document.querySelectorAll('.with-url-inner-no-scheme').forEach(e => { + const strippedUrl = baseUrl.replace(/https?:\/\//, '') + e.innerHTML = e.innerHTML.replace('%s', strippedUrl) + }) +}) \ No newline at end of file diff --git a/static/assets/app.js b/static/assets/summary.js similarity index 90% rename from static/assets/app.js rename to static/assets/summary.js index 2e3991c..9ad220a 100644 --- a/static/assets/app.js +++ b/static/assets/summary.js @@ -5,7 +5,7 @@ const LEGEND_MAX_ENTRIES = 9 const LEGEND_CHARACTERS = 20 // https://hihayk.github.io/scale/#4/6/50/80/-51/67/20/14/276749/39/103/73/white -const baseColors = [ '#112836', '#163B43', '#1C4F4D', '#215B4C', '#276749', '#437C57', '#5F9167', '#7DA67C', '#9FBA98', '#BFCEB5', '#DCE2D3' ] +const baseColors = ['#112836', '#163B43', '#1C4F4D', '#215B4C', '#276749', '#437C57', '#5F9167', '#7DA67C', '#9FBA98', '#BFCEB5', '#DCE2D3'] const projectsCanvas = document.getElementById('chart-projects') const osCanvas = document.getElementById('chart-os') @@ -35,7 +35,6 @@ topNPickers.forEach(e => { let charts = [] let showTopN = [] -let resizeCount = 0 Chart.defaults.color = "#E2E8F0" Chart.defaults.borderColor = "#242b3a" @@ -333,7 +332,7 @@ function parseTopN() { } function togglePlaceholders(mask) { - const placeholderElements = containers.map(c => c ? c.querySelector('.placeholder-container'): null) + const placeholderElements = containers.map(c => c ? c.querySelector('.placeholder-container') : null) for (let i = 0; i < mask.length; i++) { if (placeholderElements[i] === null) { @@ -353,11 +352,6 @@ function getPresentDataMask() { return data.map(list => (list ? list.reduce((acc, e) => acc + e.total, 0) : 0) > 0) } -function getContainer(chart) { - // See https://github.com/muety/wakapi/issues/235#issuecomment-907762100 - return chart.canvas.parentNode -} - function getColor(seed, index) { if (index < baseColors.length) return baseColors[(index + 5) % baseColors.length] return getRandomColor(seed) @@ -377,7 +371,7 @@ function getRandomColor(seed) { // https://stackoverflow.com/a/5624139/3112139 function hexToRgb(hex) { var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; - hex = hex.replace(shorthandRegex, function(m, r, g, b) { + hex = hex.replace(shorthandRegex, function (m, r, g, b) { return r + r + g + g + b + b; }); var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); @@ -388,61 +382,12 @@ function hexToRgb(hex) { } : null; } -function togglePopup(event, id) { - const el = document.getElementById(id) - if (el.classList.contains('hidden')) { - el.classList.remove('hidden') - el.classList.add('block') - } else { - el.classList.add('hidden') - el.classList.remove('block') - } - event.stopPropagation() -} - -function copyApiKey(event) { - const el = document.getElementById('api-key-container') - el.select() - el.setSelectionRange(0, 9999) - document.execCommand('copy') - event.stopPropagation() -} - -function submitTimePicker(event) { - const el = document.getElementById('time-picker-form') - el.submit() -} - function swapCharts(showEntity, hideEntity) { document.getElementById(`${showEntity}-container`).parentElement.classList.remove('hidden') document.getElementById(`${hideEntity}-container`).parentElement.classList.add('hidden') } -function updateTimeSelection() { - const query = new URLSearchParams(window.location.search) - if (query.has('interval')) { - const targetEl = document.getElementById('current-time-selection') - const refEl = document.getElementById(`time-option-${query.get('interval')}`) - targetEl.innerText = refEl ? refEl.innerText : 'Unknown' - } -} - - - -// Click outside -window.addEventListener('click', function (event) { - if (event.target.classList.contains('popup')) { - return - } - document.querySelectorAll('.popup').forEach(el => { - el.classList.remove('block') - el.classList.add('hidden') - }) -}) - window.addEventListener('load', function () { - updateTimeSelection() - topNPickers.forEach(e => e.addEventListener('change', () => { parseTopN() draw([parseInt(e.attributes['data-entity'].value)]) diff --git a/views/foot.tpl.html b/views/foot.tpl.html index 6deb81e..0e70663 100644 --- a/views/foot.tpl.html +++ b/views/foot.tpl.html @@ -2,4 +2,4 @@ - + diff --git a/views/menu-main.tpl.html b/views/menu-main.tpl.html index 60b7a60..15cd85c 100644 --- a/views/menu-main.tpl.html +++ b/views/menu-main.tpl.html @@ -1,10 +1,4 @@ - {{ template "foot.tpl.html" . }} diff --git a/views/signup.tpl.html b/views/signup.tpl.html index d037b27..3a1223b 100644 --- a/views/signup.tpl.html +++ b/views/signup.tpl.html @@ -3,13 +3,53 @@ {{ template "head.tpl.html" . }} + + {{ template "header.tpl.html" . }} {{ template "alerts.tpl.html" . }} -
+

Sign up to Wakapi

@@ -26,25 +66,27 @@
- +
- User Profile Avatar + User Profile Avatar
+ name="email" @keyup="updateAvatar" placeholder="Your e-mail address">
E-Mail address is optional, but required for some weekly reports and password reset.
@@ -82,52 +124,6 @@ {{ template "foot.tpl.html" . }} - \ No newline at end of file diff --git a/views/summary.tpl.html b/views/summary.tpl.html index b1c50f6..eca9c46 100644 --- a/views/summary.tpl.html +++ b/views/summary.tpl.html @@ -3,6 +3,41 @@ {{ template "head.tpl.html" . }} + + {{ template "menu-main.tpl.html" . }} @@ -11,35 +46,35 @@ {{ if .User.HasData }} -
-
+
+
- {{ .From | datetime }} - {{ .To | ceildate | datetime }} + ${timeSelection}
-