Global/wakapi
1
0
Fork 0
mirror of https://github.com/muety/wakapi.git synced 2025-12-05 22:20:24 -08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: color variables

Browse Source
This commit is contained in:
Max Koon
2025-09-01 12:02:52 -04:00
parent ae66e69a1d
commit 95f465ae30
10 changed files with 164 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
static/assets/css/app.css
View File

@@ -16,6 +16,19 @@ main {
display: none;
}
:root {
--background: rgb(17 24 39);
--card: #242b3a;
--muted: rgb(107 114 128);
--secondary: rgb(156 163 175);
--foreground: rgb(209 213 219);
--primary: rgb(55 65 81);
--accent: 21 128 61;
--danger: 220 38 38;
}
/* Additional classes */
.bg-gray-850 {
@@ -72,11 +85,11 @@ main {
}
.btn-primary {
@apply py-2 px-4 font-semibold rounded bg-green-700 hover:bg-green-800 text-white text-sm;
@apply py-2 px-4 font-semibold rounded bg-accent hover:bg-accent/80 text-white text-sm;
}
.btn-danger {
@apply py-2 px-4 font-semibold rounded bg-red-600 hover:bg-red-700 text-white text-sm;
@apply py-2 px-4 font-semibold rounded bg-danger hover:bg-danger/80 text-white text-sm;
}
.btn-small {
@@ -84,7 +97,7 @@ main {
}
.input-default {
@apply appearance-none bg-gray-850 focus:bg-gray-800 text-gray-300 outline-none rounded w-full py-2 px-4;
@apply appearance-none bg-card focus:bg-card text-foreground outline-none rounded w-full py-2 px-4;
}
.select-default {
@@ -92,11 +105,11 @@ main {
}
.menu-item {
@apply flex items-center text-sm font-semibold space-x-2 rounded hover:bg-gray-850 py-2 px-4 cursor-pointer;
@apply flex items-center text-sm font-semibold space-x-2 rounded hover:bg-card py-2 px-4 cursor-pointer;
}
.submenu-item {
@apply hover:bg-gray-800 rounded p-1 text-right;
@apply hover:bg-card rounded p-1 text-right;
}
.chip {
@@ -179,7 +192,7 @@ main {
.entity-filter-control {
width: 180px;
@apply text-gray-300 text-sm;
@apply text-foreground text-sm;
}
.entity-filter-control label {
@@ -241,4 +254,4 @@ main {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
}
}

2
static/assets/css/app.dist.css
View File

File diff suppressed because one or more lines are too long

BIN
static/assets/css/app.dist.css.br
View File

Binary file not shown.

50
static/assets/js/icons.dist.js
View File

File diff suppressed because one or more lines are too long

BIN
static/assets/js/icons.dist.js.br
View File

Binary file not shown.

11
tailwind.config.js
View File

@@ -2,9 +2,20 @@ const colors = require('tailwindcss/colors')
module.exports = {
theme: {
darkMode: 'class',
extend: {
colors: {
green: colors.emerald,
background: 'var(--background)',
card: 'var(--card)',
muted: 'var(--muted)',
secondary: 'var(--secondary)',
primary: 'var(--primary)',
foreground: 'var(--foreground)',
accent: 'rgb(var(--accent) / <alpha-value>)',
danger: 'rgb(var(--danger) / <alpha-value>)',
},
width: {
'16': '4rem',

2
views/logo.tpl.html
View File

@@ -1,3 +1,3 @@
<a id="logo-container" class="text-2xl font-semibold text-white inline-block align-middle" href="">
<img src="assets/images/logo.svg" width="110px" height="42px" alt="Logo">
</a>
</a>

66
views/menu-main.tpl.html
View File

@@ -6,56 +6,58 @@
</div>
<a class="menu-item" href="summary">
<span class="iconify inline text-2xl text-gray-400" data-icon="ic:round-dashboard"></span>
<span class="text-gray-300 hidden lg:inline-block">Dashboard</span>
<span class="iconify inline text-2xl text-secondary" data-icon="ic:round-dashboard"></span>
<span class="text-foreground hidden lg:inline-block">Dashboard</span>
</a>
{{ if .LeaderboardEnabled }}
<a class="menu-item" href="leaderboard">
<span class="iconify inline text-2xl text-gray-400" data-icon="fluent:data-bar-horizontal-24-filled"></span>
<span class="text-gray-300 hidden lg:inline-block">Leaderboard</span>
<span class="iconify inline text-2xl text-secondary" data-icon="fluent:data-bar-horizontal-24-filled"></span>
<span class="text-foreground hidden lg:inline-block">Leaderboard</span>
</a>
{{ end }}
<a class="menu-item" href="projects">
<span class="iconify inline text-2xl text-gray-400 p-px" data-icon="octicon:project-16"></span>
<span class="text-gray-300 hidden lg:inline-block">Projects</span>
<span class="iconify inline text-2xl text-secondary p-px" data-icon="octicon:project-16"></span>
<span class="text-foreground hidden lg:inline-block">Projects</span>
</a>
{{ if false }}
<div class="menu-item hidden sm:flex imp:cursor-not-allowed">
<span class="iconify inline text-2xl text-gray-700" data-icon="bi:people-fill"></span>
<a class="text-gray-600 leading-none hidden lg:inline-block">Team<br>
<span class="iconify inline text-2xl text-muted" data-icon="bi:people-fill"></span>
<a class="text-muted leading-none hidden lg:inline-block">Team<br>
<span class="text-xxs whitespace-nowrap">(coming soon)</span>
</a>
</div>
{{ end }}
<div class="menu-item relative" @click="state.showDropdownResources = !state.showDropdownResources" data-trigger-for="showDropdownResources">
<span class="iconify inline text-2xl text-gray-400" data-icon="ph:books-bold"></span>
<a class="text-gray-400 hidden lg:inline-block">Resources</a>
<span class="iconify inline text-xl text-gray-400" data-icon="akar-icons:chevron-down"></span>
<span class="iconify inline text-2xl text-secondary" data-icon="ph:books-bold"></span>
<a class="text-secondary hidden lg:inline-block">Resources</a>
<span class="iconify inline text-xl text-secondary" data-icon="akar-icons:chevron-down"></span>
<div v-cloak v-show="state.showDropdownResources" class="flex bg-gray-850 shadow-md z-10 p-2 absolute top-0 right-0 rounded popup mt-12 w-full" id="resources-menu-dropdown" style="min-width: 128px">
<div v-cloak v-show="state.showDropdownResources" class="flex bg-card shadow-md z-10 p-2 absolute top-0 right-0 rounded popup mt-12 w-full" id="resources-menu-dropdown" style="min-width: 128px">
<div class="grow flex flex-col">
<div class="submenu-item">
<a class="flex justify-between w-full text-gray-300 items-center px-2 font-semibold" href="https://github.com/muety/wakapi" target="_blank" rel="noreferrer noopener" @click="state.showDropdownResources = !state.showDropdownResources" data-trigger-for="showDropdownResources">
<a class="flex justify-between w-full text-foreground items-center px-2 font-semibold" href="https://github.com/muety/wakapi" target="_blank" rel="noreferrer noopener" @click="state.showDropdownResources = !state.showDropdownResources" data-trigger-for="showDropdownResources">
<span class="text-sm">GitHub</span>
<span class="iconify inline" data-icon="codicon:github-inverted"></span>
</a>
</div>
<div class="submenu-item">
<a class="flex justify-between w-full text-gray-300 items-center px-2 font-semibold" href="swagger-ui" @click="state.showDropdownResources = !state.showDropdownResources" data-trigger-for="showDropdownResources">
<a class="flex justify-between w-full text-foreground items-center px-2 font-semibold" href="swagger-ui" @click="state.showDropdownResources = !state.showDropdownResources" data-trigger-for="showDropdownResources">
<span class="text-sm">API Docs</span>
<span class="iconify inline" data-icon="bx:bx-code-curly"></span>
</a>
</div>
<div class="submenu-item">
<a class="flex justify-between w-full text-gray-300 items-center px-2 font-semibold" href="https://wakatime.com" target="_blank" rel="noreferrer noopener" @click="state.showDropdownResources = !state.showDropdownResources" data-trigger-for="showDropdownResources">
<a class="flex justify-between w-full text-foreground items-center px-2 font-semibold" href="https://wakatime.com" target="_blank" rel="noreferrer noopener" @click="state.showDropdownResources = !state.showDropdownResources" data-trigger-for="showDropdownResources">
<span class="text-sm">WakaTime</span>
<span class="iconify inline" data-icon="simple-icons:wakatime"></span>
</a>
</div>
<div class="submenu-item">
<a class="flex justify-between w-full text-gray-300 items-center px-2 font-semibold" href="https://github.com/sponsors/muety" target="_blank" rel="noreferrer noopener" @click="state.showDropdownResources = !state.showDropdownResources" data-trigger-for="showDropdownResources">
<a class="flex justify-between w-full text-foreground items-center px-2 font-semibold" href="https://github.com/sponsors/muety" target="_blank" rel="noreferrer noopener" @click="state.showDropdownResources = !state.showDropdownResources" data-trigger-for="showDropdownResources">
<span class="text-sm">Donate</span>
<span class="iconify inline" data-icon="bx:bxs-heart"></span>
</a>
@@ -65,8 +67,8 @@
</div>
<a class="menu-item" href="settings">
<span class="iconify inline text-2xl text-gray-400" data-icon="ci:settings-filled"></span>
<span class="text-gray-400 hidden lg:inline-block">Settings</span>
<span class="iconify inline text-2xl text-secondary" data-icon="ci:settings-filled"></span>
<span class="text-secondary hidden lg:inline-block">Settings</span>
</a>
<div class="grow"></div>
@@ -77,7 +79,7 @@
{{ if .SharedLoggedInViewModel.User.HasActiveSubscription }}
<span class="iconify inline text-gold mr-1" data-icon="jam:crown-f" style="margin-bottom: -2px" title="Thanks for supporting Wakapi!"></span>
{{ end }}
<a class="text-gray-300">{{ .SharedLoggedInViewModel.User.ID }}</a>
<a class="text-foreground">{{ .SharedLoggedInViewModel.User.ID }}</a>
</div>
{{ if .SharedLoggedInViewModel.User.Email }}
<span class="text-xxs text-gray-500">{{ .SharedLoggedInViewModel.User.Email }}</span>
@@ -89,25 +91,25 @@
<span class="iconify inline cursor-pointer text-gray-500 rounded-full border-green-700" style="width: 32px; height: 32px" data-icon="ic:round-person" @click="state.showDropdownUser = !state.showDropdownUser" data-trigger-for="showDropdownUser"></span>
{{ end }}
<div v-cloak v-show="state.showDropdownUser" class="flex bg-gray-850 shadow-md z-10 p-2 absolute top-0 right-0 rounded popup mt-16 w-full" id="user-menu-popup" style="min-width: 156px;">
<div v-cloak v-show="state.showDropdownUser" class="flex bg-card shadow-md z-10 p-2 absolute top-0 right-0 rounded popup mt-16 w-full" id="user-menu-popup" style="min-width: 156px;">
<div class="grow flex flex-col">
<div class="submenu-item hover:bg-gray-800 rounded p-1 text-right">
<button class="flex justify-between w-full text-gray-300 items-center px-2 font-semibold" @click="state.showApiKey = true" data-trigger-for="showApiKey">
<div class="submenu-item hover:bg-background rounded p-1 text-right">
<button class="flex justify-between w-full text-foreground items-center px-2 font-semibold" @click="state.showApiKey = true" data-trigger-for="showApiKey">
<span class="text-sm">Show API Key</span>
<span class="iconify inline" data-icon="fluent:key-32-filled"></span>
</button>
</div>
{{ if .InvitesEnabled }}
<div class="submenu-item hover:bg-gray-800 rounded p-1 text-right">
<a class="flex justify-between w-full text-gray-300 items-center px-2 font-semibold" href="settings#account">
<div class="submenu-item hover:bg-background rounded p-1 text-right">
<a class="flex justify-between w-full text-foreground items-center px-2 font-semibold" href="settings#account">
<span class="text-sm">Invite Friend</span>
<span class="iconify inline" data-icon="mdi:invite"></span>
</a>
</div>
{{ end }}
<div class="submenu-item hover:bg-gray-800 rounded p-1 text-right">
<div class="submenu-item hover:bg-background rounded p-1 text-right">
<form action="logout" method="post" class="grow">
<button type="submit" class="flex justify-between w-full text-gray-300 items-center px-2 font-semibold">
<button type="submit" class="flex justify-between w-full text-foreground items-center px-2 font-semibold">
<span class="text-sm">Logout</span>
<span class="iconify inline" data-icon="ls:logout"></span>
</button>
@@ -117,15 +119,15 @@
</div>
</div>
<div v-cloak v-show="state.showApiKey" class="flex bg-gray-850 shadow-md z-10 p-2 absolute top-0 right-0 rounded popup" id="api-key-popup">
<div v-cloak v-show="state.showApiKey" class="flex bg-card shadow-md z-10 p-2 absolute top-0 right-0 rounded popup" id="api-key-popup">
<div class="grow flex flex-col px-2">
<span class="text-xxs text-gray-500 mx-1">API Key</span>
<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">
<span class="text-xxs text-foreground mx-1">API Key</span>
<input type="text" class="bg-transparent text-sm text-foreground mx-1 font-mono" id="api-key-container" readonly value="{{ .ApiKey }}" style="min-width: 330px">
</div>
<div class="flex items-center px-2 border-l border-gray-700">
<div class="flex items-center px-2 border-l border-muted">
<button title="Copy to clipboard" onclick="copyApiKey(event)">
<span class="iconify inline text-gray-300" data-icon="majesticons:clipboard-copy"></span>
<span class="iconify inline text-foreground" data-icon="majesticons:clipboard-copy"></span>
</button>
</div>
</div>
</div>
</div>

98
views/summary.tpl.html
View File

@@ -7,7 +7,7 @@
<script src="assets/js/components/entity-filter.js?v={{ getCacheBuster }}"></script>
<script type="module" src="assets/js/components/summary.js?v={{ getCacheBuster }}"></script>
<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">
<body class="relative bg-background text-foreground p-4 pt-10 flex flex-col min-h-screen max-w-screen-xl mx-auto">
{{ template "menu-main.tpl.html" . }}
@@ -24,9 +24,9 @@
<div class="flex justify-end md:space-x-8 mt-12 flex-wrap md:flex-nowrap relative items-center no-print">
{{ if $.UserDataExpiring }}
<div class="flex-grow justify-start">
<div class="flex-grow p-4 text-sm border-2 border-orange-500 rounded shadow text-gray-300 align-middle mb-4 md:mb-0">
<div class="flex-grow p-4 text-sm border-2 border-orange-500 rounded shadow text-foreground align-middle mb-4 md:mb-0">
<span class="iconify inline mr-1" data-icon="emojione-v1:warning"></span>
Some of&nbsp;&nbsp;your data is older than this instance's data retention period. This will cause old data to be deleted, unless you opt for a subscription. Go to <a class="font-semibold text-green-700" href="settings#subscription">Settings → Subscription</a> for more details.
Some of&nbsp;&nbsp;your data is older than this instance's data retention period. This will cause old data to be deleted, unless you opt for a subscription. Go to <a class="font-semibold text-accent" href="settings#subscription">Settings → Subscription</a> for more details.
</div>
</div>
{{ end }}
@@ -77,29 +77,29 @@
{{ if not .IsProjectDetails }}
<!-- KPIs -->
<div class="w-full mb-4 grid grid-cols-2 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-2 no-break">
<div class="flex flex-col w-full p-4 pt-2 rounded-md 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>
<div class="flex flex-col w-full p-4 pt-2 rounded-md text-foreground bg-card leading-none border-2 border-accent">
<span class="text-xs text-muted font-semibold">Total Time</span>
<span class="font-semibold text-xl truncate" title="{{ .TotalTime | duration }}">{{ .TotalTime | duration }}</span>
<span class="text-xs text-gray-500" title="(your oldest heartbeat in selected range)" style="margin-bottom: -8px">after {{ .FromTime.T | datetime }}</span>
<span class="text-xs text-muted" title="(your oldest heartbeat in selected range)" style="margin-bottom: -8px">after {{ .FromTime.T | datetime }}</span>
</div>
<div class="flex flex-col w-full p-4 pt-2 rounded-md 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>
<div class="flex flex-col w-full p-4 pt-2 rounded-md text-foreground bg-card leading-none border-2 border-accent">
<span class="text-xs text-muted font-semibold">Total Heartbeats</span>
<span class="font-semibold text-xl truncate" title="{{ .NumHeartbeats }}">{{ .NumHeartbeats }}</span>
</div>
<div class="flex flex-col w-full p-4 pt-2 rounded-md 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>
<div class="flex flex-col w-full p-4 pt-2 rounded-md text-foreground bg-card leading-none border-2 border-accent">
<span class="text-xs text-muted font-semibold">Top Project</span>
<span class="font-semibold text-xl truncate" title="{{ .MaxByToString 0 }}">{{ .MaxByToString 0 }}</span>
</div>
<div class="flex flex-col w-full p-4 pt-2 rounded-md 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>
<div class="flex flex-col w-full p-4 pt-2 rounded-md text-foreground bg-card leading-none border-2 border-accent">
<span class="text-xs text-muted font-semibold">Top Language</span>
<span class="font-semibold text-xl truncate" title="{{ .MaxByToString 1 }}">{{ .MaxByToString 1 }}</span>
</div>
<div class="flex flex-col w-full p-4 pt-2 rounded-md 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>
<div class="flex flex-col w-full p-4 pt-2 rounded-md text-foreground bg-card leading-none border-2 border-accent">
<span class="text-xs text-muted font-semibold">Top OS</span>
<span class="font-semibold text-xl truncate" title="{{ .MaxByToString 3 }}">{{ .MaxByToString 3 }}</span>
</div>
<div class="flex flex-col w-full p-4 pt-2 rounded-md 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>
<div class="flex flex-col w-full p-4 pt-2 rounded-md text-foreground bg-card leading-none border-2 border-accent">
<span class="text-xs text-muted font-semibold">Top Editor</span>
<span class="font-semibold text-xl truncate" title="{{ .MaxByToString 2 }}">{{ .MaxByToString 2 }}</span>
</div>
</div>
@@ -114,7 +114,7 @@
{{ end }}
</h1>
<div class="flex space-x-4 items-center">
<h4 class="font-semibold text-lg text-gray-500">{{ .TotalTime | duration }}</h4>
<h4 class="font-semibold text-lg text-muted">{{ .TotalTime | duration }}</h4>
<div v-cloak v-show="currentInterval">
<img :src="'api/badge/{{ .SharedLoggedInViewModel.User.ID }}/interval:' + currentInterval + '/project:{{ .GetProjectFilter }}'" alt="Coding Time Badge">
</div>
@@ -124,7 +124,7 @@
<div class="grid gap-2 grid-cols-1 md:grid-cols-3 w-full mt-4">
<!-- Projects -->
<div class="row-span-1 col-span-1 md:col-span-2 md:row-span-2 p-4 px-6 pb-10 bg-gray-850 text-gray-300 rounded-md shadow flex flex-col w-full no-break {{ if .IsProjectDetails }} hidden {{ end }}" id="project-container" style="max-height: 608px;">
<div class="row-span-1 col-span-1 md:col-span-2 md:row-span-2 p-4 px-6 pb-10 bg-card text-foreground rounded-md shadow flex flex-col w-full no-break {{ if .IsProjectDetails }} hidden {{ end }}" id="project-container" style="max-height: 608px;">
<div class="flex justify-between">
<span class="font-semibold text-lg w-1/2 flex-1 whitespace-nowrap">Projects</span>
<div class="flex justify-end flex-1 text-xs items-center">
@@ -135,12 +135,12 @@
</div>
<canvas id="chart-projects" 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>
<span class="text-md font-semibold text-muted mt-4">No data</span>
</div>
</div>
<!-- Branches -->
<div class="row-span-1 col-span-1 md:col-span-2 md:row-span-2 p-4 px-6 pb-10 bg-gray-850 text-gray-300 rounded-md shadow flex flex-col w-full no-break {{ if not .IsProjectDetails }} hidden {{ end }}" id="branch-container" style="max-height: 608px;">
<div class="row-span-1 col-span-1 md:col-span-2 md:row-span-2 p-4 px-6 pb-10 bg-card text-foreground rounded-md shadow flex flex-col w-full no-break {{ if not .IsProjectDetails }} hidden {{ end }}" id="branch-container" style="max-height: 608px;">
<div class="flex justify-between">
<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">
@@ -151,12 +151,12 @@
</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>
<span class="text-md font-semibold text-muted mt-4">No data</span>
</div>
</div>
<!-- Languages -->
<div class="row-span-1 col-span-1 p-4 px-6 pb-10 bg-gray-850 text-gray-300 rounded-md shadow flex flex-col w-full no-break" id="language-container" style="max-height: 300px">
<div class="row-span-1 col-span-1 p-4 px-6 pb-10 bg-card text-foreground rounded-md shadow flex flex-col w-full no-break" 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>
<div class="flex justify-end flex-1 text-xs items-center">
@@ -167,12 +167,12 @@
</div>
<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>
<span class="text-md font-semibold text-muted mt-4">No data</span>
</div>
</div>
<!-- Editors -->
<div class="row-span-1 col-span-1 p-4 px-6 pb-10 bg-gray-850 text-gray-300 rounded-md shadow flex flex-col w-full no-break" id="editor-container" style="max-height: 300px">
<div class="row-span-1 col-span-1 p-4 px-6 pb-10 bg-card text-foreground rounded-md shadow flex flex-col w-full no-break" 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>
<div class="flex justify-end flex-1 text-xs items-center">
@@ -183,13 +183,13 @@
</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>
<span class="text-md font-semibold text-muted mt-4">No data</span>
</div>
</div>
<!-- OS -->
<div class="{{ if .IsProjectDetails }} hidden {{ end }} md:col-span-2 md:row-span-2 w-full no-break">
<div class="p-4 px-6 pb-10 bg-gray-850 text-gray-300 rounded-md shadow flex flex-col w-full" id="os-container" style="max-height: 300px">
<div class="p-4 px-6 pb-10 bg-card text-foreground rounded-md shadow flex flex-col w-full" 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>
@@ -203,14 +203,14 @@
</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>
<span class="text-md font-semibold text-muted mt-4">No data</span>
</div>
</div>
</div>
<!-- Machines -->
<div class="hidden md:col-span-2 md:row-span-2 w-full no-break">
<div class="p-4 px-6 pb-10 bg-gray-850 text-gray-300 rounded-md shadow flex flex-col w-full" id="machine-container" style="max-height: 300px">
<div class="p-4 px-6 pb-10 bg-card text-foreground rounded-md shadow flex flex-col w-full" 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>
@@ -224,14 +224,14 @@
</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>
<span class="text-md font-semibold text-muted mt-4">No data</span>
</div>
</div>
</div>
<!-- Labels -->
<div class="{{ if .IsProjectDetails }} hidden {{ end }} row-span-1 col-span-1 w-full no-break">
<div class="p-4 px-6 pb-10 bg-gray-850 text-gray-300 rounded-md shadow flex flex-col w-full {{ if .IsProjectDetails }} hidden {{ end }}" id="label-container" style="max-height: 300px">
<div class="p-4 px-6 pb-10 bg-card text-foreground rounded-md shadow flex flex-col w-full {{ 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">
@@ -245,13 +245,13 @@
</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>
<span class="text-md font-semibold text-muted mt-4">No data</span>
</div>
</div>
</div>
<!-- Files -->
<div class="row-span-1 col-span-1 md:col-span-3 md:row-span-3 p-4 px-6 pb-10 bg-gray-850 text-gray-300 rounded-md shadow flex flex-col w-full no-break {{ if not .IsProjectDetails }} hidden {{ end }}" id="entity-container" style="max-height: 500px">
<div class="row-span-1 col-span-1 md:col-span-3 md:row-span-3 p-4 px-6 pb-10 bg-card text-foreground rounded-md shadow flex flex-col w-full no-break {{ if not .IsProjectDetails }} hidden {{ end }}" id="entity-container" style="max-height: 500px">
<div class="flex justify-between">
<span class="font-semibold text-lg w-1/2 flex-1 whitespace-nowrap">Files</span>
<div class="flex justify-end flex-1 text-xs items-center">
@@ -262,12 +262,12 @@
</div>
<canvas id="chart-entities" 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>
<span class="text-md font-semibold text-muted mt-4">No data</span>
</div>
</div>
<!-- Categories -->
<div class="row-span-1 col-span-1 md:col-span-3 md:row-span-3 p-4 px-6 pb-10 bg-gray-850 text-gray-300 rounded-md shadow flex flex-col w-full no-break {{ if .IsProjectDetails }} hidden {{ end }}" id="category-container" style="max-height: 224px; margin-top: -8px;">
<div class="row-span-1 col-span-1 md:col-span-3 md:row-span-3 p-4 px-6 pb-10 bg-card text-foreground rounded-md shadow flex flex-col w-full no-break {{ if .IsProjectDetails }} hidden {{ end }}" id="category-container" style="max-height: 224px; margin-top: -8px;">
<div class="flex justify-between">
<div class="flex items-center gap-x-2">
<span class="font-semibold text-lg w-1/2 flex-1 whitespace-nowrap">Categories</span>
@@ -284,12 +284,12 @@
</div>
<canvas id="chart-categories" 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>
<span class="text-md font-semibold text-muted mt-4">No data</span>
</div>
</div>
<!-- Timeline -->
<div class="row-span-1 col-span-1 md:col-span-3 md:row-span-3 p-4 px-6 pb-10 bg-gray-850 text-gray-300 rounded-md shadow flex flex-col w-full no-break" id="timeline-container" style="max-height: 224px;">
<div class="row-span-1 col-span-1 md:col-span-3 md:row-span-3 p-4 px-6 pb-10 bg-card text-foreground rounded-md shadow flex flex-col w-full no-break" id="timeline-container" style="max-height: 224px;">
<div class="flex justify-between">
<div class="flex items-center gap-x-2">
<span class="font-semibold text-lg w-1/2 flex-1 whitespace-nowrap">Timeline</span>
@@ -298,17 +298,17 @@
<canvas id="chart-timeline" class="mt-2"></canvas>
<div class="hidden placeholder-container flex items-center justify-center h-full flex-col">
{{ if lt .SummaryParams.RangeDays 3 }}
<span class="text-md font-semibold text-gray-500 mt-4">Only available for intervals >= 3 days</span>
<span class="text-md font-semibold text-muted mt-4">Only available for intervals >= 3 days</span>
{{ else if gt .SummaryParams.RangeDays 31 }}
<span class="text-md font-semibold text-gray-500 mt-4">Only available for intervals <= 30 days</span>
<span class="text-md font-semibold text-muted mt-4">Only available for intervals <= 30 days</span>
{{ else }}
<span class="text-md font-semibold text-gray-500 mt-4">No data</span>
<span class="text-md font-semibold text-muted mt-4">No data</span>
{{ end }}
</div>
</div>
<!-- Hourly Breakdown -->
<div class="row-span-1 col-span-1 md:col-span-3 md:row-span-3 p-4 px-6 pb-10 bg-gray-850 text-gray-300 rounded-md shadow flex flex-col w-full no-break cursor-move" id="hourly-container" style="max-height: 224px;">
<div class="row-span-1 col-span-1 md:col-span-3 md:row-span-3 p-4 px-6 pb-10 bg-card text-foreground rounded-md shadow flex flex-col w-full no-break cursor-move" id="hourly-container" style="max-height: 224px;">
<div class="flex justify-between">
<div class="flex items-center gap-x-2">
<span class="font-semibold text-lg w-1/2 flex-1 whitespace-nowrap">
@@ -320,42 +320,42 @@
</div>
<canvas id="chart-hourly" 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>
<span class="text-md font-semibold text-muted mt-4">No data</span>
</div>
</div>
</div>
<div class="mt-12 flex flex-col space-y-2 text-gray-300 w-full no-break">
<div class="mt-12 flex flex-col space-y-2 text-foreground w-full no-break">
<div class="flex justify-start space-x-2 items-center">
<h2 class="text-lg font-semibold">Activity</h2>
<a v-cloak v-show="activityChartSvg" href="/api/activity/chart/{{ .SharedLoggedInViewModel.User.ID }}.svg" target="_blank" rel="noreferrer noopener" class="p-1 rounded hover:bg-gray-850" title="Share...">
<span class="iconify inline text-xl text-gray-500 p-px" data-icon="octicon:share-16"></span>
<a v-cloak v-show="activityChartSvg" href="/api/activity/chart/{{ .SharedLoggedInViewModel.User.ID }}.svg" target="_blank" rel="noreferrer noopener" class="p-1 rounded hover:bg-card" title="Share...">
<span class="iconify inline text-xl text-muted p-px" data-icon="octicon:share-16"></span>
</a>
</div>
<span v-show="!activityChartSvg" class="text-md font-semibold text-gray-500 mt-4">Loading activity chart ...</span>
<span v-show="!activityChartSvg" class="text-md font-semibold text-muted mt-4">Loading activity chart ...</span>
<div v-html="activityChartSvg" class="w-full overflow-x-auto"></div>
</div>
{{ else }}
<div class="max-w-screen-sm flex flex-col items-center mt-12 space-y-8 text-gray-300">
<div class="max-w-screen-sm flex flex-col items-center mt-12 space-y-8 text-foreground">
<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. If you logged in to Wakapi for the first time, see the setup instructions below on how to get started.<br>
Check out <a href="settings#integrations" rel="noreferrer noopener" class="text-gray-400 hover:text-gray-300"><i>Settings &rarr; Integrations</i></a> for instructions on how to use Wakapi and WakaTime in parallel.
Check out <a href="settings#integrations" rel="noreferrer noopener" class="text-gray-400 hover:text-foreground"><i>Settings &rarr; Integrations</i></a> for instructions on how to use Wakapi and WakaTime in parallel.
</p>
{{ if gt .DataRetentionMonths 0 }}
<p>
By default, Wakapi will keep your coding activity for {{ .DataRetentionMonths }} months. If you want <strong>unlimited data storage</strong> or simply <strong>support the project</strong> (which the authors would very much appreciate 😊), you can opt for a paid subscription for <strong>only 4 € / month</strong>. Go to <a href="settings#subscription" class="text-gray-400 hover:text-gray-300" rel="noreferrer noopener">Settings → Subscription</a> to purchase one.
By default, Wakapi will keep your coding activity for {{ .DataRetentionMonths }} months. If you want <strong>unlimited data storage</strong> or simply <strong>support the project</strong> (which the authors would very much appreciate 😊), you can opt for a paid subscription for <strong>only 4 € / month</strong>. Go to <a href="settings#subscription" class="text-gray-400 hover:text-foreground" rel="noreferrer noopener">Settings → Subscription</a> to purchase one.
</p>
{{ end }}
<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">
<div class="w-full bg-card 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>

45
views/time-picker.tpl.html
View File

@@ -1,34 +1,35 @@
<template id="time-picker-template">
<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">
<span class="iconify inline text-2xl text-gray-400 grow" data-icon="fa-regular:calendar-alt"></span>
<a v-cloak id="current-time-selection" class="text-gray-300 -mb-1">${timeSelection}</a>
<span class="iconify inline text-2xl text-gray-400" data-icon="akar-icons:chevron-down"></span>
<div class="menu-item flex items-center text-sm font-semibold space-x-2 rounded hover:bg-card py-2 px-4 cursor-pointer justify-end" @click="state.showDropdownTimepicker = !state.showDropdownTimepicker" data-trigger-for="showDropdownTimepicker">
<span class="iconify inline text-2xl text-secondary grow" data-icon="fa-regular:calendar-alt"></span>
<a v-cloak id="current-time-selection" class="text-foreground -mb-1">${timeSelection}</a>
<span class="iconify inline text-2xl text-secondary" data-icon="akar-icons:chevron-down"></span>
</div>
<div v-cloak v-show="state.showDropdownTimepicker" class="z-10 absolute top-0 right-0 popup mt-12 w-40" id="time-picker-dropdown">
<div class="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="intervalLink('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="intervalLink('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="intervalLink('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="intervalLink('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="intervalLink('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="intervalLink('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="intervalLink('last_30_days')" @click="state.showDropdownTimepicker = !state.showDropdownTimepicker" data-trigger-for="showDropdownTimepicker">Past 30 Days</a>
<a id="time-option-last_6_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="intervalLink('last_6_months')" @click="state.showDropdownTimepicker = !state.showDropdownTimepicker" data-trigger-for="showDropdownTimepicker">Past 6 Months</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="intervalLink('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="intervalLink('any')" @click="state.showDropdownTimepicker = !state.showDropdownTimepicker" data-trigger-for="showDropdownTimepicker">All Time</a>
<div class="grow flex flex-col flex bg-card shadow-md rounded w-40 p-1 ">
<a id="time-option-today" class="submenu-item hover:bg-card rounded p-1 text-right w-full text-foreground px-2 font-semibold text-sm" :href="intervalLink('today')" @click="state.showDropdownTimepicker = !state.showDropdownTimepicker" data-trigger-for="showDropdownTimepicker">Today</a>
<a id="time-option-yesterday" class="submenu-item hover:bg-card rounded p-1 text-right w-full text-foreground px-2 font-semibold text-sm" :href="intervalLink('yesterday')" @click="state.showDropdownTimepicker = !state.showDropdownTimepicker" data-trigger-for="showDropdownTimepicker">Yesterday</a>
<a id="time-option-week" class="submenu-item hover:bg-card rounded p-1 text-right w-full text-foreground px-2 font-semibold text-sm" :href="intervalLink('week')" @click="state.showDropdownTimepicker = !state.showDropdownTimepicker" data-trigger-for="showDropdownTimepicker">This Week</a>
<a id="time-option-month" class="submenu-item hover:bg-card rounded p-1 text-right w-full text-foreground px-2 font-semibold text-sm" :href="intervalLink('month')" @click="state.showDropdownTimepicker = !state.showDropdownTimepicker" data-trigger-for="showDropdownTimepicker">This Month</a>
<a id="time-option-year" class="submenu-item hover:bg-card rounded p-1 text-right w-full text-foreground px-2 font-semibold text-sm" :href="intervalLink('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-card rounded p-1 text-right w-full text-foreground px-2 font-semibold text-sm" :href="intervalLink('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-card rounded p-1 text-right w-full text-foreground px-2 font-semibold text-sm" :href="intervalLink('last_30_days')" @click="state.showDropdownTimepicker = !state.showDropdownTimepicker" data-trigger-for="showDropdownTimepicker">Past 30 Days</a>
<a id="time-option-last_6_months" class="submenu-item hover:bg-card rounded p-1 text-right w-full text-foreground px-2 font-semibold text-sm" :href="intervalLink('last_6_months')" @click="state.showDropdownTimepicker = !state.showDropdownTimepicker" data-trigger-for="showDropdownTimepicker">Past 6 Months</a>
<a id="time-option-last_12_months" class="submenu-item hover:bg-card rounded p-1 text-right w-full text-foreground px-2 font-semibold text-sm" :href="intervalLink('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-card rounded p-1 text-right w-full text-foreground px-2 font-semibold text-sm" :href="intervalLink('any')" @click="state.showDropdownTimepicker = !state.showDropdownTimepicker" data-trigger-for="showDropdownTimepicker">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 v-model="fromDate" id="from-date-picker" type="date" name="from" max="toDate" class="text-sm text-gray-300 bg-gray-900 cursor-pointer" required data-trigger-for="showDropdownTimepicker">
<div class="flex flex-col space-x-1 bg-card rounded p-1 border-2 border-muted">
<label for="from-date-picker" class="text-secondary text-xs ml-2">Start:</label>
<input v-model="fromDate" id="from-date-picker" type="date" name="from" max="toDate" class="text-sm text-foreground bg-card cursor-pointer" required data-trigger-for="showDropdownTimepicker">
</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 v-model="toDate" id="to-date-picker" type="date" name="to" :min="fromDate" class="text-sm text-gray-300 bg-gray-900 cursor-pointer" required data-trigger-for="showDropdownTimepicker">
<div class="flex flex-col space-x-1 bg-card rounded p-1 border-2 border-muted">
<label for="to-date-picker" class="text-secondary text-xs ml-2">End:</label>
<input v-model="toDate" id="to-date-picker" type="date" name="to" :min="fromDate" class="text-sm text-foreground bg-card cursor-pointer" required data-trigger-for="showDropdownTimepicker">
</div>
<button type="submit" class="btn-primary btn-small my-1 text-center text-xsi cursor-pointer">Apply</button>
</form>
</div>
</div>
</template>
</template>