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 21:30:09 +03:00
< script type = "module" >
// Constants
const timeSelection = '{{ .From | datetime }} - {{ .To | ceildate | datetime }}'
const fromDate = '{{ .From | simpledate }}'
const toDate = '{{ .To | ceildate | simpledate }}'
// Elements
const formTimePicker = document.getElementById('time-picker-form')
PetiteVue.createApp({
$delimiters: ['${', '}'],
state: {
showDropdownTimepicker: false,
},
fromDate: fromDate,
toDate: toDate,
timeSelection: timeSelection,
onDateUpdated() {
formTimePicker.submit()
},
mounted() {
window.addEventListener('click', (e) => {
const skip = findParentAttribute(e.target, 'data-trigger-for')?.value
Object.keys(this.state).filter(k => k !== skip).forEach(k => this.state[k] = false)
})
const query = new URLSearchParams(window.location.search)
if (query.has('interval')) {
const refEl = document.getElementById(`time-option-${query.get('interval')}`)
this.timeSelection = refEl ? refEl.innerText : 'Unknown'
}
}
}).mount('#summary-page')
< / script >
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" . }}
2021-12-16 00:46:02 +03:00
{{ if .User.HasData }}
2021-10-14 13:01:06 +03:00
2021-12-16 21:30:09 +03:00
< div class = "flex justify-end mt-12 relative" id = "summary-page" v-scope @ vue:mounted = "mounted" >
< 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" @ click = "state.showDropdownTimepicker = !state.showDropdownTimepicker" data-trigger-for = "showDropdownTimepicker" >
2021-12-16 00:46:02 +03:00
< span class = "iconify inline text-2xl text-gray-400 flex-grow" data-icon = "fa-regular:calendar-alt" > < / span >
2021-12-16 21:30:09 +03:00
< a v-cloak id = "current-time-selection" class = "text-gray-300 -mb-1" > ${timeSelection}< / a >
2021-12-16 00:46:02 +03:00
< 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 21:30:09 +03:00
< div v-cloak v-show = "state.showDropdownTimepicker" class = "z-10 absolute top-0 right-0 popup mt-12 w-40" id = "time-picker-dropdown" >
2021-12-16 00:46:02 +03:00
< div class = "flex-grow flex flex-col flex bg-gray-850 shadow-md rounded w-40 p-1 " >
2021-12-16 21:30:09 +03:00
< 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" @ click = "state.showDropdownTimepicker = !state.showDropdownTimepicker" data-trigger-for = "showDropdownTimepicker" > 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" @ click = "state.showDropdownTimepicker = !state.showDropdownTimepicker" data-trigger-for = "showDropdownTimepicker" > 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" @ click = "state.showDropdownTimepicker = !state.showDropdownTimepicker" data-trigger-for = "showDropdownTimepicker" > 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" @ click = "state.showDropdownTimepicker = !state.showDropdownTimepicker" data-trigger-for = "showDropdownTimepicker" > 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" @ click = "state.showDropdownTimepicker = !state.showDropdownTimepicker" data-trigger-for = "showDropdownTimepicker" > 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" @ click = "state.showDropdownTimepicker = !state.showDropdownTimepicker" data-trigger-for = "showDropdownTimepicker" > 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" @ click = "state.showDropdownTimepicker = !state.showDropdownTimepicker" data-trigger-for = "showDropdownTimepicker" > 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" @ click = "state.showDropdownTimepicker = !state.showDropdownTimepicker" data-trigger-for = "showDropdownTimepicker" > 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" @ click = "state.showDropdownTimepicker = !state.showDropdownTimepicker" data-trigger-for = "showDropdownTimepicker" > All Time< / a >
2021-12-16 00:46:02 +03:00
< 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 >
2021-12-16 21:30:09 +03:00
< input v-model = "fromDate" id = "from-date-picker" type = "date" name = "from" max = "{{ .ToTime.T | simpledate }}" class = "text-sm text-gray-300 bg-gray-900 cursor-pointer"
required @input="onDateUpdated" data-trigger-for="showDropdownTimepicker">
2021-12-16 00:46:02 +03:00
< / 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 >
2021-12-16 21:30:09 +03:00
< input v-model = "toDate" id = "to-date-picker" type = "date" name = "to" min = "{{ .FromTime.T | simpledate }}" class = "text-sm text-gray-300 bg-gray-900 cursor-pointer"
required @input="onDateUpdated" data-trigger-for="showDropdownTimepicker">
2021-12-16 00:46:02 +03:00
< / 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 }}
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 >
< span class = "font-semibold text-xl truncate" > {{ .TotalTime | duration }}< / span >
< / 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 >
< span class = "font-semibold text-xl truncate" > {{ .MaxByToString 0 }}< / span >
< / 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 >
< span class = "font-semibold text-xl truncate" > {{ .MaxByToString 1 }}< / span >
< / 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 >
< span class = "font-semibold text-xl truncate" > {{ .MaxByToString 3 }}< / span >
< / 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 >
< 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 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" >
< 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" >
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" >
< 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" >
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 >
< 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 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 >
< 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 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" >
< div class = "flex justify-between text-lg" >
< span class = "font-semibold whitespace-no-wrap" > 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-16 21:30:09 +03:00
< script src = "assets/summary.js" > < / script >
2020-05-24 14:41:19 +03:00
< / body >
< / html >
