📦 NEW: Tools admin menu item

admin/class-captaincore-admin.php

@@ -51,9 +51,20 @@ class Captaincore_Admin {
 
 		$this->plugin_name = $plugin_name;
 		$this->version = $version;
+		add_action( 'admin_menu', [ $this, 'admin_menu' ] );
 
 	}
 
+	public function admin_menu() {
+        if ( current_user_can( 'manage_options' ) ) {
+            add_management_page( "CaptainCore", "CaptainCore", "manage_options", "captaincore", array( $this, 'admin_view' ) );
+        }
+    }
+
+	public function admin_view() {
+        require_once plugin_dir_path( __DIR__ ) . '/templates/admin.php';
+    }
+
 	/**
 	 * Register the stylesheets for the admin area.
 	 *

app/Configurations.php

@@ -11,14 +11,34 @@ class Configurations {
         if ( empty( $configurations ) ) {
             $configurations = (object) [];
         }
-        if ( ! isset( $configurations->colors ) ) {
+        if ( empty ( $configurations->colors ) ) {
-			$configurations->colors = [];
+			$configurations->colors = [
+                "primary"   => '#2c3e50',
+                "secondary" => '#424242',
+                "accent"    => '#82B1FF',
+                "error"     => '#FF5252',
+                "info"      => '#2196F3',
+                "success"   => '#4CAF50',
+                "warning"   => '#FFC107',
+            ];
+        }
+        if ( ! isset( $configurations->path ) ) {
+			$configurations->path = "/account/";
+        }
+        if ( ! isset( $configurations->mode ) ) {
+			$configurations->mode = "hosting";
         }
         if ( ! isset( $configurations->remote_upload_uri ) ) {
 			$configurations->remote_upload_uri = get_option( 'options_remote_upload_uri' );
         }
-        if ( ! isset( $configurations->logo ) ) {
+        if ( empty( $configurations->logo ) ) {
-			$configurations->logo = "";
+			$configurations->logo = "/wp-content/plugins/captaincore-manager/public/logo.webp";
+        }
+        if ( empty( $configurations->logo_width ) ) {
+            $configurations->logo_width = "32";
+        }
+        if ( ! isset( $configurations->name ) ) {
+			$configurations->name = "CaptainCore";
         }
         if ( ! isset( $configurations->scheduled_tasks ) ) {
 			$configurations->scheduled_tasks = [];
@@ -38,7 +58,7 @@ class Configurations {
         if ( ! isset( $configurations->intercom_secret_key ) ) {
 			$configurations->intercom_secret_key = "";
         }
-        if ( $configurations->dns_introduction ) {
+        if ( ! empty( $configurations->dns_introduction ) ) {
             $Parsedown = new \Parsedown();
 			$configurations->dns_introduction_html = $Parsedown->text( $configurations->dns_introduction );
         }
@@ -55,9 +75,9 @@ class Configurations {
         if ( empty( $configurations ) ) {
             $configurations = (object) [];
         }
-        if ( ! isset( $configurations->colors ) ) {
+        if ( empty ( $configurations->colors ) ) {
             $configurations->colors = [
-                "primary"   => '#1976D2',
+                "primary"   => '#2c3e50',
                 "secondary" => '#424242',
                 "accent"    => '#82B1FF',
                 "error"     => '#FF5252',
@@ -69,7 +89,7 @@ class Configurations {
         return $configurations->colors;
     }
 
-    public function update( $field, $value ) {
+    public function update_field( $field, $value ) {
         $configurations = json_decode( get_site_option( 'captaincore_configurations' ) );
         if ( empty( $configurations ) ) {
             $configurations = (object) [];
@@ -78,6 +98,21 @@ class Configurations {
         update_site_option( 'captaincore_configurations', json_encode( $configurations ) );
     }
 
+    public function update( $items ) {
+        
+        $configurations = json_decode( get_site_option( 'captaincore_configurations' ) );
+        if ( empty( $configurations ) ) {
+            $configurations = (object) [];
+        }
+        foreach( $items as $key => $value ) {
+            $configurations->{$key} = $value;
+        }
+		
+		update_site_option( 'captaincore_configurations', json_encode( $configurations ) );
+		( new CaptainCore\Configurations )->sync();
+        return $configurations;
+    }
+
     public function sync() {
         
         $command = "configuration sync";
@@ -127,4 +162,12 @@ class Configurations {
         return $products;
     }
 
+    public static function fetch() {
+        return ( new Configurations )->get();
+    }
+
+    public static function get_json() {
+        return json_encode( ( new Configurations )->get() );
+    }
+
 }

templates/admin.php

@@ -0,0 +1,146 @@
+<script src="https://unpkg.com/qs@6.5.2/dist/qs.js"></script>
+<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/vuetify@2.6.15/dist/vuetify.min.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/vuetify@2.6.15/dist/vuetify.min.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
+
+<style>
+[v-cloak] > * {
+    display:none;
+}
+[v-cloak]::before {
+    display: block;
+    position: relative;
+    left: 0%;
+    top: 0%;
+    max-width: 1000px;
+    margin:auto;
+    padding-bottom: 10em;
+}
+body #app {
+    line-height: initial;
+}
+.theme--light.v-data-table > .v-data-table__wrapper > table > tbody > tr:hover:not(.v-data-table__expanded__content):not(.v-data-table__empty-wrapper) {
+    background: none;
+}
+input[type=checkbox], input[type=color], input[type=date], input[type=datetime-local], input[type=datetime], input[type=email], input[type=month], input[type=number], input[type=password], input[type=radio], input[type=search], input[type=tel], input[type=text], input[type=time], input[type=url], input[type=week], select, textarea {
+    border:0px;
+    box-shadow: none;
+}
+input[type=text]:focus {
+    box-shadow: none;
+}
+#app .theme--light.v-application {
+    background: transparent;
+}
+input.readonly,input[readonly],textarea.readonly,textarea[readonly] {
+    background: transparent;
+}
+</style>
+<form action='options.php' method='post'>
+<div id="app" v-cloak>
+    <v-app >
+      <v-main>
+      <v-layout>
+        <v-row>
+        <v-col x12 class="mr-4 mt-4">
+            <v-card>
+            <v-overlay absolute :value="loading" class="align-start">
+                <div style="height: 100px;"></div>
+                <v-progress-circular size="128" color="white" indeterminate class="mt-16"></v-progress-circular>
+            </v-overlay>
+            <v-toolbar flat>
+                <v-toolbar-title>CaptainCore</v-toolbar-title>
+                <v-spacer></v-spacer>
+                <v-toolbar-items>
+                   
+                </v-toolbar-items>
+            </v-toolbar>
+            <v-card-text>
+                <v-subheader>Configurations</v-subheader>
+                <v-container>
+                <v-row style="max-width:450px">
+                    <v-col>
+                        <v-text-field v-model="configurations.path" label="Mount Path" persistent-hint hint="Location where CaptainCore will display on WordPress frontend."></v-text-field>
+                    </v-col>
+                </v-row>
+                <v-row style="max-width:450px">
+                    <v-col>
+                        <v-select label="Mode" v-model="configurations.mode" :items="modes"></v-select>
+                    </v-col>
+                </v-row>
+                </v-container>
+                <v-btn color="primary" @click="saveConfigurations()">Save Configurations</v-btn> <v-chip class="mx-3" input-value="true" label small v-show="pending_changes ">Unsaved configurations pending</v-chip>
+            </v-card-text>
+            </v-card>
+            <v-snackbar v-model="snackbar">
+                {{ response }}
+            <template v-slot:action="{ attrs }">
+                <v-btn text v-bind="attrs" @click="snackbar = false">Close</v-btn>
+            </template>
+            </v-snackbar>
+        </v-col>
+        </v-row>
+      </v-layout>
+      </v-main>
+    </v-app>
+  </div>
+</form>
+<script>
+new Vue({
+    el: '#app',
+    vuetify: new Vuetify({
+		theme: {
+			themes: {
+				light: {
+                    primary: '#0073aa',
+                    secondary: '#424242',
+                    accent: '#82B1FF',
+                    error: '#FF5252',
+                    info: '#2196F3',
+                    success: '#4CAF50',
+                    warning: '#FFC107'
+                }
+			},
+		},
+	}),
+    data: {
+        snackbar: false,
+        loading: false,
+        response: "",
+        wp_nonce: "",
+        configurations: <?php echo CaptainCore\Configurations::get_json(); ?>,
+        modes: [ { text: "Hosting", value: "hosting" }, { text: "Maintenance", value: "maintenance" }],
+    },
+    mounted() {
+        axios.get( '/' ).then(response => {
+            html = response.data
+            const regex = /var wpApiSettings.+"nonce":"(.+)"/
+            const found = html.match(regex);
+            if ( typeof found[1] !== 'undefined' ) {
+                this.wp_nonce = found[1]
+            }
+        })
+    },
+    methods: {
+        saveConfigurations() {
+            this.loading = true
+            axios.post( '/wp-json/captaincore/v1/configurations', {
+				configurations: this.configurations
+			}, {
+				headers: { 'X-WP-Nonce':this.wp_nonce }
+			})
+			.then( response => {
+				this.configurations = response.data
+                this.response = "Configurations updated."
+                this.snackbar = true
+                this.loading = false
+			})
+            .catch( error => {
+                console.log( error )
+            })
+        }
+    }
+})
+</script>