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" . }}
2022-01-02 20:30:22 +03:00
< script src = "assets/js/components/time-picker.js" > < / script >
< script type = "module" src = "assets/js/components/summary.js" > < / script >
2021-12-16 21:30:09 +03:00
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 14:39:41 +03:00
{{ template "alerts.tpl.html" . }}
2022-01-02 20:30:22 +03:00
{{ template "time-picker.tpl.html" . }}
2021-12-16 00:46:02 +03:00
{{ if .User.HasData }}
2021-10-14 13:01:06 +03:00
2022-01-02 20:30:22 +03:00
< div class = "flex justify-end mt-12 relative" id = "summary-page" v-scope >
< div v-scope = "TimePicker({
fromDate: '{{ .From | simpledate }}',
toDate: '{{ .To | ceildate | simpledate }}',
timeSelection: '{{ .From | datetime }} - {{ .To | ceildate | datetime }}'
})" @vue:mounted="mounted">< / div >
2020-05-24 14:41:19 +03:00
< / div >
2021-02-13 14:59:59 +03:00
{{ end }}
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 -->
2021-12-19 13:12:49 +03:00
< div class = "flex gap-x-6 gap-y-6 w-full mb-4 flex-wrap" >
< div class = "flex flex-col space-y-2 w-40 p-4 rounded-md p-4 text-gray-300 bg-gray-850 leading-none border-2 border-green-700" >
2021-12-16 00:46:02 +03:00
< span class = "text-xs text-gray-500 font-semibold" > Total Time< / span >
2021-12-22 17:50:47 +03:00
< span class = "font-semibold text-xl truncate" title = "{{ .TotalTime | duration }}" > {{ .TotalTime | duration }}< / span >
2021-12-16 00:46:02 +03:00
< / div >
2021-12-22 12:17:05 +03:00
< div class = "flex flex-col space-y-2 w-40 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 Heartbeats< / span >
2021-12-22 17:50:47 +03:00
< span class = "font-semibold text-xl truncate" title = "{{ .NumHeartbeats }}" > {{ .NumHeartbeats }}< / span >
2021-12-22 12:17:05 +03:00
< / div >
2021-12-19 13:12:49 +03:00
< div class = "flex flex-col space-y-2 w-40 p-4 rounded-md p-4 text-gray-300 bg-gray-850 leading-none border-2 border-green-700" >
2021-12-16 00:46:02 +03:00
< span class = "text-xs text-gray-500 font-semibold" > Top Project< / span >
2021-12-22 17:50:47 +03:00
< span class = "font-semibold text-xl truncate" title = "{{ .MaxByToString 0 }}" > {{ .MaxByToString 0 }}< / span >
2021-12-16 00:46:02 +03:00
< / div >
2021-12-19 13:12:49 +03:00
< div class = "flex flex-col space-y-2 w-40 p-4 rounded-md p-4 text-gray-300 bg-gray-850 leading-none border-2 border-green-700" >
2021-12-16 00:46:02 +03:00
< span class = "text-xs text-gray-500 font-semibold" > Top Language< / span >
2021-12-22 17:50:47 +03:00
< span class = "font-semibold text-xl truncate" title = "{{ .MaxByToString 1 }}" > {{ .MaxByToString 1 }}< / span >
2021-12-16 00:46:02 +03:00
< / div >
2021-12-19 13:12:49 +03:00
< div class = "flex flex-col space-y-2 w-40 p-4 rounded-md p-4 text-gray-300 bg-gray-850 leading-none border-2 border-green-700" >
2021-12-16 00:46:02 +03:00
< span class = "text-xs text-gray-500 font-semibold" > Top OS< / span >
2021-12-22 17:50:47 +03:00
< span class = "font-semibold text-xl truncate" title = "{{ .MaxByToString 3 }}" > {{ .MaxByToString 3 }}< / span >
2021-12-16 00:46:02 +03:00
< / div >
2021-12-19 13:12:49 +03:00
< div class = "flex flex-col space-y-2 w-40 p-4 rounded-md p-4 text-gray-300 bg-gray-850 leading-none border-2 border-green-700" >
2021-12-16 00:46:02 +03:00
< span class = "text-xs text-gray-500 font-semibold" > Top Editor< / span >
2021-12-22 17:50:47 +03:00
< span class = "font-semibold text-xl truncate" title = "{{ .MaxByToString 2 }}" > {{ .MaxByToString 2 }}< / span >
2021-12-16 00:46:02 +03:00
< / 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-19 15:04:00 +03:00
< span class = "font-semibold text-lg w-1/2 flex-1 whitespace-nowrap" > Projects< / span >
2021-01-05 14:41:01 +03:00
< div class = "flex justify-end flex-1 text-xs items-center" >
2021-12-16 01:59:40 +03:00
< input type = "number" min = "1" id = "project-top-picker" data-entity = "0" class = "top-picker bg-gray-800 rounded-md text-center w-12" 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" >
2021-12-19 15:04:00 +03:00
< span class = "font-semibold text-lg w-1/2 flex-1 whitespace-nowrap" > Languages< / span >
2021-12-16 00:46:02 +03:00
< div class = "flex justify-end flex-1 text-xs items-center" >
2021-12-16 01:59:40 +03:00
< input type = "number" min = "1" id = "language-top-picker" data-entity = "3" class = "top-picker bg-gray-800 rounded-md text-center w-12" value = "10" >
2021-12-16 00:46:02 +03:00
< / 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" >
2021-12-19 15:04:00 +03:00
< span class = "font-semibold text-lg w-1/2 flex-1 whitespace-nowrap" > Editors< / span >
2021-12-16 00:46:02 +03:00
< div class = "flex justify-end flex-1 text-xs items-center" >
2021-12-16 01:59:40 +03:00
< input type = "number" min = "1" id = "editor-top-picker" data-entity = "2" class = "top-picker bg-gray-800 rounded-md text-center w-12" value = "10" >
2021-12-16 00:46:02 +03:00
< / 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 >
2021-12-19 15:04:00 +03:00
< span class = "font-semibold text-lg w-1/2 flex-1 whitespace-nowrap mr-1 cursor-pointer" > Operating Systems< / span >
< span class = "font-semibold text-lg w-1/2 flex-1 whitespace-nowrap ml-1 cursor-pointer text-gray-600" onclick = "swapCharts('machine', 'os')" > Machines< / span >
2021-12-16 00:46:02 +03:00
< / div >
2021-01-05 14:41:01 +03:00
< div class = "flex justify-end flex-1 text-xs items-center" >
2021-12-16 01:59:40 +03:00
< input type = "number" min = "1" id = "os-top-picker" data-entity = "1" class = "top-picker bg-gray-800 rounded-md text-center w-12" 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 >
2021-12-19 15:04:00 +03:00
< span class = "font-semibold text-lg w-1/2 flex-1 whitespace-nowrap 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-nowrap ml-1 cursor-pointer" > Machines< / span >
2021-12-16 00:46:02 +03:00
< / div >
2021-01-05 14:41:01 +03:00
< div class = "flex justify-end flex-1 text-xs items-center" >
2021-12-16 01:59:40 +03:00
< input type = "number" min = "1" id = "machine-top-picker" data-entity = "4" class = "top-picker bg-gray-800 rounded-md text-center w-12" 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" >
2021-12-22 12:17:05 +03:00
< div class = "flex justify-between text-lg" style = "margin-bottom: -10px" >
2021-12-19 15:04:00 +03:00
< span class = "font-semibold whitespace-nowrap" > Labels< / span >
2021-12-16 14:39:41 +03:00
< a href = "settings#data" class = "ml-4 inline p-2 hover:bg-gray-800 rounded" style = "margin-top: -5px" >
2021-12-16 00:46:02 +03:00
< 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" >
2021-12-16 01:59:40 +03:00
< input type = "number" min = "1" id = "label-top-picker" data-entity = "5" class = "top-picker bg-gray-800 rounded-md text-center w-12" 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 14:39:41 +03:00
< h1 class = "font-semibold text-3xl text-white m-0 w-full" > Welcome to Wakapi!< / h1 >
2021-12-16 00:46:02 +03:00
< 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 14:39:41 +03:00
< h1 class = "font-semibold text-3xl text-white m-0 mb-2" > Setup Instructions< / h1 >
2021-12-16 00:46:02 +03:00
< 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-12-16 21:30:09 +03:00
# Set < em > api_key = < span id = "api-key-instruction" > {{ .ApiKey }}< / 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 }}
2020-12-03 01:16:12 +03:00
< / script >
2021-12-19 13:23:09 +03:00
< script src = "assets/js/summary.js" > < / script >
2021-12-16 21:30:09 +03:00
2020-05-24 14:41:19 +03:00
< / body >
< / html >
