mirror/wakapi
1
0
Fork 0
mirror of https://github.com/muety/wakapi.git synced 2023-08-10 21:12:56 +03:00
Code Issues Projects Releases Wiki Activity

feat: display setup instructions on startup (resolve #120)

Browse Source
This commit is contained in:
Ferdinand Mütsch
2021-02-12 10:10:44 +01:00
parent e4c413a33c
commit 218c571859
9 changed files with 88 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
views/footer.tpl.html
View File

@@ -9,4 +9,26 @@
<div>
<a href="imprint" class="border-b border-green-700">Imprint, Cookies & Data Privacy</a>
</div>
</footer>
</footer>
<script type="text/javascript">
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))
e.classList.remove('hidden')
})
document.querySelectorAll('.with-url-src-no-scheme').forEach(e => {
const strippedUrl = baseUrl.replace(/https?:\/\//, '')
e.setAttribute('src', e.getAttribute('src').replace('%s', strippedUrl))
e.classList.remove('hidden')
})
document.querySelectorAll('.with-url-inner').forEach(e => {
e.innerHTML = e.innerHTML.replace('%s', baseUrl)
e.classList.remove('hidden')
})
document.querySelectorAll('.with-url-inner-no-scheme').forEach(e => {
const strippedUrl = baseUrl.replace(/https?:\/\//, '')
e.innerHTML = e.innerHTML.replace('%s', strippedUrl)
e.classList.remove('hidden')
})
</script>

1
views/index.tpl.html
View File

@@ -72,6 +72,7 @@
class="underline">Prometheus</a> metrics via <a
href="https://github.com/MacroPower/wakatime_exporter" target="_blank"
rel="noopener noreferrer" class="underline">exporter</a></li>
<li>✅ &nbsp; Lightning fast</li>
<li>✅ &nbsp; Self-hosted</li>
</ul>
</div>

20
views/settings.tpl.html
View File

@@ -534,26 +534,6 @@
</main>
<script type="text/javascript">
const baseUrl = location.href.substring(0, location.href.indexOf('/settings'))
document.querySelectorAll('.with-url-src').forEach(e => {
e.setAttribute('src', e.getAttribute('src').replace('%s', baseUrl))
e.classList.remove('hidden')
})
document.querySelectorAll('.with-url-src-no-scheme').forEach(e => {
const strippedUrl = baseUrl.replace(/https?:\/\//, '')
e.setAttribute('src', e.getAttribute('src').replace('%s', strippedUrl))
e.classList.remove('hidden')
})
document.querySelectorAll('.with-url-inner').forEach(e => {
e.innerHTML = e.innerHTML.replace('%s', baseUrl)
e.classList.remove('hidden')
})
document.querySelectorAll('.with-url-inner-no-scheme').forEach(e => {
const strippedUrl = baseUrl.replace(/https?:\/\//, '')
e.innerHTML = e.innerHTML.replace('%s', strippedUrl)
e.classList.remove('hidden')
})
const btnRegenerate = document.querySelector('#btn-regenerate-summaries')
const formRegenerate = document.querySelector('#form-regenerate-summaries')
btnRegenerate.addEventListener('click', () => {

68
views/summary.tpl.html
View File

@@ -53,16 +53,27 @@
{{ template "alerts.tpl.html" . }}
<main class="mt-10 flex-grow">
<main class="flex flex-col items-center mt-10 flex-grow">
<div class="flex justify-center">
<div class="p-1">
<div class="flex justify-center p-4 bg-gray-900 border border-gray-700 text-gray-300 rounded-md shadow">
<p class="mx-2"><strong>▶️</strong> <span title="Start Time">{{ .FromTime.T | date }}</span></p>
<p class="mx-2"><strong>⏹️</strong> <span title="End Time">{{ .ToTime.T | date }}</span></p>
<p class="mx-2"><strong>⏱️</strong> <span id="total-span" title="Total Hours"></span></p>
<p class="mx-2">
<strong>⏱️</strong>
{{ if gt .Summary.TotalTime 0 }}
<span id="total-span" title="Total Hours"></span>
{{ else }}
<span title="Total Hours">No Data</span>
{{ end }}
</p>
</div>
</div>
</div>
{{ if or (gt .Summary.TotalTime 0) (ne .RawQuery "") }}
<div class="flex flex-wrap justify-center">
<div class="w-full lg:w-1/2 p-1">
<div class="p-4 pb-10 bg-gray-900 border border-gray-700 text-gray-300 rounded-md shadow m-2 flex flex-col" id="project-container" style="height: 300px">
@@ -76,8 +87,7 @@
</div>
<canvas id="chart-projects" class="mt-2"></canvas>
<div class="hidden placeholder-container flex items-center justify-center h-full flex-col">
<img src="assets/images/no_data.svg" class="w-20" alt="No data"/>
<span class="text-sm mt-4">No data available ...</span>
<span class="text-md font-semibold text-gray-500 mt-4">No data ...</span>
</div>
</div>
</div>
@@ -93,8 +103,7 @@
</div>
<canvas id="chart-os"></canvas>
<div class="hidden placeholder-container flex items-center justify-center h-full flex-col">
<img src="assets/images/no_data.svg" class="w-20" alt="No data"/>
<span class="text-sm mt-4">No data available ...</span>
<span class="text-md font-semibold text-gray-500 mt-4">No data ...</span>
</div>
</div>
</div>
@@ -110,8 +119,7 @@
</div>
<canvas id="chart-language"></canvas>
<div class="hidden placeholder-container flex items-center justify-center h-full flex-col">
<img src="assets/images/no_data.svg" class="w-20" alt="No data"/>
<span class="text-sm mt-4">No data available ...</span>
<span class="text-md font-semibold text-gray-500 mt-4">No data ...</span>
</div>
</div>
</div>
@@ -127,8 +135,7 @@
</div>
<canvas id="chart-editor"></canvas>
<div class="hidden placeholder-container flex items-center justify-center h-full flex-col">
<img src="assets/images/no_data.svg" class="w-20" alt="No data"/>
<span class="text-sm mt-4">No data available ...</span>
<span class="text-md font-semibold text-gray-500 mt-4">No data ...</span>
</div>
</div>
</div>
@@ -144,18 +151,55 @@
</div>
<canvas id="chart-machine"></canvas>
<div class="hidden placeholder-container flex items-center justify-center h-full flex-col">
<img src="assets/images/no_data.svg" class="w-20" alt="No data"/>
<span class="text-sm mt-4">No data available ...</span>
<span class="text-md font-semibold text-gray-500 mt-4">No data ...</span>
</div>
</div>
</div>
</div>
{{ else }}
<div class="max-w-screen-sm flex flex-col items-center mt-12 space-y-8 text-gray-300 text-center">
<div class="pb-4">
<img src="assets/images/welcome.svg" width="200px">
</div>
<p class="text-sm">
<strong>Welcome to Wakapi! 👋</strong> It looks like there is no data available for the specified time range.<br>If you logged in to Wakapi for the first time, see the setup instructions below on how to get started.
</p>
<div class="w-full pt-10 flex flex-col space-y-4">
<div>
<h3 class="inline-block font-semibold text-md border-b border-green-700">Setup Instructions</h3>
</div>
<div class="w-full bg-gray-900 text-left rounded-md py-4 px-8 text-xs font-mono shadow-md">
# <strong>Step 1:</strong> Download WakaTime plugin for your IDE<br>
# See: https://wakatime.com/plugins<br><br>
# <strong>Step 2:</strong> Adapt your config<br>
$ vi ~/.wakatime.cfg<br>
# Set <i>api_url = <span class="with-url-inner">%s/api/heartbeat</span></i><br>
# Set <i>api_key = <span id="api-key-instruction"></span></i><br><br>
# <strong>Step 3:</strong> Start coding and then check back here!
</div>
<p class="pt-4 text-sm">
More at <a href="https://github.com/muety/wakapi" target="_blank" rel="noreferrer noopener" class="font-mono border-b border-green-700">github.com/muety/wakapi</a>.
</p>
</div>
</div>
{{ end }}
</main>
{{ template "footer.tpl.html" . }}
{{ template "foot.tpl.html" . }}
<script type="text/javascript">
document.querySelector('#api-key-instruction').innerHTML = document.querySelector('#api-key-container').value
</script>
<script>
const languageColors = {{ .LanguageColors | json }}
const editorColors = {{ .EditorColors | json }}