Add Settings page

assets/js/Stepper.vue

@@ -95,10 +95,7 @@
             <slide v-if="value.category == 'Wohnung'" class="py-8 sm:py-16 px-3 sm:px-6" :key="4">
                 <div class="text-center font-semibold text-gray-700 text-sm">Frage 4</div>
                 <heading>Wann wurde die<br />Wohnung <span class="text-primary">erbaut?</span></heading>
-                <!--
-                                                                                                                                                                                    <veeno :pipsy="pipsy" :tooltips="tooltips" :handles="[1950]" class="w-4/5 mx-auto" :range="range"
-                                                                                                                                                                                        v-model="value.construction_year" />
-                                                                                                                                                                    -->
+                <v-slider :min="1900" :max="maxYear" v-model="value.construction_year"></v-slider>
                 <pagination v-model="innerStep" class="mt-24"></pagination>
             </slide>
             <slide v-if="value.category == 'Wohnung'" class="py-8 sm:py-16 px-3 sm:px-6" :key="5">
@@ -123,7 +120,7 @@
             </slide>
 
             <slide v-if="value.category !== null" :key="slideCount[value.category]" class="py-8 sm:py-16 px-3 sm:px-6">
-                <heading>Bitte geben Sie Ihre Daten ein</heading>
+                <heading>Bitte geben Sie Ihre <span class="text-primary">Daten</span> ein</heading>
                 <div class="grid grid-cols-2 gap-4">
                     <v-text v-model="value.object_address" name="object_address" label="Straße & Hausnr des Objekts" />
                     <v-text v-model="value.object_zip" name="object_zip" label="PLZ des Objekts" />

settings.php

@@ -0,0 +1,35 @@
+<?php
+
+function it_render_template($template, $args)
+{
+	extract($args);
+	include(__DIR__ . '/templates/' . $template);
+}
+
+add_action('admin_init', function () {
+	register_setting('it-slider', 'it-slider-options');
+	add_settings_section('it-slider-section', 'Stellen Sie hier Ihren Immobilien-Slider ein.', fn () => '', 'it-slider');
+
+	add_settings_field('it-slider-field-color', 'Primäre Farbe', function ($args) {
+		$options = get_option('it-slider-options');
+		it_render_template('color-input.htm', ['value' => $options[$args['key']], 'name' => $args['key']]);
+	}, 'it-slider', 'it-slider-section', ['key' => 'it-slider-color']);
+});
+
+add_action('admin_menu', function () {
+	add_submenu_page(
+		'options-general.php',
+		'Immotooler Slider',
+		'Immotooler Slider',
+		'manage_options',
+		'immotooler-slider',
+		function () {
+			if (!current_user_can('manage_options')) {
+				return;
+			}
+
+			settings_errors('wporg_messages');
+			echo it_render_template('settings-body.htm', []);
+		}
+	);
+});

stepper.php

@@ -1,4 +1,5 @@
 <?php
+
 /**
  * Plugin Name:     Stepper
  * Plugin URI:      PLUGIN SITE HERE
@@ -13,9 +14,20 @@
  */
 
 require_once(__DIR__ . '/vendor/autoload.php');
+require_once(__DIR__ . '/settings.php');
 
 use Zoomyboy\Stepper\Stepper;
 
+register_activation_hook(__FILE__, function () {
+	add_option('it-slider-options', [
+		'it-slider-color' => '#006600',
+	]);
+});
+
+register_deactivation_hook(__FILE__, function () {
+	delete_option('it-slider-options');
+});
+
 
 $stepper = new Stepper();
 $stepper->loadEnv(__DIR__);
@@ -24,4 +36,3 @@ $stepper->scriptUrl = file_exists(__DIR__.'/assets/public/hot')
 	? 'http://localhost:8080/'
 	: plugin_dir_url(__FILE__) . 'assets/public/';
 $stepper->initFrontend();
-

templates/color-input.htm

@@ -0,0 +1 @@
+<input type="color" value="<?php echo esc_attr($value); ?>" name="it-slider-options[<?php echo esc_attr($name); ?>]">

templates/overwrite.htm

@@ -1,6 +1,6 @@
 <style type="text/css">
 :root {
-    --iw-slider-primary-color: #ff0000;
+--iw-slider-primary-color: <?php echo get_option('it-slider-options')['it-slider-color']; ?>;
 }
 .slider-custom {
     --slider-connect-bg: var(--iw-slider-primary-color);

templates/settings-body.htm

@@ -0,0 +1,10 @@
+<div class="wrap">
+    <h1><?php echo esc_html(get_admin_page_title()); ?></h1>
+    <form action="options.php" method="post">
+        <?php
+        settings_fields('it-slider');
+        do_settings_sections('it-slider');
+        submit_button('Speichern');
+        ?>
+    </form>
+</div>

templates/settings-message.htm

@@ -0,0 +1,3 @@
+<p id="<?php echo esc_attr($args['id']); ?>">
+    Follow the white rabbit.
+</p>