gorb/frontend
4
0
Fork 0
Code Issues 15 Pull requests 7 Projects Releases Packages 1 Wiki Activity Actions

Code cleanup #81

Open
twig wants to merge 7 commits from temmie-random-cleanup into main
pull from: temmie-random-cleanup
merge into: gorb:main
Conversation 0 Commits 7 Files changed 10 +114 -96
10 changed files with 114 additions and 96 deletions
Download patch file Download diff file Expand all files Collapse all files

17
components/Avatar.vue
View file

@ -6,7 +6,7 @@
<DefaultIcon v-else
class="display-avatar"
:name="displayName"
:seed="user.uuid"
:seed="getUserUuid(props.profile)"
:alt="displayName" />
</template>
@ -14,25 +14,14 @@
import { NuxtImg } from '#components';
import type { GuildMemberResponse, UserResponse } from '~/types/interfaces';
const { getDisplayName } = useProfile()
const { getDisplayName, getAvatarUrl, getUserUuid } = useProfile()
const props = defineProps<{
profile: UserResponse | GuildMemberResponse,
}>();
const displayName = getDisplayName(props.profile)
let user: UserResponse
let displayAvatar: string | null
if ("username" in props.profile) {
// assume it's a UserResponse
displayAvatar = props.profile.avatar
user = props.profile
} else {
// assume it's a GuildMemberResponse
displayAvatar = props.profile.user.avatar
user = props.profile.user
}
const displayAvatar = getAvatarUrl(props.profile)
</script>

1
components/DefaultIcon.vue
View file

@ -17,6 +17,7 @@ const props = defineProps<{
}>();
let previewName = "";
// include the entire name if it's 3 chars or less, use the first char of the first 3 words otherwise
if (props.name.length > 3) {
let guildName: string[] = props.name.split(' ')
for (let i = 0; i < 3; i ++) {

12
components/Modal/ProfilePopup.vue
View file

@ -27,15 +27,17 @@
</div>
<VerticalSpacer />
<div v-if="aboutMe" id="profile-body">
<div v-if="aboutMe" id="about-me-container">
<div v-if="aboutMe">
<div id="profile-body">
<div id="about-me-container">
<div><Icon name="lucide:info" size="1.1em"/></div>
<div id="about-me-text">
{{ " " + aboutMe }}
</div>
</div>
</div>
<VerticalSpacer v-if="aboutMe" />
<VerticalSpacer />
</div>
<div id="profile-footer">
<div id="dates">
@ -62,7 +64,7 @@ import type { GuildMemberResponse, ModalProps, UserResponse } from '~/types/inte
import VerticalSpacer from '../UserInterface/VerticalSpacer.vue';
import Button from '../UserInterface/Button.vue';
const { getDisplayName, getUsername, getPronouns, getAboutMe, getRegistrationDate, getGuildJoinDate, getFriendsSince, getUuid } = useProfile()
const { getDisplayName, getUsername, getPronouns, getAboutMe, getRegistrationDate, getGuildJoinDate, getFriendsSince, getUserUuid } = useProfile()
const { addFriend, fetchMe } = useApi();
const props = defineProps<ModalProps & {
@ -81,7 +83,7 @@ const registrationDate = getRegistrationDate(props.profile)
const joinDate = getGuildJoinDate(props.profile)
const friendsSince = await getFriendsSince(props.profile)
const uuid = getUuid(props.profile)
const uuid = getUserUuid(props.profile)
function toDateString(date: Date): string {

30
components/Settings/AppSettings/Appearance.vue
View file

@ -45,26 +45,15 @@
<!-- <p class="subtitle">Icons</p>
<div class="icons">
</div> -->
<p class="subtitle">TIME FORMAT</p>
<div class="icons">
<RadioButtons :button-count="3" :text-strings="timeFormatTextStrings"
:default-button-index="settingsLoad().timeFormat?.index ?? 0" :callback="onTimeFormatClicked"></RadioButtons>
</div>
</div>
</template>
<script lang="ts" setup>
import RadioButtons from '~/components/UserInterface/RadioButtons.vue';
import type { TimeFormat } from '~/types/settings';
import { settingSave, settingsLoad } from '#imports';
const runtimeConfig = useRuntimeConfig()
const baseURL = runtimeConfig.app.baseURL;
const styleFolder = `${baseURL}/themes/style`
const layoutFolder = `${baseURL}/themes/layout`
const timeFormatTextStrings = ["Auto", "12-Hour", "24-Hour"]
const styleFolder = `${baseURL}themes/style`
const layoutFolder = `${baseURL}themes/layout`
enum StyleLayout {
Style,
@ -171,21 +160,6 @@ function changeTheme(themeType: StyleLayout, theme: Theme) {
}
loadPreferredThemes()
}
async function onTimeFormatClicked(index: number) {
let format: "auto" | "12" | "24" = "auto"
if (index == 0) {
format = "auto"
} else if (index == 1) {
format = "12"
} else if (index == 2) {
format = "24"
}
const timeFormat: TimeFormat = {index, format}
settingSave("timeFormat", timeFormat)
}
</script>
<style scoped>

17
components/Settings/AppSettings/Language.vue
View file

@ -1,10 +1,25 @@
<template>
<div>
<h1>Language (TBA)</h1>
<h1>Language</h1>
<p class="subtitle">TIME FORMAT</p>
<div class="icons">
<RadioButtons
:text-strings="timeFormatTextStrings"
:default-button-key='settingsLoad().timeFormat ?? "Auto"'
:callback="(index: number) => {settingSave('timeFormat', timeFormatTextStrings[index])}"
/>
</div>
</div>
</template>
<script lang="ts" setup>
import RadioButtons from '~/components/UserInterface/RadioButtons.vue';
import type { TimeFormat } from '~/types/settings';
const timeFormatTextStrings: TimeFormat[] = ["Auto", "4:18 PM", "16:18"]
</script>
<style scoped>

59
components/UserInterface/RadioButtons.vue
View file

@ -1,8 +1,10 @@
<template>
<div class="radio-buttons-container" ref="radioButtonsContainer">
<div v-for="index in indices" :key="index" class="radio-button" @click="onClick(index)">
<div v-for="(textString, index) in props.textStrings"
class="radio-button"
@click="onClick(index)">
<span class="radio-button-radio"></span>
<span class="radio-button-text">{{ textStrings[index] }}</span>
<span class="radio-button-text">{{ textString }}</span>
</div>
</div>
</template>
@ -13,42 +15,65 @@ const radioButtonsContainer = ref<HTMLDivElement>()
const props = defineProps<{
textStrings: string[],
buttonCount: number,
defaultButtonIndex: number,
defaultButtonKey?: string,
defaultButtonIndex?: number,
callback: CallableFunction,
}>();
// makes an array from 0 to buttonCount - 1
const indices = Array.from({ length: props.buttonCount }, (_, i) => i)
// select default selected button
onMounted(async () => {
await nextTick()
if (props.defaultButtonIndex != undefined && radioButtonsContainer.value) {
// select default selected button
if (radioButtonsContainer.value) {
const children = radioButtonsContainer.value.children
const defaultButton = children.item(props.defaultButtonIndex)
defaultButton?.classList.add("selected-radio-button")
defaultButton?.children.item(0)?.classList.add("selected-radio-button-radio")
// set the button based on key
if (props.defaultButtonKey != undefined) {
const newIndex = props.textStrings.indexOf(props.defaultButtonKey)
const defaultButton = children.item(newIndex)
if (defaultButton) {
selectButton(defaultButton)
return // note the return if you're extending this
}
}
// if that fails, set it based on index, defaulting to 0
const defaultButton = children.item(props.defaultButtonIndex ?? 0)
if (defaultButton) {
selectButton(defaultButton)
}
}
})
function onClick(clickedIndex: number) {
// remove selected-radio-button class from all buttons except the clicked one
if (radioButtonsContainer.value) {
// remove selected-radio-button class from all buttons except the clicked one
const children = radioButtonsContainer.value.children
for (let i = 0; i < children.length; i++) {
children.item(i)?.classList.remove("selected-radio-button")
children.item(i)?.children.item(0)?.classList.remove("selected-radio-button-radio")
const button = children.item(i)
if (button) {
unSelectButton(button)
}
}
children.item(clickedIndex)?.classList.add("selected-radio-button")
children.item(clickedIndex)?.children.item(0)?.classList.add("selected-radio-button-radio")
const button = children.item(clickedIndex)
if (button) {
selectButton(button)
}
}
props.callback(clickedIndex)
}
function unSelectButton(button: Element) {
button.classList.remove("selected-radio-button")
button.children.item(0)?.classList.remove("selected-radio-button-radio")
}
function selectButton(button: Element) {
button.classList.add("selected-radio-button")
button.children.item(0)?.classList.add("selected-radio-button-radio")
}
</script>
<style scoped>

28
composables/profile.ts
View file

@ -24,6 +24,14 @@ export const useProfile = () => {
}
}
function getAvatarUrl(profile: UserResponse | GuildMemberResponse): string | null {
if ("username" in profile) {
return profile.avatar
} else {
return profile.user.avatar
}
}
async function getFriendsSince(profile: UserResponse | GuildMemberResponse): Promise<Date | null> {
let user_uuid: string;
@ -42,9 +50,9 @@ export const useProfile = () => {
return null
}
function getGuildJoinDate (profile: UserResponse | GuildMemberResponse): Date | null {
function getGuildJoinDate(profile: UserResponse | GuildMemberResponse): Date | undefined {
if ("username" in profile) {
return null
return undefined
} else {
return uuidToDate(profile.uuid)
}
@ -58,7 +66,7 @@ export const useProfile = () => {
}
}
function getRegistrationDate (profile: UserResponse | GuildMemberResponse): Date | null {
function getRegistrationDate(profile: UserResponse | GuildMemberResponse): Date {
if ("username" in profile) {
return uuidToDate(profile.uuid)
} else {
@ -74,7 +82,7 @@ export const useProfile = () => {
}
}
function getUuid (profile: UserResponse | GuildMemberResponse): string | null {
function getUserUuid(profile: UserResponse | GuildMemberResponse): string {
if ("username" in profile) {
return profile.uuid
} else {
@ -82,14 +90,24 @@ export const useProfile = () => {
}
}
function getUser(profile: UserResponse | GuildMemberResponse): UserResponse {
if ("username" in profile) {
return profile
} else {
return profile.user
}
}
return {
getAboutMe,
getDisplayName,
getAvatarUrl,
getFriendsSince,
getGuildJoinDate,
getRegistrationDate,
getPronouns,
getUsername,
getUuid
getUserUuid,
getUser
}
}

5
types/settings.ts
View file

@ -4,7 +4,4 @@ export interface ClientSettings {
selectedThemeLayout?: string // URL
}
export interface TimeFormat {
index: number,
format: "auto" | "12" | "24"
}
export type TimeFormat = "Auto" | "4:18 PM" | "16:18"

6
utils/getPreferredTimeFormat.ts
View file

@ -1,9 +1,9 @@
export default (): "12" | "24" => {
const format = settingsLoad().timeFormat?.format ?? "auto"
const format = settingsLoad().timeFormat ?? "Auto"
if (format == "12") {
if (format == "4:18 PM") {
return "12"
} else if (format == "24") {
} else if (format == "16:18") {
return "24"
}

15
utils/loadPreferredThemes.ts
View file

@ -6,16 +6,13 @@ export default () => {
const runtimeConfig = useRuntimeConfig()
const baseURL = runtimeConfig.app.baseURL;
let currentStyle = settingsLoad().selectedThemeStyle ?? undefined
let currentLayout = settingsLoad().selectedThemeLayout ?? `${baseURL}themes/layout/gorb.css`
let currentStyle = settingsLoad().selectedThemeStyle ?? (
prefersLight()
? `${baseURL}themes/style/light.css`
: `${baseURL}themes/style/dark.css`
);
if (!currentStyle) {
if (prefersLight()) {
currentStyle = `${baseURL}themes/style/light.css`
} else {
currentStyle = `${baseURL}themes/style/dark.css`
}
}
let currentLayout = settingsLoad().selectedThemeLayout ?? `${baseURL}themes/layout/gorb.css`
if (styleLinkElement) {
styleLinkElement.href = currentStyle;