115 lines
		
	
	
		
			3.8 KiB
		
	
	
	
		
			Vue
		
	
	
	
			
		
		
	
	
			115 lines
		
	
	
		
			3.8 KiB
		
	
	
	
		
			Vue
		
	
	
	
| <template>
 | |
|     <form class="grow p-6 grid grid-cols-2 gap-3 items-start content-start" @submit.prevent="submit">
 | |
|         <div class="col-span-full text-gray-100 mb-3">
 | |
|             <p class="text-sm">
 | |
|                 Scoutrobot kann automatisch Mailinglisten erstellen, wenn es mit einem existierenden
 | |
|                 <a href="https://docs.mailman3.org/en/latest/">Mailman Server</a> verbunden wird. Mailman ist ein
 | |
|                 OpenSource-Mailinglisten-System, um E-Mails an mehrere Leute zu senden.
 | |
|             </p>
 | |
|             <p class="text-sm mt-1">
 | |
|                 Scoutrobot wird nach der Ersteinrichtung deine Mitglieder zu bestehenden E-Mail-Verteilern hinzufügen.
 | |
|             </p>
 | |
|         </div>
 | |
|         <div>
 | |
|             <f-switch id="is_active" v-model="inner.is_active" label="Mailman-Synchronisation aktiv"></f-switch>
 | |
|         </div>
 | |
|         <div class="flex h-full items-center">
 | |
|             <svg-sprite :src="stateDisplay.icon" :class="stateDisplay.text" class="w-5 h-5"></svg-sprite>
 | |
|             <span class="ml-3" :class="stateDisplay.text" v-text="stateDisplay.label"></span>
 | |
|         </div>
 | |
|         <f-text label="URL" hint="URL der Mailman Api" name="base_url" id="base_url" v-model="inner.base_url"></f-text>
 | |
|         <f-text label="Benutzername" name="username" id="username" v-model="inner.username"></f-text>
 | |
|         <f-text type="password" label="Passwort" name="password" id="password" v-model="inner.password"></f-text>
 | |
|         <f-select
 | |
|             label="Liste für alle Mitglieder"
 | |
|             name="all_list"
 | |
|             id="all_list"
 | |
|             v-model="inner.all_list"
 | |
|             :options="lists"
 | |
|         ></f-select>
 | |
|         <f-select
 | |
|             label="Liste für Eltern"
 | |
|             name="all_parents_list"
 | |
|             id="all_parents_list"
 | |
|             v-model="inner.all_parents_list"
 | |
|             :options="lists"
 | |
|         ></f-select>
 | |
|         <f-select
 | |
|             label="Liste für aktive Leiter"
 | |
|             name="active_leaders_list"
 | |
|             id="active_leaders_list"
 | |
|             v-model="inner.active_leaders_list"
 | |
|             :options="lists"
 | |
|         ></f-select>
 | |
|         <f-select
 | |
|             label="Liste für passive Leiter"
 | |
|             name="passive_leaders_list"
 | |
|             id="passive_leaders_list"
 | |
|             v-model="inner.passive_leaders_list"
 | |
|             :options="lists"
 | |
|         ></f-select>
 | |
|         <div></div>
 | |
|         <div>
 | |
|             <button type="submit" class="mt-3 btn block btn-primary">Speichern</button>
 | |
|         </div>
 | |
|     </form>
 | |
| </template>
 | |
| 
 | |
| <script>
 | |
| import AppLayout from '../../layouts/AppLayout.vue';
 | |
| import SettingLayout from './Layout.vue';
 | |
| 
 | |
| export default {
 | |
|     layout: [AppLayout, SettingLayout],
 | |
| 
 | |
|     data: function () {
 | |
|         return {
 | |
|             inner: {},
 | |
|         };
 | |
|     },
 | |
|     props: {
 | |
|         data: {},
 | |
|         state: {},
 | |
|         lists: {},
 | |
|     },
 | |
|     computed: {
 | |
|         stateDisplay() {
 | |
|             if (this.state === null) {
 | |
|                 return {
 | |
|                     text: 'text-gray-500',
 | |
|                     icon: 'disabled',
 | |
|                     label: 'Deaktiviert',
 | |
|                 };
 | |
|             }
 | |
| 
 | |
|             return this.state
 | |
|                 ? {
 | |
|                       text: 'text-green-500',
 | |
|                       icon: 'check',
 | |
|                       label: 'Verbindung erfolgreich.',
 | |
|                   }
 | |
|                 : {
 | |
|                       text: 'text-red-500',
 | |
|                       icon: 'close',
 | |
|                       label: 'Verbindung fehlgeschlagen.',
 | |
|                   };
 | |
|         },
 | |
|     },
 | |
| 
 | |
|     methods: {
 | |
|         submit() {
 | |
|             var _self = this;
 | |
| 
 | |
|             this.$inertia.post('/setting/mailman', this.inner, {
 | |
|                 onSuccess(page) {
 | |
|                     _self.inner = page.props.data;
 | |
|                 },
 | |
|             });
 | |
|         },
 | |
|     },
 | |
|     created() {
 | |
|         this.inner = this.data;
 | |
|     },
 | |
| };
 | |
| </script>
 |