2020-06-19 19:27:10 +02:00
|
|
|
<template>
|
|
|
|
<div v-if="config">
|
|
|
|
<section class="hero is-primary">
|
|
|
|
<div class="hero-body">
|
|
|
|
<div class="container">
|
2021-11-07 21:02:06 +01:00
|
|
|
<h1 class="title" dir="auto">{{ config.name }}</h1>
|
|
|
|
<p dir="auto">{{ config.description }}</p>
|
2020-06-19 19:27:10 +02:00
|
|
|
</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>
|
2020-09-30 10:42:19 +02:00
|
|
|
<i18n tag="p" path="and {number} groups">
|
2020-10-07 10:05:07 +02:00
|
|
|
<strong slot="number">{{ statistics.numberOfLocalGroups }}</strong>
|
2020-09-30 10:42:19 +02:00
|
|
|
</i18n>
|
2020-06-19 19:27:10 +02:00
|
|
|
<i18n tag="p" path="Who published {number} events">
|
2020-10-07 10:05:07 +02:00
|
|
|
<strong slot="number">{{ statistics.numberOfLocalEvents }}</strong>
|
2020-06-19 19:27:10 +02:00
|
|
|
</i18n>
|
|
|
|
<i18n tag="p" path="And {number} comments">
|
2020-10-07 10:05:07 +02:00
|
|
|
<strong slot="number">{{ statistics.numberOfLocalComments }}</strong>
|
2020-06-19 19:27:10 +02:00
|
|
|
</i18n>
|
|
|
|
</div>
|
|
|
|
<div class="column contact">
|
2021-10-10 16:24:12 +02:00
|
|
|
<p class="has-text-weight-bold">{{ $t("Contact") }}</p>
|
2021-03-01 18:29:48 +01:00
|
|
|
<instance-contact-link
|
|
|
|
v-if="config && config.contact"
|
|
|
|
:contact="config.contact"
|
|
|
|
/>
|
|
|
|
<p v-else>{{ $t("No information") }}</p>
|
2020-06-19 19:27:10 +02:00
|
|
|
</div>
|
|
|
|
</section>
|
2021-10-10 16:24:12 +02:00
|
|
|
<hr role="presentation" />
|
2020-06-23 11:14:07 +02:00
|
|
|
<section class="long-description content">
|
2020-06-19 19:27:10 +02:00
|
|
|
<div v-html="config.longDescription" />
|
|
|
|
</section>
|
2021-10-10 16:24:12 +02:00
|
|
|
<hr role="presentation" />
|
2020-06-19 19:27:10 +02:00
|
|
|
<section class="config">
|
2021-10-10 16:24:12 +02:00
|
|
|
<h2 class="subtitle">{{ $t("Instance configuration") }}</h2>
|
2020-06-19 19:27:10 +02:00
|
|
|
<table class="table is-fullwidth">
|
2020-10-20 10:36:43 +02:00
|
|
|
<tr>
|
|
|
|
<td>{{ $t("Instance languages") }}</td>
|
2021-04-19 12:40:51 +02:00
|
|
|
<td
|
|
|
|
v-if="config.languages.length > 0"
|
|
|
|
:title="this.config ? this.config.languages.join(', ') : ''"
|
|
|
|
>
|
2020-11-30 10:24:11 +01:00
|
|
|
{{ formattedLanguageList }}
|
|
|
|
</td>
|
2021-04-19 12:40:51 +02:00
|
|
|
<td v-else>{{ $t("No information") }}</td>
|
2020-10-20 10:36:43 +02:00
|
|
|
</tr>
|
2020-06-19 19:27:10 +02:00
|
|
|
<tr>
|
|
|
|
<td>{{ $t("Mobilizon version") }}</td>
|
|
|
|
<td>{{ config.version }}</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>{{ $t("Registrations") }}</td>
|
2020-09-29 09:53:48 +02:00
|
|
|
<td v-if="config.registrationsOpen && config.registrationsAllowlist">
|
2020-06-19 19:27:10 +02:00
|
|
|
{{ $t("Restricted") }}
|
|
|
|
</td>
|
2020-09-29 09:53:48 +02:00
|
|
|
<td v-if="config.registrationsOpen && !config.registrationsAllowlist">
|
2020-06-19 19:27:10 +02:00
|
|
|
{{ $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>
|
2020-11-30 10:24:11 +01:00
|
|
|
<td v-if="config.anonymous.participation.allowed">
|
|
|
|
{{ $t("If allowed by organizer") }}
|
|
|
|
</td>
|
2020-06-19 19:27:10 +02:00
|
|
|
<td v-else>{{ $t("Disabled") }}</td>
|
|
|
|
</tr>
|
2021-04-19 12:40:51 +02:00
|
|
|
<tr class="instance-feeds">
|
|
|
|
<td>{{ $t("Instance feeds") }}</td>
|
|
|
|
<td v-if="config.instanceFeeds.enabled" class="buttons">
|
|
|
|
<b-button
|
|
|
|
tag="a"
|
|
|
|
size="is-small"
|
|
|
|
icon-left="rss"
|
|
|
|
href="/feed/instance/atom"
|
|
|
|
target="_blank"
|
|
|
|
>{{ $t("RSS/Atom Feed") }}</b-button
|
|
|
|
>
|
|
|
|
|
|
|
|
<b-button
|
|
|
|
tag="a"
|
|
|
|
size="is-small"
|
|
|
|
icon-left="calendar-sync"
|
|
|
|
href="/feed/instance/ics"
|
|
|
|
target="_blank"
|
|
|
|
>{{ $t("ICS/WebCal Feed") }}</b-button
|
|
|
|
>
|
|
|
|
</td>
|
|
|
|
<td v-else>{{ $t("Disabled") }}</td>
|
|
|
|
</tr>
|
2020-06-19 19:27:10 +02:00
|
|
|
</table>
|
|
|
|
</section>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts">
|
|
|
|
import { Component, Vue } from "vue-property-decorator";
|
2020-10-20 10:36:43 +02:00
|
|
|
import { formatList } from "@/utils/i18n";
|
2021-02-03 18:00:49 +01:00
|
|
|
import InstanceContactLink from "@/components/About/InstanceContactLink.vue";
|
2020-11-02 11:22:54 +01:00
|
|
|
import { LANGUAGES_CODES } from "@/graphql/admin";
|
|
|
|
import { ILanguage } from "@/types/admin.model";
|
2020-06-19 19:27:10 +02:00
|
|
|
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,
|
2020-11-02 11:22:54 +01:00
|
|
|
languages: {
|
|
|
|
query: LANGUAGES_CODES,
|
|
|
|
variables() {
|
|
|
|
return {
|
2021-03-26 19:27:51 +01:00
|
|
|
codes: this?.config.languages,
|
2020-11-02 11:22:54 +01:00
|
|
|
};
|
|
|
|
},
|
|
|
|
skip() {
|
2021-03-26 19:27:51 +01:00
|
|
|
return !this.config || !this.config?.languages;
|
2020-11-02 11:22:54 +01:00
|
|
|
},
|
|
|
|
},
|
2020-06-19 19:27:10 +02:00
|
|
|
},
|
2021-02-03 18:00:49 +01:00
|
|
|
components: {
|
|
|
|
InstanceContactLink,
|
|
|
|
},
|
2021-05-25 16:21:29 +02:00
|
|
|
metaInfo() {
|
|
|
|
return {
|
|
|
|
title: this.$t("About {instance}", {
|
|
|
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
|
|
// @ts-ignore
|
|
|
|
instance: this?.config?.name,
|
|
|
|
}) as string,
|
|
|
|
};
|
|
|
|
},
|
2020-06-19 19:27:10 +02:00
|
|
|
})
|
|
|
|
export default class AboutInstance extends Vue {
|
|
|
|
config!: IConfig;
|
2020-07-09 17:24:28 +02:00
|
|
|
|
2020-06-19 19:27:10 +02:00
|
|
|
statistics!: IStatistics;
|
|
|
|
|
2020-11-02 11:22:54 +01:00
|
|
|
languages!: ILanguage[];
|
2020-10-20 10:36:43 +02:00
|
|
|
|
2020-11-02 11:22:54 +01:00
|
|
|
get formattedLanguageList(): string {
|
2020-12-04 15:08:49 +01:00
|
|
|
if (this.languages) {
|
|
|
|
const list = this.languages.map(({ name }) => name);
|
|
|
|
return formatList(list);
|
|
|
|
}
|
|
|
|
return "";
|
2020-11-02 11:22:54 +01:00
|
|
|
}
|
2020-06-19 19:27:10 +02:00
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
section {
|
|
|
|
&:not(:first-child) {
|
|
|
|
margin: 2rem auto;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.hero {
|
2021-10-10 16:24:12 +02:00
|
|
|
h1.title {
|
2020-06-19 19:27:10 +02:00
|
|
|
margin: auto;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&.contact-statistics {
|
|
|
|
margin: 2px auto;
|
|
|
|
.statistics {
|
2020-09-30 10:42:19 +02:00
|
|
|
display: grid;
|
|
|
|
grid-template-columns: repeat(auto-fit, 150px);
|
2020-10-07 10:05:07 +02:00
|
|
|
gap: 2rem 0;
|
2020-06-19 19:27:10 +02:00
|
|
|
p {
|
|
|
|
text-align: right;
|
|
|
|
padding: 0 15px;
|
|
|
|
|
|
|
|
& > * {
|
|
|
|
display: block;
|
|
|
|
}
|
|
|
|
|
|
|
|
strong {
|
|
|
|
font-weight: 500;
|
|
|
|
font-size: 32px;
|
|
|
|
line-height: 48px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.contact {
|
2021-10-10 16:24:12 +02:00
|
|
|
h3 {
|
2020-10-07 10:05:07 +02:00
|
|
|
font-weight: bold;
|
|
|
|
}
|
2020-06-19 19:27:10 +02:00
|
|
|
p {
|
|
|
|
width: 200px;
|
|
|
|
white-space: nowrap;
|
|
|
|
overflow: hidden;
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2021-04-19 12:40:51 +02:00
|
|
|
tr.instance-feeds {
|
|
|
|
height: 3rem;
|
|
|
|
td:first-child {
|
|
|
|
vertical-align: middle;
|
|
|
|
}
|
|
|
|
td:last-child {
|
|
|
|
height: 3rem;
|
|
|
|
}
|
|
|
|
}
|
2020-06-19 19:27:10 +02:00
|
|
|
}
|
|
|
|
</style>
|