mobilizon/js/src/views/About/AboutInstance.vue

170 lines
4.6 KiB
Vue
Raw Normal View History

<template>
<div v-if="config">
<section class="hero is-primary">
<div class="hero-body">
<div class="container">
<h2 class="title">{{ config.name }}</h2>
<p>{{ config.description }}</p>
</div>
</div>
</section>
<section class="columns contact-statistics" v-if="statistics">
<div class="column is-three-quarters-desktop statistics">
<i18n tag="p" path="Home to {number} users">
<strong slot="number">{{ statistics.numberOfUsers }}</strong>
</i18n>
<i18n tag="p" path="and {number} groups">
<strong slot="number">{{ statistics.numberOfGroups }}</strong>
</i18n>
<i18n tag="p" path="Who published {number} events">
<strong slot="number">{{ statistics.numberOfEvents }}</strong>
</i18n>
<i18n tag="p" path="And {number} comments">
<strong slot="number">{{ statistics.numberOfComments }}</strong>
</i18n>
</div>
<div class="column contact">
<h4>{{ $t("Contact") }}</h4>
<p>
<a :title="config.contact" v-if="generateConfigLink()" :href="generateConfigLink().uri">{{
generateConfigLink().text
}}</a>
<span v-else-if="config.contact">{{ config.contact }}</span>
<span v-else>{{ $t("contact uninformed") }}</span>
</p>
</div>
</section>
<hr />
<section class="long-description content">
<div v-html="config.longDescription" />
</section>
<hr />
<section class="config">
<h3 class="subtitle">{{ $t("Instance configuration") }}</h3>
<table class="table is-fullwidth">
<tr>
<td>{{ $t("Mobilizon version") }}</td>
<td>{{ config.version }}</td>
</tr>
<tr>
<td>{{ $t("Registrations") }}</td>
<td v-if="config.registrationsOpen && config.registrationsAllowlist">
{{ $t("Restricted") }}
</td>
<td v-if="config.registrationsOpen && !config.registrationsAllowlist">
{{ $t("Open") }}
</td>
<td v-else>{{ $t("Closed") }}</td>
</tr>
<tr>
<td>{{ $t("Federation") }}</td>
<td v-if="config.federating">{{ $t("Enabled") }}</td>
<td v-else>{{ $t("Disabled") }}</td>
</tr>
<tr>
<td>{{ $t("Anonymous participations") }}</td>
<td v-if="config.anonymous.participation.allowed">{{ $t("If allowed by organizer") }}</td>
<td v-else>{{ $t("Disabled") }}</td>
</tr>
</table>
</section>
</div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { ABOUT } from "../../graphql/config";
import { STATISTICS } from "../../graphql/statistics";
import { IConfig } from "../../types/config.model";
import { IStatistics } from "../../types/statistics.model";
@Component({
apollo: {
config: ABOUT,
statistics: STATISTICS,
},
})
export default class AboutInstance extends Vue {
config!: IConfig;
statistics!: IStatistics;
get isContactEmail(): boolean {
return this.config && this.config.contact.includes("@");
}
get isContactURL(): boolean {
return this.config && this.config.contact.match(/^https?:\/\//g) !== null;
}
generateConfigLink(): { uri: string; text: string } | null {
if (!this.config.contact) return null;
if (this.isContactEmail) {
return { uri: `mailto:${this.config.contact}`, text: this.config.contact };
}
if (this.isContactURL) {
return {
uri: this.config.contact,
text: AboutInstance.urlToHostname(this.config.contact) || (this.$t("Contact") as string),
};
}
return null;
}
static urlToHostname(url: string): string | null {
try {
return new URL(url).hostname;
} catch (e) {
return null;
}
}
}
</script>
<style lang="scss" scoped>
@import "../../variables.scss";
section {
&:not(:first-child) {
margin: 2rem auto;
}
&.hero {
h2.title {
margin: auto;
}
}
&.contact-statistics {
margin: 2px auto;
.statistics {
display: grid;
grid-template-columns: repeat(auto-fit, 150px);
grid-template-rows: repeat(2, 1fr);
p {
text-align: right;
padding: 0 15px;
& > * {
display: block;
}
strong {
font-weight: 500;
font-size: 32px;
line-height: 48px;
}
}
}
.contact {
p {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}
</style>