Skip to content

Commit

Permalink
Merge pull request #4981 from manuelmeister/feature/debug-page
Browse files Browse the repository at this point in the history
Move dev info to /debug
  • Loading branch information
pmattmann committed Apr 18, 2024
2 parents 165f327 + ce0afc2 commit 14ad4fd
Show file tree
Hide file tree
Showing 4 changed files with 178 additions and 37 deletions.
37 changes: 0 additions & 37 deletions frontend/src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -8,51 +8,14 @@
<v-main>
<router-view />
</v-main>

<!-- footer -->
<v-footer v-if="$vuetify.breakpoint.mdAndUp" app color="grey lighten-5">
<small
>eCamp
<a v-if="version" :href="versionLink" target="_blank">
{{ version }}
</a>
<span class="ml-1">{{ deploymentTime }}</span></small
>
<v-spacer />
<language-switcher v-if="isDev" />
</v-footer>
</v-app>
</template>

<script>
import LanguageSwitcher from '@/components/layout/LanguageSwitcher.vue'
import VueI18n from '@/plugins/i18n'
import { parseTemplate } from 'url-template'
import { getEnv } from '@/environment.js'
export default {
name: 'App',
components: { LanguageSwitcher },
computed: {
deploymentTime() {
const timestamp = getEnv().DEPLOYMENT_TIME
const dateTime = timestamp ? this.$date.unix(timestamp) : this.$date()
return dateTime.format(this.$tc('global.datetime.dateTimeLong'))
},
version() {
return getEnv().VERSION || ''
},
versionLink() {
return (
parseTemplate(getEnv().VERSION_LINK_TEMPLATE).expand({
version: this.version,
}) || '#'
)
},
isDev() {
return getEnv().FEATURE_DEVELOPER ?? false
},
},
created() {
this.$store.commit('setLanguage', this.$store.state.lang.language)
},
Expand Down
62 changes: 62 additions & 0 deletions frontend/src/assets/icons/Coffee.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
<g
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
>
<path
stroke-dasharray="48"
stroke-dashoffset="48"
d="M17 9v9a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3V9z"
>
<animate
fill="freeze"
attributeName="stroke-dashoffset"
dur="0.6s"
values="48;0"
/>
</path>
<path
stroke-dasharray="14"
stroke-dashoffset="14"
d="M17 14h3c.6 0 1-.4 1-1v-3c0-.6-.4-1-1-1h-3"
>
<animate
fill="freeze"
attributeName="stroke-dashoffset"
begin="0.6s"
dur="0.2s"
values="14;28"
/>
</path>
</g>
<mask id="a">
<path
fill="none"
stroke="#fff"
stroke-width="2"
d="M8 0c0 2-2 2-2 4s2 2 2 4-2 2-2 4 2 2 2 4m4-16c0 2-2 2-2 4s2 2 2 4-2 2-2 4 2 2 2 4m4-16c0 2-2 2-2 4s2 2 2 4-2 2-2 4 2 2 2 4"
>
<animateMotion
calcMode="linear"
dur="3s"
path="M0 0v-8"
repeatCount="indefinite"
/>
</path>
</mask>
<rect width="24" height="0" y="7" fill="currentColor" mask="url(#a)">
<animate fill="freeze" attributeName="y" begin="0.8s" dur="0.6s" values="7;2" />
<animate
fill="freeze"
attributeName="height"
begin="0.8s"
dur="0.6s"
values="0;5"
/>
</rect>
</svg>
</template>
7 changes: 7 additions & 0 deletions frontend/src/router.js
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,13 @@ export default new Router({
: []),

// Prod-Pages:
{
path: '/debug',
name: 'debug',
components: {
default: () => import('./views/dev/Debug.vue'),
},
},
{
path: '/register',
name: 'register',
Expand Down
109 changes: 109 additions & 0 deletions frontend/src/views/dev/Debug.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
<template>
<v-container fluid class="d-grid h-full">
<content-card title="Debug" toolbar class="ma-sm-auto" style="width: auto">
<template #title>
<Coffee />
<v-toolbar-title tag="h1" class="font-weight-bold ml-2">Debug</v-toolbar-title>
</template>
<template #title-actions>
<language-switcher v-if="isDev" />
</template>
<v-card-text>
<h3>
Version
<a v-if="version" :href="versionLink" target="_blank">
{{ version }}
</a>
<span class="ml-1">{{ deploymentTime }}</span>
</h3>
</v-card-text>
<v-simple-table dense>
<tbody>
<tr v-for="[key, value] in envArray" :key="key">
<th>{{ key }}</th>
<td>
<code v-if="value !== undefined && value !== ''">{{ value }}</code>
</td>
</tr>
</tbody>
</v-simple-table>
</content-card>
</v-container>
</template>

<script>
import ContentCard from '@/components/layout/ContentCard.vue'
import { getEnv } from '@/environment.js'
import Coffee from '@/assets/icons/Coffee.vue'
import LanguageSwitcher from '@/components/layout/LanguageSwitcher.vue'
import { parseTemplate } from 'url-template'
export default {
name: 'Debug',
components: {
LanguageSwitcher,
Coffee,
ContentCard,
},
data: function () {
return {
environment: getEnv(),
}
},
computed: {
envArray() {
return Object.entries(this.environment)
},
isDev() {
return this.environment.FEATURE_DEVELOPER ?? false
},
deploymentTime() {
const timestamp = this.environment.DEPLOYMENT_TIME
const dateTime = timestamp ? this.$date.unix(timestamp) : this.$date()
return dateTime.format(this.$tc('global.datetime.dateTimeLong'))
},
version() {
return this.environment.VERSION || ''
},
versionLink() {
return (
parseTemplate(this.environment.VERSION_LINK_TEMPLATE).expand({
version: this.version,
}) || '#'
)
},
},
}
</script>
<style scoped lang="scss">
@media #{map-get($display-breakpoints, 'xs-only')} {
:deep(table) {
display: block;
}
tbody {
display: block;
}
tr {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: space-between;
border-bottom: thin solid rgba(0, 0, 0, 0.12);
padding: 8px 2px;
}
th,
td {
user-select: initial;
border: none !important;
display: flex;
align-items: center;
height: auto !important;
max-width: 100%;
}
code {
display: block;
width: 100%;
}
}
</style>

0 comments on commit 14ad4fd

Please sign in to comment.