From 589949a6733dcfcddc04559630ab2dac15c18106 Mon Sep 17 00:00:00 2001 From: corsacca Date: Wed, 18 Dec 2024 13:38:54 +0100 Subject: [PATCH 1/3] Add geocoding step and endpoint to update dt options (#2619) * Add geocoding step and endpoint to update dt options * await save complete * update saving to be internal --- dt-core/admin/admin-settings-endpoints.php | 22 +- .../admin/components/setup-wizard-controls.js | 2 + dt-core/admin/components/setup-wizard-keys.js | 209 ++++++++++++++++++ dt-core/admin/components/setup-wizard.js | 16 +- dt-core/admin/js/dt-shared.js | 8 + dt-core/admin/menu/menu-setup-wizard.php | 10 + 6 files changed, 264 insertions(+), 3 deletions(-) create mode 100644 dt-core/admin/components/setup-wizard-keys.js diff --git a/dt-core/admin/admin-settings-endpoints.php b/dt-core/admin/admin-settings-endpoints.php index 8d56b7cc2..9c5316478 100644 --- a/dt-core/admin/admin-settings-endpoints.php +++ b/dt-core/admin/admin-settings-endpoints.php @@ -223,7 +223,6 @@ public function add_api_routes() { 'permission_callback' => [ $this, 'default_permission_check' ], ] ); - register_rest_route( $this->namespace, '/modules-update', [ 'methods' => 'POST', @@ -231,6 +230,27 @@ public function add_api_routes() { 'permission_callback' => [ $this, 'default_permission_check' ], ] ); + register_rest_route( + $this->namespace, '/update-dt-options', [ + 'methods' => 'POST', + 'callback' => [ $this, 'update_dt_options' ], + 'permission_callback' => [ $this, 'default_permission_check' ], + ] + ); + } + + public function update_dt_options( WP_REST_REQUEST $request ){ + $params = $request->get_params(); + $updated = false; + foreach ( $params as $option_key => $option_value ){ + //only allow updating D.T options + if ( strpos( $option_key, 'dt_' ) !== 0 ){ + continue; + } + update_option( $option_key, $option_value ); + $updated = true; + } + return $updated; } public function update_modules( WP_REST_REQUEST $request ) { diff --git a/dt-core/admin/components/setup-wizard-controls.js b/dt-core/admin/components/setup-wizard-controls.js index 6bf031a69..2a3075ea1 100644 --- a/dt-core/admin/components/setup-wizard-controls.js +++ b/dt-core/admin/components/setup-wizard-controls.js @@ -7,6 +7,7 @@ export class SetupWizardControls extends OpenLitElement { hideBack: { type: Boolean }, backLabel: { type: String }, nextLabel: { type: String }, + saving: { type: Boolean }, }; } back() { @@ -25,6 +26,7 @@ export class SetupWizardControls extends OpenLitElement { `} `; diff --git a/dt-core/admin/components/setup-wizard-keys.js b/dt-core/admin/components/setup-wizard-keys.js new file mode 100644 index 000000000..9c55b5dba --- /dev/null +++ b/dt-core/admin/components/setup-wizard-keys.js @@ -0,0 +1,209 @@ +import { + html, + css, +} from 'https://cdn.jsdelivr.net/gh/lit/dist@2.4.0/all/lit-all.min.js'; +import { OpenLitElement } from './setup-wizard-open-element.js'; + +export class SetupWizardKeys extends OpenLitElement { + static styles = [ + css` + :host { + display: block; + } + `, + ]; + + static get properties() { + return { + step: { type: Object }, + firstStep: { type: Boolean }, + _options: { type: Object }, + _saving: { type: Boolean, attribute: false }, + }; + } + + back() { + this.dispatchEvent(new CustomEvent('back')); + } + async next() { + this._saving = true; + await window.dt_admin_shared.update_dt_options(this._options); + this._saving = false; + + this.dispatchEvent(new CustomEvent('next')); + } + + constructor() { + super(); + this._saving = false; + this._options = { + dt_mapbox_api_key: '', + dt_google_map_key: '', + }; + this.show_mapbox_instructions = false; + this.show_google_instructions = false; + } + + render() { + this._options.dt_mapbox_api_key = this.step.config.dt_mapbox_api_key; + this._options.dt_google_map_key = this.step.config.dt_google_map_key; + return html` +
+
+ + + + + + + + + + + + + + + + + + + + +
Plugin NameDescriptionValue
Mapbox key + Upgrade maps and get precise locations with a MapBox key. +
+ +
+
    +
  1. + Go to + MapBox.com. +
    2. +
  2. + Register for a new account (MapBox.com)
    + (email required. A credit card might be required, + though you will likely not go over the free monthly + quota.) +
    3. +
  3. + Once registered, go to your account home page. (Account Page)
    +
    4. +
  4. + Inside the section labeled "Access Tokens", either + create a new token or use the default token provided. + Copy this token. +
    5. +
  5. + Paste the token into the "Mapbox API Token" field in the + box above. +
    6. +
+
+ 		+ { + this._options.dt_mapbox_api_key = e.target.value; + }} + /> +
Google key + Upgrade maps and get even more precise locations with a Google + key. +
+ +
+
    +
  1. + Go to + https://console.cloud.google.com. +
    2. +
  2. + Register with your Google Account or Gmail Account +
    3. +
  3. Once registered, create a new project.
    4. +
  4. + Then go to APIs & Services > Credentials and "Create + Credentials" API Key. Copy this key. +
    5. +
  5. + Paste the key into the "Google API Key" field in the box + above here in the Disciple.Tools Mapping Admin. +
    6. +
  6. + Again, in Google Cloud Console, in APIs & Services go to + Library. Find and enable: (1) Maps Javascript API, (2) + Places API, and (3) GeoCoding API. +
    7. +
  7. + Lastly, in in Credentials for the API key it is + recommended in the settings of the API key to be set + "None" for Application Restrictions and "Don't restrict + key" in API Restrictions. +
    8. +
+
+ 		+ { + this._options.dt_google_map_key = e.target.value; + }} + /> +
+
+ +
+ `; + } +} +customElements.define('setup-wizard-keys', SetupWizardKeys); diff --git a/dt-core/admin/components/setup-wizard.js b/dt-core/admin/components/setup-wizard.js index b1e1ad71f..ba53d477b 100644 --- a/dt-core/admin/components/setup-wizard.js +++ b/dt-core/admin/components/setup-wizard.js @@ -61,6 +61,7 @@ export class SetupWizard extends LitElement { cursor: pointer; background-color: var(--default-color); transition: background-color 120ms linear; + box-shadow: 1px 1px 3px 0 var(--default-dark); } button:hover, button:active, @@ -278,13 +279,21 @@ export class SetupWizard extends LitElement { opacity: 0.7; width: 20px; height: 20px; - display: block; + display: inline-block; + } + .spinner.light { + background: url('images/wpspin_light-2x.gif') no-repeat; + background-size: 20px 20px; + } + button .spinner { + vertical-align: bottom; } table { margin-bottom: 1rem; } table td { padding: 0.5rem; + vertical-align: top; } table thead tr { background-color: var(--default-color); @@ -313,6 +322,10 @@ export class SetupWizard extends LitElement { const url = new URL(location.href); this.isKitchenSink = url.searchParams.has('kitchen-sink'); + //get step number from step url param + if (url.searchParams.has('step')) { + this.currentStepNumber = parseInt(url.searchParams.get('step')); + } } firstUpdated() { @@ -356,7 +369,6 @@ export class SetupWizard extends LitElement { return; } this.currentStepNumber = i; - console.log(this.currentStepNumber); } renderStep() { diff --git a/dt-core/admin/js/dt-shared.js b/dt-core/admin/js/dt-shared.js index f6fc0192f..9ac4265b2 100644 --- a/dt-core/admin/js/dt-shared.js +++ b/dt-core/admin/js/dt-shared.js @@ -36,6 +36,14 @@ window.dt_admin_shared = { .replace(/"/g, '"') .replace(/'/g, '''); }, + + /** + * Update options. Provide an object with the options to update. + * @param options + */ + update_dt_options: (options) => + makeRequest('POST', 'update-dt-options', options, 'dt-admin-settings/'), + plugin_install: (download_url) => makeRequest( 'POST', diff --git a/dt-core/admin/menu/menu-setup-wizard.php b/dt-core/admin/menu/menu-setup-wizard.php index 8a2184576..68f57f05f 100644 --- a/dt-core/admin/menu/menu-setup-wizard.php +++ b/dt-core/admin/menu/menu-setup-wizard.php @@ -48,6 +48,7 @@ public function enqueue_scripts(){ dt_theme_enqueue_script( 'setup-wizard-modules', 'dt-core/admin/components/setup-wizard-modules.js', [ 'setup-wizard', 'setup-wizard-open-element' ], true ); dt_theme_enqueue_script( 'setup-wizard-plugins', 'dt-core/admin/components/setup-wizard-plugins.js', [ 'setup-wizard', 'setup-wizard-open-element' ], true ); dt_theme_enqueue_script( 'setup-wizard-details', 'dt-core/admin/components/setup-wizard-details.js', [ 'setup-wizard', 'setup-wizard-open-element' ], true ); + dt_theme_enqueue_script( 'setup-wizard-keys', 'dt-core/admin/components/setup-wizard-keys.js', [ 'setup-wizard', 'setup-wizard-open-element' ], true ); dt_theme_enqueue_script( 'setup-wizard-controls', 'dt-core/admin/components/setup-wizard-controls.js', [ 'setup-wizard', 'setup-wizard-open-element' ], true ); dt_theme_enqueue_script( 'setup-wizard-intro', 'dt-core/admin/components/setup-wizard-intro.js', [ 'setup-wizard', 'setup-wizard-open-element' ], true ); dt_theme_enqueue_script( 'setup-wizard-celebration', 'dt-core/admin/components/setup-wizard-celebration.js', [ 'setup-wizard', 'setup-wizard-open-element' ], true ); @@ -141,6 +142,15 @@ public function setup_wizard_steps() { 'description' => 'Choose which plugins to install.', 'component' => 'setup-wizard-plugins', ], + [ + 'name' => 'Site keys', + 'description' => 'Fill in some site details', + 'component' => 'setup-wizard-keys', + 'config' => [ + 'dt_google_map_key' => Disciple_Tools_Google_Geocode_API::get_key(), + 'dt_mapbox_api_key' => DT_Mapbox_API::get_key(), + ], + ], [ 'key' => 'celebration', 'component' => 'setup-wizard-celebration', From 952e40b0490e7a83422d88261b518d949382f798 Mon Sep 17 00:00:00 2001 From: corsac Date: Wed, 18 Dec 2024 13:44:35 +0100 Subject: [PATCH 2/3] Consistent Capitalization --- dt-core/admin/components/setup-wizard-celebration.js | 1 + dt-core/admin/components/setup-wizard-controls.js | 4 ++-- dt-core/admin/components/setup-wizard-plugins.js | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/dt-core/admin/components/setup-wizard-celebration.js b/dt-core/admin/components/setup-wizard-celebration.js index b68e7b21f..8abac31d5 100644 --- a/dt-core/admin/components/setup-wizard-celebration.js +++ b/dt-core/admin/components/setup-wizard-celebration.js @@ -40,6 +40,7 @@ export class SetupWizardCelebration extends OpenLitElement { `; diff --git a/dt-core/admin/components/setup-wizard-controls.js b/dt-core/admin/components/setup-wizard-controls.js index 2a3075ea1..8d605e643 100644 --- a/dt-core/admin/components/setup-wizard-controls.js +++ b/dt-core/admin/components/setup-wizard-controls.js @@ -22,10 +22,10 @@ export class SetupWizardControls extends OpenLitElement { ${this.hideBack ? '' : html` - + `} diff --git a/dt-core/admin/components/setup-wizard-plugins.js b/dt-core/admin/components/setup-wizard-plugins.js index 1311a4b15..4815c9979 100644 --- a/dt-core/admin/components/setup-wizard-plugins.js +++ b/dt-core/admin/components/setup-wizard-plugins.js @@ -120,7 +120,7 @@ export class SetupWizardPlugins extends OpenLitElement { From 2165853c086a4b238074b3507de5d1fc0e006ee4 Mon Sep 17 00:00:00 2001 From: corsac Date: Wed, 18 Dec 2024 14:22:13 +0100 Subject: [PATCH 3/3] Add titles to keys and plugin steps --- dt-core/admin/components/setup-wizard-keys.js | 5 +++-- dt-core/admin/components/setup-wizard-plugins.js | 3 ++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/dt-core/admin/components/setup-wizard-keys.js b/dt-core/admin/components/setup-wizard-keys.js index 9c55b5dba..bd37d644b 100644 --- a/dt-core/admin/components/setup-wizard-keys.js +++ b/dt-core/admin/components/setup-wizard-keys.js @@ -49,11 +49,12 @@ export class SetupWizardKeys extends OpenLitElement { this._options.dt_google_map_key = this.step.config.dt_google_map_key; return html`
-
+
+

Mapping and Geocoding

- + diff --git a/dt-core/admin/components/setup-wizard-plugins.js b/dt-core/admin/components/setup-wizard-plugins.js index 4815c9979..cd0b5a8a9 100644 --- a/dt-core/admin/components/setup-wizard-plugins.js +++ b/dt-core/admin/components/setup-wizard-plugins.js @@ -67,7 +67,8 @@ export class SetupWizardPlugins extends OpenLitElement { render() { return html`
-
+
+

Recommended Plugins

Plugin NameKey Description Value