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-04-18 12:39:26 +03:00
< div id = "summary-page" v-scope >
< div class = "flex justify-end mt-12 relative" >
< div v-scope = "TimePicker({
fromDate: '{{ .From | simpledate }}',
toDate: '{{ .To | ceildate | simpledate }}',
timeSelection: '{{ .From | datetime }} - {{ .To | ceildate | datetime }}'
})" @vue:mounted="mounted">< / div >
< / div >
2020-05-24 14:41:19 +03:00
2022-04-18 12:39:26 +03:00
{{ end }}
2021-02-13 14:59:59 +03:00
2022-04-18 12:39:26 +03:00
< main class = "flex flex-col items-center mt-10 flex-grow" >
2021-02-12 12:10:44 +03:00
2022-04-18 12:39:26 +03:00
{{ if .User.HasData }}
2021-02-12 12:10:44 +03:00
2022-04-18 12:39:26 +03:00
{{ if not .IsProjectDetails }}
<!-- KPIs -->
< 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" >
< span class = "text-xs text-gray-500 font-semibold" > Total Time< / span >
< span class = "font-semibold text-xl truncate" title = "{{ .TotalTime | duration }}" > {{ .TotalTime | duration }}< / span >
2020-05-24 14:41:19 +03:00
< / div >
2022-04-18 12:39:26 +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 >
< span class = "font-semibold text-xl truncate" title = "{{ .NumHeartbeats }}" > {{ .NumHeartbeats }}< / span >
2022-01-02 22:04:29 +03:00
< / div >
2022-04-18 12:39:26 +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" > Top Project< / span >
< span class = "font-semibold text-xl truncate" title = "{{ .MaxByToString 0 }}" > {{ .MaxByToString 0 }}< / span >
2022-01-02 22:04:29 +03:00
< / div >
2022-04-18 12:39:26 +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" > Top Language< / span >
< span class = "font-semibold text-xl truncate" title = "{{ .MaxByToString 1 }}" > {{ .MaxByToString 1 }}< / span >
2022-01-02 22:04:29 +03:00
< / div >
2022-04-18 12:39:26 +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" > Top OS< / span >
< span class = "font-semibold text-xl truncate" title = "{{ .MaxByToString 3 }}" > {{ .MaxByToString 3 }}< / span >
2022-01-02 22:04:29 +03:00
< / div >
2022-04-18 12:39:26 +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" > Top Editor< / span >
< span class = "font-semibold text-xl truncate" title = "{{ .MaxByToString 2 }}" > {{ .MaxByToString 2 }}< / span >
2022-01-02 22:04:29 +03:00
< / div >
< / div >
2022-04-18 12:39:26 +03:00
{{ else }}
< div class = "mb-8 w-full" >
< h1 class = "font-semibold text-3xl text-white" > Project "{{ .GetProjectFilter }}"< / h1 >
< div class = "flex space-x-4 items-center" >
< h4 class = "font-semibold text-lg text-gray-500" > {{ .TotalTime | duration }}< / h4 >
< div v-cloak v-show = "currentInterval" >
< img :src = "'api/badge/{{ .User.ID }}/interval:' + currentInterval + '/project:{{ .GetProjectFilter }}'" alt = "Coding Time Badge" >
2020-05-24 14:41:19 +03:00
< / div >
< / div >
2022-04-18 12:39:26 +03:00
< / div >
{{ end }}
2021-12-16 00:46:02 +03:00
2022-04-18 12:39:26 +03:00
< div class = "grid gap-2 grid-cols-1 md:grid-cols-2 w-full mt-4" >
< div class = "row-span-2 p-4 px-6 pb-10 bg-gray-850 text-gray-300 rounded-md shadow flex flex-col {{ if .IsProjectDetails }} hidden {{ end }}" id = "project-container" style = "max-height: 608px; max-width: 100vw" >
2021-01-05 14:41:01 +03:00
< div class = "flex justify-between" >
2022-04-18 12:39:26 +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" >
2022-04-18 12:39:26 +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 >
2022-04-18 12:39:26 +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 >
2022-01-02 22:04:29 +03:00
2022-04-18 12:39:26 +03:00
< div class = "row-span-2 p-4 px-6 pb-10 bg-gray-850 text-gray-300 rounded-md shadow flex flex-col {{ if not .IsProjectDetails }} hidden {{ end }}" id = "branch-container" style = "max-height: 608px; max-width: 100vw" >
2021-01-05 14:41:01 +03:00
< div class = "flex justify-between" >
2022-04-18 12:39:26 +03:00
< span class = "font-semibold text-lg w-1/2 flex-1 whitespace-nowrap" > Branches< / span >
< div class = "flex justify-end flex-1 text-xs items-center" >
< input type = "number" min = "1" id = "branch-top-picker" data-entity = "6" class = "top-picker bg-gray-800 rounded-md text-center w-12" value = "10" >
2021-12-16 00:46:02 +03:00
< / div >
2022-04-18 12:39:26 +03:00
< / div >
< canvas id = "chart-branches" class = "mt-2" > < / 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 class = "p-4 px-6 pb-10 bg-gray-850 text-gray-300 rounded-md shadow flex flex-col" id = "language-container" style = "max-height: 300px" >
< div class = "flex justify-between" >
< span class = "font-semibold text-lg w-1/2 flex-1 whitespace-nowrap" > Languages< / span >
2021-01-05 14:41:01 +03:00
< div class = "flex justify-end flex-1 text-xs items-center" >
2022-04-18 12:39:26 +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-01-05 14:41:01 +03:00
< / div >
2020-08-30 17:51:37 +03:00
< / div >
2022-04-18 12:39:26 +03:00
< canvas id = "chart-language" 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 >
2022-01-02 22:04:29 +03:00
2022-04-18 12:39:26 +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 = "max-height: 300px" >
< div class = "flex justify-between" >
< span class = "font-semibold text-lg w-1/2 flex-1 whitespace-nowrap" > Editors< / span >
2021-06-11 21:59:34 +03:00
< div class = "flex justify-end flex-1 text-xs items-center" >
2022-04-18 12:39:26 +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-06-11 21:59:34 +03:00
< / div >
< / div >
2022-04-18 12:39:26 +03:00
< canvas id = "chart-editor" 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 >
2021-02-12 12:10:44 +03:00
2022-04-18 12:39:26 +03:00
< div class = "{{ if .IsProjectDetails }} hidden {{ end }}" 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 = "os-container" style = "max-height: 300px" >
< div class = "flex justify-between" >
< div >
< 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 >
< / div >
< div class = "flex justify-end flex-1 text-xs items-center" >
< 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" >
< / div >
< / div >
< canvas id = "chart-os" 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 >
< / div >
< / div >
< div class = "hidden" 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 = "max-height: 300px" >
< div class = "flex justify-between" >
< div >
< 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 >
< / div >
< div class = "flex justify-end flex-1 text-xs items-center" >
< 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" >
< / div >
< / div >
< canvas id = "chart-machine" 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 >
< / div >
< / div >
2021-02-12 12:10:44 +03:00
2022-04-18 12:39:26 +03:00
< div style = "max-width: 100vw;" >
< div class = "p-4 px-6 pb-10 bg-gray-850 text-gray-300 rounded-md shadow flex flex-col {{ if .IsProjectDetails }} hidden {{ end }}" id = "label-container" style = "max-height: 300px" >
< div class = "flex justify-between text-lg" style = "margin-bottom: -10px" >
< span class = "font-semibold whitespace-nowrap" > Labels< / span >
< a href = "settings#data" class = "ml-4 inline p-2 hover:bg-gray-800 rounded" style = "margin-top: -5px" >
< span class = "iconify inline" data-icon = "twemoji:gear" > < / span >
< / a >
< div class = "flex justify-end flex-1 text-xs items-center" >
< 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" >
< / div >
< / div >
< canvas id = "chart-label" 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 >
< / div >
< / div >
2021-02-12 12:10:44 +03:00
< / div >
2022-04-18 12:39:26 +03:00
{{ else }}
< div class = "max-w-screen-sm flex flex-col items-center mt-12 space-y-8 text-gray-300" >
< div class = "pb-4" >
< img src = "assets/images/welcome.svg" width = "200px" alt = "User welcome illustration" >
< / div >
< h1 class = "font-semibold text-3xl 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.
< / p >
< div class = "w-full pt-10 flex flex-col space-y-4" >
< h1 class = "font-semibold text-3xl 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" >
# < strong > Step 1:< / strong > Download WakaTime plugin for your IDE< br >
# See: https://wakatime.com/plugins< br > < br >
# < strong > Step 2:< / strong > Set your ~/.wakatime.cfg to this:< br > < br >
<!-- https://github.com/muety/wakapi/issues/224#issuecomment - 890855563 -->
[settings]< br >
api_url = < span class = "with-url-inner" > %s/api< / span > < br >
api_key = < span id = "api-key-instruction" > {{ .ApiKey }}< / span > < br > < br >
# < strong > Step 3:< / strong > Start coding and then check back here!
< / div >
2021-02-12 12:10:44 +03:00
< / div >
< / div >
2022-04-18 12:39:26 +03:00
{{ end }}
2021-02-12 12:10:44 +03:00
2022-04-18 12:39:26 +03:00
< / main >
< / div >
2020-05-24 14:41:19 +03:00
{{ template "footer.tpl.html" . }}
{{ template "foot.tpl.html" . }}
2020-12-03 01:16:12 +03:00
< script >
2022-03-27 22:56:13 +03:00
const editorColors = {{ .EditorColors | json }}
2020-12-03 01:16:12 +03:00
const languageColors = {{ .LanguageColors | json }}
2022-03-27 22:56:13 +03:00
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 }}
2022-01-02 22:04:29 +03:00
{{ if .IsProjectDetails }}
wakapiData.branches = {{ .Branches | json }}
{{ else }}
wakapiData.branches = []
{{ end }}
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 >
2022-03-27 22:56:13 +03:00
< / html >
