add plugin settings page

src/webapp/main/src/views/admin/PluginsView.vue

@@ -11,7 +11,16 @@
     <div>
         <h2>Plugins</h2>
         <p>Here you can manage installed plugins. If you want to install more plugins, please follow the guide <a href="https://librevent.janishutz.com/docs/plugins/install">here</a></p>
-        <div class="bigButtons"></div>
+        <div class="bigButton-container">
+            <a class="bigButton" v-for="plugin in allPlugins" :href="plugin.settingsURL">
+                <object data="/otherAssets/libreeventLogo.png" type="image/png" class="plugin-logo">
+                    <img :src="plugin.logo">
+                </object>
+                <h3 style="margin-bottom: 0;">{{ plugin.pluginName }}</h3>
+                <p>{{ plugin.pluginDescription }}</p>
+                <p style="margin: 0">(Version V{{ plugin.version }}, maintained by {{ plugin.maintainer }})</p>
+            </a>
+        </div>
         <!-- TODO: Get all installed plugins -->
     </div>
 </template>
@@ -20,13 +29,59 @@
     export default {
         data () {
             return {
-                formData: {}
+                allPlugins: {}
             }
         },
         methods: {
-            setup () {
-                
+            loadData () {
+                fetch( '/admin/getAPI/getAllPlugins' ).then( res => {
+                    if ( res.status === 200 ) {
+                        res.json().then( json => {
+                            this.allPlugins = json;
+                        } ).catch( err => {
+                            console.error( err );
+                        } );
+                    }
+                } );
             }
+        },
+        created () {
+            this.loadData();
         }
     };
 </script>
+
+<style scoped>
+    .plugin-logo {
+        height: 50%;
+        margin: 0;
+        cursor: pointer;
+    }
+
+    .bigButton-container {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+
+    .bigButton {
+        background-color: var( --accent-background );
+        width: 40%;
+        height: 40vh;
+        border-color: black;
+        margin: 0.02%;
+        border-style: inset;
+        color: var( --secondary-color );
+        text-decoration: none;
+        border-width: 2px;
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        justify-content: center;
+    }
+
+    .bigButton:hover {
+        background-color: var( --accent-background-hover );
+    }
+</style>

src/webapp/main/src/views/admin/SettingsView.vue

@@ -65,6 +65,7 @@
             return {
                 adminAccounts: { 'janis': { 'username': 'janis', 'email': 'info@janishutz.com', 'permissions': [  ] }, 'admin': { 'username': 'admin', 'email': 'development@janishutz.com', 'permissions': [  ] } },
                 currentlyOpenMenu: '',
+                currentPopup: '',
                 settings: { 
                     '2fa': { 
                         'display': 'Require Two-Factor-Authentication of user', 
@@ -148,6 +149,7 @@
         },
         methods: {
             showAccountSettings ( account ) {
+                this.currentPopup = 'account';
                 this.$refs.popup.openPopup( 'Edit user permissions for ' + this.adminAccounts[ account ][ 'username' ], {
                     'pagesSettings': { 
                         'display': 'Modify pages', 
@@ -181,6 +183,7 @@
             , 'settings' );
             },
             showPaymentSettings () {
+                this.currentPopup = 'payments';
                 fetch( '/admin/getAPI/getPaymentGatewaySettings' ).then( res => {
                     if ( res.status === 200 ) {
                         res.json().then( json => {
@@ -192,6 +195,7 @@
                 } )
             },
             createAccount() {
+                this.currentPopup = 'createAccount';
                 this.$refs.popup.openPopup( 'Create new admin user', {
                     'role': { 
                         'display': 'User role',
@@ -245,7 +249,33 @@
                     console.log( 'user canceled' );
                     return;
                 } else if ( data.status === 'settings' ) {
-                    console.log( 'settings processing' )
+                    console.log( this.currentPopup );
+                    if ( this.currentPopup === 'account' ) { 
+                        console.log( 'settings processing' )
+                    } else if ( this.currentPopup === 'payments' ) {
+                        for ( let setting in data.data ) {
+                            if ( !data.data[ setting ] ) {
+                                this.$refs.notification.createNotification( 'Settings for the payment gateway are missing!', 10, 'error', 'normal' );
+                                this.showPaymentSettings();
+                                return;
+                            }
+                        }
+                        let fetchOptions = {
+                            method: 'post',
+                            body: JSON.stringify( data.data ),
+                            headers: {
+                                'Content-Type': 'application/json',
+                                'charset': 'utf-8'
+                            }
+                        };
+                        fetch( '/admin/API/updatePaymentGatewaySettings', fetchOptions ).then( res => {
+                            if ( res.status === 200 ) {
+                                this.$refs.notification.createNotification( 'Payment gateway settings saved!', 5, 'ok', 'normal' );
+                            }
+                        } )
+                    } else if ( this.currentPopup === 'createAccount' ) {
+
+                    }
                 } else {
                     console.log( 'hi' );
                 }