2020-10-09 22:37:16 +03:00
<!DOCTYPE html>
< html lang = "en" >
2020-05-24 14:41:19 +03:00
{{ template "head.tpl.html" . }}
2021-02-06 01:42:20 +03:00
< body class = "relative bg-gray-850 text-gray-700 p-4 pt-10 flex flex-col min-h-screen max-w-screen-xl mx-auto justify-center" >
2020-05-24 14:41:19 +03:00
2020-11-28 22:23:40 +03:00
{{ template "header.tpl.html" . }}
2020-06-07 20:28:32 +03:00
< div class = "hidden flex bg-gray-800 shadow-md z-10 p-2 absolute top-0 right-0 mt-10 mr-8 border border-green-700 rounded popup"
id="api-key-popup">
2020-05-24 22:19:05 +03:00
< div class = "flex-grow flex flex-col px-2" >
< span class = "text-xs text-gray-500 mx-1" > API Key< / span >
2020-06-07 20:28:32 +03:00
< input type = "text" class = "bg-transparent text-sm text-white mx-1 font-mono" id = "api-key-container" readonly
value="{{ .ApiKey }}" style="min-width: 330px">
2020-05-24 22:19:05 +03:00
< / div >
< div class = "flex items-center px-2 border-l border-gray-700" >
2021-04-16 18:07:11 +03:00
< button title = "Copy to clipboard" onclick = "copyApiKey(event)" > < span class = "iconify inline" data-icon = "fxemoji:clipboard" > < / span > < / button >
2020-05-24 22:19:05 +03:00
< / div >
< / div >
2020-06-07 20:28:32 +03:00
< div class = "absolute flex top-0 right-0 mr-8 mt-10 py-2" >
< div class = "mx-1" >
< button type = "button" class = "py-1 px-3 h-8 rounded border border-green-700 text-white text-sm"
2021-04-16 18:07:11 +03:00
onclick="showApiKeyPopup(event)">< span class = "iconify inline" data-icon = "fxemoji:lockandkey" > < / span >
2020-06-07 20:28:32 +03:00
< / button >
< / div >
< div class = "mx-1" >
2021-04-16 18:07:11 +03:00
< a href = "settings" class = "py-1 px-3 h-8 block rounded border border-green-700 text-white text-sm" >
< span class = "iconify inline" data-icon = "twemoji:gear" > < / span >
< / a >
2020-06-07 20:28:32 +03:00
< / div >
< div class = "mx-1" >
< form action = "logout" method = "post" >
< button type = "submit" class = "py-1 px-3 h-8 rounded border border-green-700 text-white text-sm" > Logout< / button >
< / form >
< / div >
2020-05-24 14:41:19 +03:00
< / div >
< div class = "flex items-center justify-center" >
2021-02-13 14:59:59 +03:00
< h1 class = "font-semibold text-2xl text-white m-0 border-b-4 border-green-700" > Summary< / h1 >
2020-05-24 14:41:19 +03:00
< / div >
2021-02-13 14:59:59 +03:00
{{ if .User.HasData }}
< div class = "self-center border border-gray-700 shadow mt-8 rounded-md p-4 bg-gray-900" >
< form class = "text-white flex flex-nowrap items-center justify-center self-center max-w-xl flex-wrap space-x-8" >
< div class = "flex space-x-1" >
2021-04-16 18:07:11 +03:00
< label for = "from-date-picker" class = "text-gray-300 pl-1" > < span class = "iconify inline" data-icon = "noto:play-button" > < / span > Start:< / label >
2021-03-06 10:33:08 +03:00
< input id = "from-date-picker" type = "date" name = "from" max = "{{ .ToTime.T | simpledate }}" class = "text-sm text-gray-300 bg-gray-800 rounded-md text-center cursor-pointer"
2021-04-16 12:53:37 +03:00
value="{{ .From | simpledate }}" required>
2021-02-13 14:59:59 +03:00
< / div >
< div class = "flex space-x-1" >
2021-04-16 18:07:11 +03:00
< label for = "to-date-picker" class = "text-gray-300 pl-1" > < span class = "iconify inline" data-icon = "noto:stop-button" > < / span > End:< / label >
2021-03-06 10:33:08 +03:00
< input id = "to-date-picker" type = "date" name = "to" min = "{{ .FromTime.T | simpledate }}" class = "text-sm text-gray-300 bg-gray-800 rounded-md text-center cursor-pointer"
2021-04-16 12:53:37 +03:00
value="{{ .To | ceildate | simpledate }}" required>
2021-02-13 14:59:59 +03:00
< / div >
< div >
< button type = "submit" class = "py-1 px-3 rounded bg-green-700 hover:bg-green-800 text-white text-sm" > Show< / button >
< / div >
< / form >
< div class = "text-gray-300 text-sm flex items-center justify-center mt-4 self-center max-w-lg flex-wrap" >
< a href = "summary?interval=today" class = "px-1 my-1 mx-1 border-b hover:border-b-2 border-gray-700 hover:bg-green-700 rounded hover:border-none" > Today< / a >
< a href = "summary?interval=yesterday" class = "px-1 my-1 mx-1 border-b hover:border-b-2 border-gray-700 hover:bg-green-700 rounded hover:border-none" > Yesterday< / a >
< a href = "summary?interval=week" class = "px-1 my-1 mx-1 border-b hover:border-b-2 border-gray-700 hover:bg-green-700 rounded hover:border-none" > This Week< / a >
< a href = "summary?interval=month" class = "px-1 my-1 mx-1 border-b hover:border-b-2 border-gray-700 hover:bg-green-700 rounded hover:border-none" > This Month< / a >
< a href = "summary?interval=year" class = "px-1 my-1 mx-1 border-b hover:border-b-2 border-gray-700 hover:bg-green-700 rounded hover:border-none" > This Year< / a >
< a href = "summary?interval=last_7_days" class = "px-1 my-1 mx-1 border-b hover:border-b-2 border-gray-700 hover:bg-green-700 rounded hover:border-none" > Past 7 Days< / a >
< a href = "summary?interval=last_30_days" class = "px-1 my-1 mx-1 border-b hover:border-b-2 border-gray-700 hover:bg-green-700 rounded hover:border-none" > Past 30 Days< / a >
< a href = "summary?interval=last_12_months" class = "px-1 my-1 mx-1 border-b hover:border-b-2 border-gray-700 hover:bg-green-700 rounded hover:border-none" > Past 12 Months< / a >
< a href = "summary?interval=any" class = "px-1 my-1 mx-1 border-b hover:border-b-2 border-gray-700 hover:bg-green-700 rounded hover:border-none" > All Time< / a >
< / div >
2020-05-24 14:41:19 +03:00
< / div >
2021-02-13 14:59:59 +03:00
{{ end }}
2020-05-24 14:41:19 +03:00
{{ template "alerts.tpl.html" . }}
2021-02-12 12:10:44 +03:00
< main class = "flex flex-col items-center mt-10 flex-grow" >
2021-02-13 14:59:59 +03:00
{{ if .User.HasData }}
2021-02-12 12:10:44 +03:00
2021-02-13 14:59:59 +03:00
< span class = "text-white text-lg text-gray-300 text-center mb-4" >
2021-04-16 18:07:11 +03:00
< span class = "text-xl" > < span class = "iconify inline" data-icon = "emojione-v1:alarm-clock" > < / span > ️ < / span >
2021-02-13 14:59:59 +03:00
Showing a total of < span id = "total-span" title = "Total Hours" class = "text-white text-xl font-semibold border-b-2 border-green-700" > < / span >
< span class = "text-sm my-2" >
2021-04-30 17:20:08 +03:00
(from < span title = "Start Time" class = "border-b border-gray-700" > {{ .FromTime.T | datetime }}< / span > to < span title = "End Time" class = "border-b border-gray-700" > {{ .ToTime.T | datetime }}< / span > )
2021-02-13 14:59:59 +03:00
< / span >
< / span >
2021-02-12 12:10:44 +03:00
2020-05-24 14:41:19 +03:00
< div class = "flex flex-wrap justify-center" >
2021-03-25 12:51:36 +03:00
< div class = "w-full lg:w-1/2 p-1" style = "max-width: 100vw;" >
2021-02-06 01:42:20 +03:00
< 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" >
2021-01-05 14:41:01 +03:00
< div class = "flex justify-between" >
< div class = "w-1/4 flex-1" > < / div >
2021-04-04 11:42:27 +03:00
< span class = "font-semibold w-1/2 text-center flex-1 whitespace-no-wrap" > Projects< / span >
2021-01-05 14:41:01 +03:00
< div class = "flex justify-end flex-1 text-xs items-center" >
< label for = "project-top-picker" class = "mr-1" > Show: < / label >
2021-02-06 01:42:20 +03:00
< input type = "number" min = "1" id = "project-top-picker" data-entity = "0" class = "w-1/4 top-picker bg-gray-800 rounded-md text-center" value = "10" >
2021-01-05 14:41:01 +03:00
< / div >
2020-08-30 17:51:37 +03:00
< / div >
2021-02-06 01:42:20 +03:00
< canvas id = "chart-projects" class = "mt-2" > < / canvas >
2020-08-30 17:51:37 +03:00
< div class = "hidden placeholder-container flex items-center justify-center h-full flex-col" >
2021-02-13 14:59:59 +03:00
< span class = "text-md font-semibold text-gray-500 mt-4" > No data< / span >
2020-08-30 17:51:37 +03:00
< / div >
2020-05-24 14:41:19 +03:00
< / div >
< / div >
2021-03-25 12:51:36 +03:00
< div class = "w-full lg:w-1/2 p-1" style = "max-width: 100vw;" >
2021-02-06 01:42:20 +03:00
< 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 = "os-container" style = "height: 300px" >
2021-01-05 14:41:01 +03:00
< div class = "flex justify-between" >
< div class = "w-1/4 flex-1" > < / div >
2021-04-04 11:42:27 +03:00
< span class = "font-semibold w-1/2 text-center flex-1 whitespace-no-wrap" > Operating Systems< / span >
2021-01-05 14:41:01 +03:00
< div class = "flex justify-end flex-1 text-xs items-center" >
< label for = "os-top-picker" class = "mr-1" > Show: < / label >
2021-02-06 01:42:20 +03:00
< input type = "number" min = "1" id = "os-top-picker" data-entity = "1" class = "w-1/4 top-picker bg-gray-800 rounded-md text-center" value = "10" >
2021-01-05 14:41:01 +03:00
< / div >
2020-08-30 17:51:37 +03:00
< / div >
2020-05-24 14:41:19 +03:00
< canvas id = "chart-os" > < / canvas >
2020-08-30 17:51:37 +03:00
< div class = "hidden placeholder-container flex items-center justify-center h-full flex-col" >
2021-02-13 14:59:59 +03:00
< span class = "text-md font-semibold text-gray-500 mt-4" > No data< / span >
2020-08-30 17:51:37 +03:00
< / div >
2020-05-24 14:41:19 +03:00
< / div >
< / div >
2021-03-25 12:51:36 +03:00
< div class = "w-full lg:w-1/2 p-1" style = "max-width: 100vw;" >
2021-02-06 01:42:20 +03:00
< div class = "p-4 pb-10 bg-gray-900 border border-gray-700 text-gray-300 rounded-md shadow m-2 flex flex-col relative" id = "language-container" style = "height: 300px" >
2021-01-05 14:41:01 +03:00
< div class = "flex justify-between" >
< div class = "w-1/4 flex-1" > < / div >
2021-04-04 11:42:27 +03:00
< span class = "font-semibold w-1/2 text-center flex-1 whitespace-no-wrap" > Languages< / span >
2021-01-05 14:41:01 +03:00
< div class = "flex justify-end flex-1 text-xs items-center" >
< label for = "language-top-picker" class = "mr-1" > Show: < / label >
2021-02-06 01:42:20 +03:00
< input type = "number" min = "1" id = "language-top-picker" data-entity = "3" class = "w-1/4 top-picker bg-gray-800 rounded-md text-center" value = "10" >
2021-01-05 14:41:01 +03:00
< / div >
2020-08-30 17:51:37 +03:00
< / div >
2020-05-24 14:41:19 +03:00
< canvas id = "chart-language" > < / canvas >
2020-08-30 17:51:37 +03:00
< div class = "hidden placeholder-container flex items-center justify-center h-full flex-col" >
2021-02-13 14:59:59 +03:00
< span class = "text-md font-semibold text-gray-500 mt-4" > No data< / span >
2020-08-30 17:51:37 +03:00
< / div >
2020-05-24 14:41:19 +03:00
< / div >
< / div >
2021-03-25 12:51:36 +03:00
< div class = "w-full lg:w-1/2 p-1" style = "max-width: 100vw;" >
2021-02-06 01:42:20 +03:00
< 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 = "editor-container" style = "height: 300px" >
2021-01-05 14:41:01 +03:00
< div class = "flex justify-between" >
< div class = "w-1/4 flex-1" > < / div >
2021-04-04 11:42:27 +03:00
< span class = "font-semibold w-1/2 text-center flex-1 whitespace-no-wrap" > Editors< / span >
2021-01-05 14:41:01 +03:00
< div class = "flex justify-end flex-1 text-xs items-center" >
< label for = "editor-top-picker" class = "mr-1" > Show: < / label >
2021-02-06 01:42:20 +03:00
< input type = "number" min = "1" id = "editor-top-picker" data-entity = "2" class = "w-1/4 top-picker bg-gray-800 rounded-md text-center" value = "10" >
2021-01-05 14:41:01 +03:00
< / div >
2020-08-30 17:51:37 +03:00
< / div >
2020-05-24 14:41:19 +03:00
< canvas id = "chart-editor" > < / canvas >
2020-08-30 17:51:37 +03:00
< div class = "hidden placeholder-container flex items-center justify-center h-full flex-col" >
2021-02-13 14:59:59 +03:00
< span class = "text-md font-semibold text-gray-500 mt-4" > No data< / span >
2020-08-30 17:51:37 +03:00
< / div >
2020-05-24 14:41:19 +03:00
< / div >
< / div >
2021-03-25 12:51:36 +03:00
< div class = "w-full lg:w-1/2 p-1" style = "max-width: 100vw;" >
2021-02-06 01:42:20 +03:00
< 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 = "machine-container" style = "height: 300px" >
2021-01-05 14:41:01 +03:00
< div class = "flex justify-between" >
< div class = "w-1/4 flex-1" > < / div >
2021-04-04 11:42:27 +03:00
< span class = "font-semibold w-1/2 text-center flex-1 whitespace-no-wrap" > Machines< / span >
2021-01-05 14:41:01 +03:00
< div class = "flex justify-end flex-1 text-xs items-center" >
< label for = "machine-top-picker" class = "mr-1" > Show: < / label >
2021-02-06 01:42:20 +03:00
< input type = "number" min = "1" id = "machine-top-picker" data-entity = "4" class = "w-1/4 top-picker bg-gray-800 rounded-md text-center" value = "10" >
2021-01-05 14:41:01 +03:00
< / div >
2020-08-30 17:51:37 +03:00
< / div >
2020-08-29 23:03:01 +03:00
< canvas id = "chart-machine" > < / canvas >
2020-08-30 17:51:37 +03:00
< div class = "hidden placeholder-container flex items-center justify-center h-full flex-col" >
2021-02-13 14:59:59 +03:00
< span class = "text-md font-semibold text-gray-500 mt-4" > No data< / span >
2020-08-30 17:51:37 +03:00
< / div >
2020-08-29 23:03:01 +03:00
< / div >
< / div >
2021-06-11 21:59:34 +03:00
< div class = "w-full lg:w-1/2 p-1" style = "max-width: 100vw;" >
< 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 = "label-container" style = "height: 300px" >
< div class = "flex justify-between" >
2021-06-12 12:40:13 +03:00
< div class = "w-1/4 flex-1" >
< a href = "settings#details-labels" class = "h-8 inline" >
< span class = "iconify inline" data-icon = "twemoji:gear" > < / span >
< / a >
< / div >
2021-06-11 21:59:34 +03:00
< span class = "font-semibold w-1/2 text-center flex-1 whitespace-no-wrap" > Labels< / span >
< div class = "flex justify-end flex-1 text-xs items-center" >
< label for = "label-top-picker" class = "mr-1" > Show: < / label >
< input type = "number" min = "1" id = "label-top-picker" data-entity = "5" class = "w-1/4 top-picker bg-gray-800 rounded-md text-center" value = "10" >
< / div >
< / div >
< canvas id = "chart-label" > < / canvas >
< div class = "hidden placeholder-container flex items-center justify-center h-full flex-col" >
< span class = "text-md font-semibold text-gray-500 mt-4" > No data< / span >
< / div >
< / div >
< / div >
2020-05-24 14:41:19 +03:00
< / div >
2021-02-12 12:10:44 +03:00
{{ 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" >
2021-02-12 21:25:59 +03:00
< img src = "assets/images/welcome.svg" width = "200px" alt = "User welcome illustration" >
2021-02-12 12:10:44 +03:00
< / 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 >
2021-08-07 11:23:27 +03:00
<!-- https://github.com/muety/wakapi/issues/224#issuecomment - 890855563 -->
# Set < em > api_url = < span class = "with-url-inner" > %s/api/heartbeat< / span > < / em > < br >
2021-02-12 21:25:59 +03:00
# Set < em > api_key = < span id = "api-key-instruction" > < / span > < / em > < br > < br >
2021-02-12 12:10:44 +03:00
# < 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 }}
2020-05-24 14:41:19 +03:00
< / main >
{{ template "footer.tpl.html" . }}
{{ template "foot.tpl.html" . }}
2020-12-03 01:16:12 +03:00
2021-04-04 11:42:27 +03:00
< script >
2021-04-25 21:07:15 +03:00
window.addEventListener('load', function() {
2021-04-04 11:42:27 +03:00
document.getElementById('api-key-instruction').innerHTML = document.getElementById('api-key-container').value
})
2021-02-12 12:10:44 +03:00
< / script >
2020-12-03 01:16:12 +03:00
< script >
const languageColors = {{ .LanguageColors | json }}
2021-01-30 11:51:36 +03:00
const editorColors = {{ .EditorColors | json }}
const osColors = {{ .OSColors | json }}
2020-12-03 01:16:12 +03:00
const wakapiData = {}
wakapiData.projects = {{ .Projects | json }}
wakapiData.operatingSystems = {{ .OperatingSystems | json }}
wakapiData.editors = {{ .Editors | json }}
wakapiData.languages = {{ .Languages | json }}
wakapiData.machines = {{ .Machines | json }}
2021-06-11 21:59:34 +03:00
wakapiData.labels = {{ .Labels | json }}
2021-03-06 10:33:08 +03:00
document.getElementById("to-date-picker").onchange = function () {
var input = document.getElementById("from-date-picker");
input.setAttribute("max", this.value);
}
document.getElementById("from-date-picker").onchange = function () {
var input = document.getElementById("to-date-picker");
input.setAttribute("min", this.value);
}
2020-12-03 01:16:12 +03:00
< / script >
< script src = "assets/app.js" > < / script >
2020-05-24 14:41:19 +03:00
< / body >
< / html >
