mirror
/
wakapi
mirror of https://github.com/muety/wakapi.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: make vibrantColors a localStorage setting

This commit is contained in:
bdeshi 2022-04-24 03:39:08 +06:00
parent 5c5c462035
commit 1f19c5e93c
9 changed files with 31 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -144,7 +144,6 @@ You can specify configuration options either via a config file (default: `config
| `app.import_batch_size` /<br>`WAKAPI_IMPORT_BATCH_SIZE` | `50` | Size of batches of heartbeats to insert to the database during importing from external services |
| `app.inactive_days` /<br>`WAKAPI_INACTIVE_DAYS` | `7` | Number of days after which to consider a user inactive (only for metrics) |
| `app.heartbeat_max_age /`<br>`WAKAPI_HEARTBEAT_MAX_AGE` | `4320h` | Maximum acceptable age of a heartbeat (see [`ParseDuration`](https://pkg.go.dev/time#ParseDuration)) |
| `app.vibrant_color` /<br> `WAKAPI_VIBRANT_COLOR` | `false` | whether to enable vibrant colors for all charts in summary page |
| `app.custom_languages` | - | Map from file endings to language names |
| `app.avatar_url_template` | (see [`config.default.yml`](config.default.yml)) | URL template for external user avatar images (e.g. from [Dicebear](https://dicebear.com) or [Gravatar](https://gravatar.com)) |
| `server.port` /<br> `WAKAPI_PORT` | `3000` | Port to listen on |

1
config.default.yml
View File

@ -17,7 +17,6 @@ app:
inactive_days: 7 # time of previous days within a user must have logged in to be considered active
import_batch_size: 50 # maximum number of heartbeats to insert into the database within one transaction
heartbeat_max_age: '4320h' # maximum acceptable age of a heartbeat (see https://pkg.go.dev/time#ParseDuration)
vibrant_color: false # whether to enable vibrant colors for all charts in summary page
custom_languages:
vue: Vue
jsx: JSX

1
config/config.go
View File

@ -71,7 +71,6 @@ type appConfig struct {
HeartbeatMaxAge string `yaml:"heartbeat_max_age" default:"4320h" env:"WAKAPI_HEARTBEAT_MAX_AGE"`
CountCacheTTLMin int `yaml:"count_cache_ttl_min" default:"30" env:"WAKAPI_COUNT_CACHE_TTL_MIN"`
AvatarURLTemplate string `yaml:"avatar_url_template" default:"api/avatar/{username_hash}.svg"`
VibrantColor bool `yaml:"vibrant_color" default:"false" env:"WAKAPI_VIBRANT_COLOR"`
CustomLanguages map[string]string `yaml:"custom_languages"`
Colors map[string]map[string]string `yaml:"-"`
}

1
models/view/summary.go
View File

@ -7,7 +7,6 @@ type SummaryViewModel struct {
*models.SummaryParams
User *models.User
AvatarURL string
VibrantColor bool
EditorColors map[string]string
LanguageColors map[string]string
OSColors map[string]string

1
routes/summary.go
View File

@ -66,7 +66,6 @@ func (h *SummaryHandler) GetIndex(w http.ResponseWriter, r *http.Request) {
Summary: summary,
SummaryParams: summaryParams,
User: user,
VibrantColor: h.config.App.VibrantColor,
EditorColors: utils.FilterColors(h.config.App.GetEditorColors(), summary.Editors),
LanguageColors: utils.FilterColors(h.config.App.GetLanguageColors(), summary.Languages),
OSColors: utils.FilterColors(h.config.App.GetOSColors(), summary.OperatingSystems),

10
static/assets/js/components/settings.js
View File

@ -2,6 +2,7 @@ PetiteVue.createApp({
//$delimiters: ['${', '}'], // https://github.com/vuejs/petite-vue/pull/100
activeTab: defaultTab,
selectedTimezone: userTimeZone,
vibrantColorEnabled: JSON.parse(localStorage.getItem('vibrant-color') || false),
get tzOptions() {
return [defaultTzOption, ...tzs.sort().map(tz => ({ value: tz, text: tz }))]
},
@ -31,8 +32,15 @@ PetiteVue.createApp({
document.querySelector('#form-delete-user').submit()
}
},
toggleVibrantColor() {
let key = 'vibrant-color';
let value = !(JSON.parse(localStorage.getItem(key) || false));
localStorage.setItem(key, value);
this.vibrantColorEnabled = value;
return value;
},
mounted() {
this.updateTab()
window.addEventListener('hashchange', () => this.updateTab())
}
}).mount('#settings-page')
}).mount('#settings-page')

2
static/assets/js/summary.js
View File

@ -87,6 +87,8 @@ function draw(subselection) {
.filter((c, i) => shouldUpdate(i))
.forEach(c => c.destroy())
let vibrantColor = JSON.parse(window.localStorage.getItem('vibrant-color') || false);
let projectChart = projectsCanvas && !projectsCanvas.classList.contains('hidden') && shouldUpdate(0)
? new Chart(projectsCanvas.getContext('2d'), {
//type: 'horizontalBar',

21
views/settings.tpl.html
View File

@ -354,6 +354,26 @@
</div>
</div>
</div>
<div class="w-full">
<hr class="border-t border-gray-800 my-4">
</div>
<!-- Colors -->
<div class="w-full">
<div class="flex flex-wrap md:flex-nowrap mb-8 gap-x-4">
<div class="w-full md:w-1/3 mb-4 md:mb-0 inline-block">
<span class="font-semibold text-gray-300 text-lg">Vibrant Colors</span>
<p class="block text-sm text-gray-600">You can view the entire summary in vibrant colors similar to the "Languages" chart. Note that this setting is saved in your web browser only.</p>
</div>
<div class="w-full md:w-2/3 inline-block">
<div class="flex-col items-center w-full text-gray-500 text-sm">
<input class="flex cursor-pointer h-4 w-4" type="checkbox" id="vibrant-color-toggle" @click="toggleVibrantColor" v-model="vibrantColorEnabled">
</div>
</div>
</div>
</div>
</div>
<div v-cloak id="permissions" class="tab flex flex-col space-y-4" v-if="isActive('permissions')">
@ -666,4 +686,3 @@
</body>
</html>

1
views/summary.tpl.html
View File

@ -209,7 +209,6 @@
{{ template "foot.tpl.html" . }}
<script>
const vibrantColor = {{ .VibrantColor }}
const editorColors = {{ .EditorColors | json }}
const languageColors = {{ .LanguageColors | json }}
const osColors = {{ .OSColors | json }}