Skip to content

Commit

Permalink
Settings Page UI (#1152)
Browse files Browse the repository at this point in the history 
* Update user-settings.gohtml

* Minimize header footprint
  • Loading branch information
@MatthiasReumann
MatthiasReumann authored Sep 20, 2023
1 parent ac6ae65 commit 074f352
Show file tree
Hide file tree
Showing 3 changed files with 84 additions and 42 deletions.
12 changes: 12 additions & 0 deletions web/assets/css/home.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,10 @@
@apply bg-gray-800 text-white dark:bg-gray-600
}

.tum-live-button-muted {
@apply bg-gray-200 dark:bg-gray-600 hover:bg-gray-300 dark:hover:bg-gray-700
}

.tum-live-icon-button {
@apply flex justify-center items-center rounded-full text-gray-400 hover:text-gray-600 dark:hover:text-white active:bg-gray-100/50 dark:active:bg-gray-700/50 disabled:opacity-20;
}
Expand Down Expand Up @@ -372,6 +376,14 @@ label:has(~ .tum-live-input) {
@apply text-sm rounded-lg bg-amber-500/25 border-l-4 px-3 py-2 border-amber-500
}

.tum-live-settings-grid{
@apply grid gap-y-5 content-start lg:w-3/6 md:w-4/5 w-full p-6 text-3;
}

.tum-live-settings-grid > section > h2{
@apply text-sm text-5 mb-1;
}


.tum-live-footer {
@apply bg-gray-100 dark:bg-secondary-light py-4 px-8;
Expand Down
110 changes: 70 additions & 40 deletions web/template/user-settings.gohtml
View file
Original file line number Diff line number Diff line change
@@ -1,33 +1,64 @@
<!DOCTYPE html>
<html lang="en" class="dark">

{{- /*gotype: github.com/TUM-Dev/gocast/web*/ -}}
<head>
<meta charset="UTF-8">
<title>{{.IndexData.Branding.Title}}</title>
{{template "headImports" .IndexData.VersionTag}}
</head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="description" content="{{.Branding.Description}}"/>
<link rel="manifest" href="/static/assets/manifest.json">

<body class="text-4">
{{- /*gotype: github.com/TUM-Dev/gocast/web.userSettingsData*/ -}}
{{template "header" .IndexData.TUMLiveContext}}
<div class="form-container">
<h1 class="form-container-title">Settings</h1>
<title>{{.Branding.Title}} | Settings</title>

<div class="form-container-body"
x-data=" { initialName: '{{.IndexData.TUMLiveContext.User.GetPreferredName}}', name: '{{.IndexData.TUMLiveContext.User.GetPreferredName}}', err: '' } ">
<label class="text-sm text-5" for="displayName">Preferred Name <span class="italic font-bold">You can change
this once every three months.</span></label>
<p x-cloak x-show="err!==''" class="text-red-500" x-text="err"></p>
<div class="flex gap-3">
<input class="tl-input" type="text" x-model="name" id="displayName" {{ if not
.IndexData.TUMLiveContext.User.PreferredNameChangeAllowed }} readonly {{ end }}>
<button type="button" :disabled="name === initialName" class="btn w-auto whitespace-nowrap"
@click="global.updatePreference(global.UserSetting.Name, name).then((r) => {err=r; if(r==='') {initialName=name;}})">
Update Name
</button>
{{if and .VersionTag (eq .VersionTag "development")}}
<script defer src="/static/node_modules/alpinejs/dist/cdn.js"></script>
{{else}}
<script defer src="/static/node_modules/alpinejs/dist/cdn.min.js"></script>
{{end}}
<script src="static/assets/init.js"></script>
<script src="/static/assets/ts-dist/global.bundle.js?v={{if .VersionTag}}{{.VersionTag}}{{else}}development{{end}}"></script>

<link href="/static/assets/css-dist/home.css?v={{if .VersionTag}}{{.VersionTag}}{{else}}development{{end}}"
rel="stylesheet">
<style>[x-cloak] {
display: none !important;
}</style>
</head>

<body class="h-screen flex flex-col items-stretch tum-live-bg">
<header class="text-3 flex z-50 w-full items-center px-3 py-2 h-16 justify-between shrink-0 grow-0">
<div class="flex items-center">
<a href="/" class="mx-3" type="button" id="logo" title="Start">
<img src="/logo.svg" width="42" alt="TUM-Live Logo">
</a>
</div>
</header>
<main id="content" class="flex justify-center grow h-full overflow-y-scroll">
<article class="tum-live-settings-grid" x-data=" { err: '' } ">
<header>
<h1 class="font-bold text-3">Settings</h1>
</header>
<div x-cloak x-show="err!==''" class="bg-danger/25 text-sm rounded-lg px-2 py-1 space-x-3 py-2">
<i class="fa-solid fa-triangle-exclamation"></i>
<span x-text="err">Error</span>
</div>
<h2 class="text-sm text-5">Preferred greeting</h2>
<div x-data="{ currentGreeting: {{toJson .IndexData.TUMLiveContext.User.GetPreferredGreeting}}, err:'' }">
<section
x-data="{initialName: '{{.TUMLiveContext.User.GetPreferredName}}', name: '{{.TUMLiveContext.User.GetPreferredName}}'}">
<h2>Preferred Name<span class="italic font-bold pl-2">You can change this once every three months.</span>
</h2>
<div class="grid gap-y-2">
<label for="displayName">
<input class="tum-live-input" type="text" x-model="name" id="displayName" {{ if not
.TUMLiveContext.User.PreferredNameChangeAllowed }} readonly {{ end }}>
</label>
<button type="button" :disabled="name === initialName"
class="tum-live-input-submit tum-live-button-primary py-2 text-sm"
@click="global.updatePreference(global.UserSetting.Name, name).then((r) => {err=r; if(r==='') {initialName=name;}})">
Update Name
</button>
</div>
</section>
<section x-data="{ currentGreeting: {{toJson .TUMLiveContext.User.GetPreferredGreeting}}}">
<h2>Preferred greeting</h2>
<input class="w-auto" type="radio" name="greet" value="Moin" id="greeting1" x-model="currentGreeting"
:checked="currentGreeting==='Moin'"
@change="global.updatePreference(global.UserSetting.Greeting, currentGreeting).then((r) => {err=r})">
Expand All @@ -36,11 +67,9 @@
:checked="currentGreeting==='Servus'"
@change="global.updatePreference(global.UserSetting.Greeting, currentGreeting).then((r) => {err=r;})">
<label for="greeting2">Servus</label>
<p class="text-danger" x-cloak x-show="err!==''" x-text="err"></p>
</div>
<h2 class="text-sm text-5">Playback Speeds</h2>
<div class="pl-2"
x-data="{ playbackspeeds: {{toJson .IndexData.TUMLiveContext.User.GetPlaybackSpeeds}}, err:'' }">
</section>
<section x-data="{ playbackspeeds: {{toJson .TUMLiveContext.User.GetPlaybackSpeeds}} }">
<h2>Playback Speeds</h2>
<template x-for="ps in playbackspeeds">
<span class="mr-2">
<label>
Expand All @@ -50,22 +79,23 @@
</label>
</span>
</template>
<p class="text-danger" x-cloak x-show="err!==''" x-text="err"></p>
</div>

<h2 class="text-sm text-5">Privacy & Data Protection</h2>
<a href="/api/users/exportData" download="personal_data.json" class="btn block">
<i class="fas fa-download"></i> Export my personal data
</a>
</section>
<section>
<h2>Privacy & Data Protection</h2>
<a href="/api/users/exportData" download="personal_data.json"
class="tum-live-input-submit tum-live-button-muted block py-2 text-center text-sm">
<i class="fas fa-download"></i> Export my personal data
</a>
</section>

<div class="text-center p-3">
<i class="text-5">Not a lot going on here <b>yet</b>.
<footer class="text-5 text-sm text-center">
<i>Not a lot going on here <b>yet</b>.
<a class="underline" target="_blank" rel="noopener"
href="https://github.com/TUM-Dev/gocast/issues/new/choose">Open an issue</a>
if you have any ideas what settings you miss :)
</i>
</div>
</div>
</div>
</footer>
</article>
</main>
</body>
</html>
4 changes: 2 additions & 2 deletions web/user.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@ package web

import (
"context"
"github.com/gin-gonic/gin"
"github.com/TUM-Dev/gocast/dao"
"github.com/TUM-Dev/gocast/model"
"github.com/TUM-Dev/gocast/tools"
"github.com/TUM-Dev/gocast/tools/tum"
"github.com/gin-gonic/gin"
log "github.com/sirupsen/logrus"
"net/http"
"net/url"
Expand All @@ -23,7 +23,7 @@ func (r mainRoutes) settingsPage(c *gin.Context) {
d := userSettingsData{IndexData: NewIndexData()}
d.IndexData.TUMLiveContext = c.MustGet("TUMLiveContext").(tools.TUMLiveContext)

err := templateExecutor.ExecuteTemplate(c.Writer, "user-settings.gohtml", d)
err := templateExecutor.ExecuteTemplate(c.Writer, "user-settings.gohtml", d.IndexData)
if err != nil {
log.Error(err)
c.AbortWithStatus(http.StatusInternalServerError)
Expand Down

0 comments on commit 074f352

Please sign in to comment.