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-12-16 00:46:02 +03:00
< body class = "relative bg-gray-900 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
2021-12-16 00:46:02 +03:00
{{ template "menu-main.tpl.html" . }}
2020-11-28 22:23:40 +03:00
2021-12-16 00:46:02 +03:00
{{ if .User.HasData }}
2021-10-14 13:01:06 +03:00
2021-12-16 00:46:02 +03:00
< div class = "flex justify-end mt-12 relative" >
< div class = "menu-item flex items-center text-sm font-semibold space-x-2 rounded hover:bg-gray-850 py-2 px-4 cursor-pointer justify-end" onclick = "toggleTimePickerPopup(event)" >
< span class = "iconify inline text-2xl text-gray-400 flex-grow" data-icon = "fa-regular:calendar-alt" > < / span >
< a id = "current-time-selection" class = "text-gray-300 -mb-1" > {{ .From | datetime }} - {{ .To | ceildate | datetime }}< / a >
< span class = "iconify inline text-2xl text-gray-400" data-icon = "akar-icons:chevron-down" > < / span >
2020-06-07 20:28:32 +03:00
< / div >
2020-05-24 14:41:19 +03:00
2021-12-16 00:46:02 +03:00
< div class = "hidden z-10 absolute top-0 right-0 popup mt-12 w-40" id = "time-picker-popup" >
< div class = "flex-grow flex flex-col flex bg-gray-850 shadow-md rounded w-40 p-1 " >
< a id = "time-option-today" class = "submenu-item hover:bg-gray-800 rounded p-1 text-right w-full text-gray-300 px-2 font-semibold text-sm" href = "summary?interval=today" onclick = "toggleTimePickerPopup(event)" > Today< / a >
< a id = "time-option-yesterday" class = "submenu-item hover:bg-gray-800 rounded p-1 text-right w-full text-gray-300 px-2 font-semibold text-sm" href = "summary?interval=yesterday" onclick = "toggleTimePickerPopup(event)" > Yesterday< / a >
< a id = "time-option-week" class = "submenu-item hover:bg-gray-800 rounded p-1 text-right w-full text-gray-300 px-2 font-semibold text-sm" href = "summary?interval=week" onclick = "toggleTimePickerPopup(event)" > This Week< / a >
< a id = "time-option-month" class = "submenu-item hover:bg-gray-800 rounded p-1 text-right w-full text-gray-300 px-2 font-semibold text-sm" href = "summary?interval=month" onclick = "toggleTimePickerPopup(event)" > This Month< / a >
< a id = "time-option-year" class = "submenu-item hover:bg-gray-800 rounded p-1 text-right w-full text-gray-300 px-2 font-semibold text-sm" href = "summary?interval=year" onclick = "toggleTimePickerPopup(event)" > This Year< / a >
< a id = "time-option-last_7_days" class = "submenu-item hover:bg-gray-800 rounded p-1 text-right w-full text-gray-300 px-2 font-semibold text-sm" href = "summary?interval=last_7_days" onclick = "toggleTimePickerPopup(event)" > Past 7 Days< / a >
< a id = "time-option-last_30_days" class = "submenu-item hover:bg-gray-800 rounded p-1 text-right w-full text-gray-300 px-2 font-semibold text-sm" href = "summary?interval=last_30_days" onclick = "toggleTimePickerPopup(event)" > Past 30 Days< / a >
< a id = "time-option-last_12_months" class = "submenu-item hover:bg-gray-800 rounded p-1 text-right w-full text-gray-300 px-2 font-semibold text-sm" href = "summary?interval=last_12_months" onclick = "toggleTimePickerPopup(event)" > Past 12 Months< / a >
< a id = "time-option-any" class = "submenu-item hover:bg-gray-800 rounded p-1 text-right w-full text-gray-300 px-2 font-semibold text-sm" href = "summary?interval=any" onclick = "toggleTimePickerPopup(event)" > All Time< / a >
< hr class = "my-2" >
< form id = "time-picker-form" class = "flex flex-col space-y-1" >
< div class = "flex flex-col space-x-1 bg-gray-900 rounded p-1 border-2 border-gray-800" >
< label for = "from-date-picker" class = "text-gray-500 text-xs ml-2" > Start:< / label >
< input id = "from-date-picker" type = "date" name = "from" max = "{{ .ToTime.T | simpledate }}" class = "text-sm text-gray-300 bg-gray-900 cursor-pointer"
value="{{ .From | simpledate }}" onclick="event.stopPropagation()" oninput="submitTimePicker(event)" required>
< / div >
< div class = "flex flex-col space-x-1 bg-gray-900 rounded p-1 border-2 border-gray-800" >
< label for = "to-date-picker" class = "text-gray-500 text-xs ml-2" > End:< / label >
< input id = "to-date-picker" type = "date" name = "to" min = "{{ .FromTime.T | simpledate }}" class = "text-sm text-gray-300 bg-gray-900 cursor-pointer"
value="{{ .To | ceildate | simpledate }}" onclick="event.stopPropagation()" oninput="submitTimePicker(event)" required>
< / div >
< / form >
2021-02-13 14:59:59 +03:00
< / div >
< / 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-12-16 00:46:02 +03:00
<!-- KPIs -->
< div class = "flex space-x-6 w-full mb-4 flex-wrap" >
< div class = "flex flex-col space-y-2 my-1 w-48 p-4 rounded-md p-4 text-gray-300 bg-gray-850 leading-none border-2 border-green-700" >
< span class = "text-xs text-gray-500 font-semibold" > Total Time< / span >
< span class = "font-semibold text-xl truncate" > {{ .TotalTime | duration }}< / span >
< / div >
< div class = "flex flex-col space-y-2 my-1 w-48 p-4 rounded-md p-4 text-gray-300 bg-gray-850 leading-none border-2 border-green-700" >
< span class = "text-xs text-gray-500 font-semibold" > Top Project< / span >
< span class = "font-semibold text-xl truncate" > {{ .MaxByToString 0 }}< / span >
< / div >
< div class = "flex flex-col space-y-2 my-1 w-48 p-4 rounded-md p-4 text-gray-300 bg-gray-850 leading-none border-2 border-green-700" >
< span class = "text-xs text-gray-500 font-semibold" > Top Language< / span >
< span class = "font-semibold text-xl truncate" > {{ .MaxByToString 1 }}< / span >
< / div >
< div class = "flex flex-col space-y-2 my-1 w-48 p-4 rounded-md p-4 text-gray-300 bg-gray-850 leading-none border-2 border-green-700" >
< span class = "text-xs text-gray-500 font-semibold" > Top OS< / span >
< span class = "font-semibold text-xl truncate" > {{ .MaxByToString 3 }}< / span >
< / div >
< div class = "flex flex-col space-y-2 my-1 w-48 p-4 rounded-md p-4 text-gray-300 bg-gray-850 leading-none border-2 border-green-700" >
< span class = "text-xs text-gray-500 font-semibold" > Top Editor< / span >
< span class = "font-semibold text-xl truncate" > {{ .MaxByToString 2 }}< / span >
< / div >
< / div >
2021-02-12 12:10:44 +03:00
2021-12-16 00:46:02 +03:00
< div class = "flex flex-wrap w-full justify-center mt-4" >
2021-03-25 12:51:36 +03:00
< div class = "w-full lg:w-1/2 p-1" style = "max-width: 100vw;" >
2021-12-16 00:46:02 +03:00
< div class = "p-4 px-6 pb-10 bg-gray-850 text-gray-300 rounded-md shadow flex flex-col" id = "project-container" style = "height: 608px" >
2021-01-05 14:41:01 +03:00
< div class = "flex justify-between" >
2021-12-16 00:46:02 +03:00
< span class = "font-semibold text-lg w-1/2 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" >
2021-12-16 00:46:02 +03:00
< input type = "number" min = "1" id = "project-top-picker" data-entity = "0" class = "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-12-16 00:46:02 +03:00
2021-03-25 12:51:36 +03:00
< div class = "w-full lg:w-1/2 p-1" style = "max-width: 100vw;" >
2021-12-16 00:46:02 +03:00
< div class = "flex flex-col space-y-2" >
< div class = "p-4 px-6 pb-10 bg-gray-850 text-gray-300 rounded-md shadow flex flex-col" id = "language-container" style = "height: 300px" >
< div class = "flex justify-between" >
< span class = "font-semibold text-lg w-1/2 flex-1 whitespace-no-wrap" > Languages< / span >
< div class = "flex justify-end flex-1 text-xs items-center" >
< input type = "number" min = "1" id = "language-top-picker" data-entity = "3" class = "top-picker bg-gray-800 rounded-md text-center" value = "10" >
< / div >
2021-01-05 14:41:01 +03:00
< / div >
2021-12-16 00:46:02 +03:00
< canvas id = "chart-language" class = "mt-4" > < / 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 >
2021-01-05 14:41:01 +03:00
< / div >
2020-08-30 17:51:37 +03:00
< / div >
2021-12-16 00:46:02 +03:00
< div class = "p-4 px-6 pb-10 bg-gray-850 text-gray-300 rounded-md shadow flex flex-col" id = "editor-container" style = "height: 300px" >
< div class = "flex justify-between" >
< span class = "font-semibold text-lg w-1/2 flex-1 whitespace-no-wrap" > Editors< / span >
< div class = "flex justify-end flex-1 text-xs items-center" >
< input type = "number" min = "1" id = "editor-top-picker" data-entity = "2" class = "top-picker bg-gray-800 rounded-md text-center" value = "10" >
< / div >
< / div >
< canvas id = "chart-editor" class = "mt-4" > < / 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 >
2020-08-30 17:51:37 +03:00
< / div >
2021-12-16 00:46:02 +03:00
2020-05-24 14:41:19 +03:00
< / div >
< / div >
2021-12-16 00:46:02 +03:00
2021-03-25 12:51:36 +03:00
< div class = "w-full lg:w-1/2 p-1" style = "max-width: 100vw;" >
2021-12-16 00:46:02 +03:00
< div class = "p-4 px-6 pb-10 bg-gray-850 text-gray-300 rounded-md shadow flex flex-col" id = "os-container" style = "height: 300px" >
2021-01-05 14:41:01 +03:00
< div class = "flex justify-between" >
2021-12-16 00:46:02 +03:00
< div >
< span class = "font-semibold text-lg w-1/2 flex-1 whitespace-no-wrap mr-1 cursor-pointer" > Operating Systems< / span >
< span class = "font-semibold text-lg w-1/2 flex-1 whitespace-no-wrap ml-1 cursor-pointer text-gray-600" onclick = "swapCharts('machine', 'os')" > Machines< / span >
< / div >
2021-01-05 14:41:01 +03:00
< div class = "flex justify-end flex-1 text-xs items-center" >
2021-12-16 00:46:02 +03:00
< input type = "number" min = "1" id = "os-top-picker" data-entity = "1" class = "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-12-16 00:46:02 +03:00
< canvas id = "chart-os" class = "mt-4" > < / 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-12-16 00:46:02 +03:00
< div class = "hidden w-full lg:w-1/2 p-1" style = "max-width: 100vw;" >
< div class = "p-4 px-6 pb-10 bg-gray-850 text-gray-300 rounded-md shadow flex flex-col" id = "machine-container" style = "height: 300px" >
2021-01-05 14:41:01 +03:00
< div class = "flex justify-between" >
2021-12-16 00:46:02 +03:00
< div >
< span class = "font-semibold text-lg w-1/2 flex-1 whitespace-no-wrap mr-1 cursor-pointer text-gray-600" onclick = "swapCharts('os', 'machine')" > Operating Systems< / span >
< span class = "font-semibold text-lg w-1/2 flex-1 whitespace-no-wrap ml-1 cursor-pointer" > Machines< / span >
< / div >
2021-01-05 14:41:01 +03:00
< div class = "flex justify-end flex-1 text-xs items-center" >
2021-12-16 00:46:02 +03:00
< input type = "number" min = "1" id = "machine-top-picker" data-entity = "4" class = "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-12-16 00:46:02 +03:00
< canvas id = "chart-machine" class = "mt-4" > < / 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;" >
2021-12-16 00:46:02 +03:00
< div class = "p-4 px-6 pb-10 bg-gray-850 text-gray-300 rounded-md shadow flex flex-col" id = "label-container" style = "height: 300px" >
< div class = "flex justify-between text-lg" >
< span class = "font-semibold whitespace-no-wrap" > Labels< / span >
< a href = "settings#details-labels" class = "ml-4 h-8 inline flex-grow" >
< span class = "iconify inline" data-icon = "twemoji:gear" > < / span >
< / a >
2021-06-11 21:59:34 +03:00
< div class = "flex justify-end flex-1 text-xs items-center" >
< label for = "label-top-picker" class = "mr-1" > Show: < / label >
2021-12-16 00:46:02 +03:00
< input type = "number" min = "1" id = "label-top-picker" data-entity = "5" class = "top-picker bg-gray-800 rounded-md text-center" value = "10" >
2021-06-11 21:59:34 +03:00
< / div >
< / div >
2021-12-16 00:46:02 +03:00
< canvas id = "chart-label" class = "mt-4" > < / canvas >
2021-06-11 21:59:34 +03:00
< 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 }}
2021-12-16 00:46:02 +03:00
< div class = "max-w-screen-sm flex flex-col items-center mt-12 space-y-8 text-gray-300" >
2021-02-12 12:10:44 +03:00
< 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 >
2021-12-16 00:46:02 +03:00
< h1 class = "font-semibold text-2xl text-white m-0 w-full" > Welcome to Wakapi!< / h1 >
< p >
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.
2021-02-12 12:10:44 +03:00
< / p >
< div class = "w-full pt-10 flex flex-col space-y-4" >
2021-12-16 00:46:02 +03:00
< h1 class = "font-semibold text-2xl text-white m-0 mb-2" > Setup Instructions< / h1 >
< div class = "w-full bg-gray-850 text-left rounded-md py-4 px-8 text-xs font-mono shadow-md" >
2021-02-12 12:10:44 +03:00
# < 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 >
< / 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
< script >
const languageColors = {{ .LanguageColors | json }}
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
2021-08-29 04:10:54 +03:00
if (document.getElementById('to-date-picker') !== null) {
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);
}
} else {
document.getElementById('api-key-instruction').innerHTML = document.getElementById('api-key-container').value
2021-03-06 10:33:08 +03:00
}
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 >
