Everywhere: Add config and cache page

Add config database table and enable crud page.
Also add cache controller, model and view and routes for these pages.

Make the JavaScript display a message when changing the state of
development mode.

app/controllers/AdminController.php

@@ -2,7 +2,6 @@
 
 namespace App\Controllers;
 
-use App\Classes\Config;
 use App\Classes\User;
 
 class AdminController extends PageController {
@@ -13,37 +12,6 @@ class AdminController extends PageController {
 		parent::view('', 'Admin');
 	}
 
-	public function developmentAction(): void
-	{
-		if (Config::c('DEVELOPMENT_MODE') == 'cloudflare') {
-			$token = Config::c('DEVELOPMENT_MODE_TOKEN');
-			$zone = Config::c('DEVELOPMENT_MODE_ZONE');
-
-			$url = "https://api.cloudflare.com/client/v4/zones/$zone/settings/development_mode";
-			$headers = [
-				"Authorization: Bearer $token",
-				"Content-Type: application/json"
-			];
-			$data = '{"value": "on"}';
-
-			$curl = curl_init();
-			curl_setopt($curl, CURLOPT_URL, $url);
-			curl_setopt($curl, CURLOPT_HTTPHEADER, $headers);
-			curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
-			curl_setopt($curl, CURLOPT_CUSTOMREQUEST, 'PATCH');
-			curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
-			// curl_setopt($curl, CURLINFO_HEADER_OUT, 1);
-
-			$response = curl_exec($curl);
-			// $info = curl_getinfo($curl, CURLINFO_HEADER_OUT);
-
-			curl_close($curl);
-		}
-
-		echo $response;
-		// echo $info;
-	}
-
 	public function toggleAction(): void {
 		User::toggle();
 		echo User::getToggle() ? '1' : '0';

app/controllers/CacheController.php

@@ -0,0 +1,128 @@
+<?php
+
+namespace App\Controllers;
+
+use App\Classes\Config;
+use App\Model\ConfigModel;
+
+class CacheController extends PageController {
+
+	public function cacheAction(): void
+	{
+		$config = $this->getConfigValues();
+
+		$this->router->service()->config = $config;
+		parent::view();
+	}
+
+	public function developmentAction(): void
+	{
+		if (Config::c('CLOUDFLARE_ENABLED') != '1') {
+			return;
+		}
+
+		$token = Config::c('CLOUDFLARE_TOKEN');
+		$zone = Config::c('CLOUDFLARE_ZONE');
+
+		$url = "https://api.cloudflare.com/client/v4/zones/$zone/settings/development_mode";
+		$headers = [
+			"Authorization: Bearer $token",
+			"Content-Type: application/json"
+		];
+
+		$config = $this->getConfigValues();
+		$currentState = $config['CLOUDFLARE_DEVELOPMENT_MODE_ENABLED'];
+
+		$newState = $currentState == '1' ? 'off' : 'on';
+		$data = '{"value": "' . $newState . '"}';
+
+		$curl = curl_init();
+		curl_setopt($curl, CURLOPT_URL, $url);
+		curl_setopt($curl, CURLOPT_HTTPHEADER, $headers);
+		curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
+		curl_setopt($curl, CURLOPT_CUSTOMREQUEST, 'PATCH');
+		curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
+		// curl_setopt($curl, CURLINFO_HEADER_OUT, 1);
+
+		$response = curl_exec($curl);
+		// $info = curl_getinfo($curl, CURLINFO_HEADER_OUT);
+
+		curl_close($curl);
+
+		$this->saveConfigValues($response);
+
+		echo $response;
+		// echo $info;
+	}
+
+	//-------------------------------------//
+
+	private static function getConfigValues(): array
+	{
+		$result = [];
+
+		$config = [
+			'CLOUDFLARE_DEVELOPMENT_MODE_ENABLED' => '0',
+			'CLOUDFLARE_DEVELOPMENT_MODE_UPDATED_AT' => '',
+			'CLOUDFLARE_DEVELOPMENT_MODE_EXPIRES_IN' => '',
+		];
+
+		foreach ($config as $key => $value) {
+			$result[$key] = ConfigModel::firstOrCreate(
+				['key' => $key],
+				['value' => $value]
+			)->value;
+		}
+
+		if ($result['CLOUDFLARE_DEVELOPMENT_MODE_ENABLED']) {
+			$expiresIn = $result['CLOUDFLARE_DEVELOPMENT_MODE_EXPIRES_IN'];
+			$updatedAt = $result['CLOUDFLARE_DEVELOPMENT_MODE_UPDATED_AT'];
+
+			$expiresAtObject = new \DateTime($updatedAt);
+			$expiresAt = $expiresAtObject
+					   ->modify("+ $expiresIn seconds")
+					   ->format('Y-m-d H:i:s');
+			$nowObject = new \DateTime('now');
+			$now = $nowObject->format('Y-m-d H:i:s');
+
+			if ($now >= $expiresAt) {
+				ConfigModel::updateOrCreate(
+					['key' => 'CLOUDFLARE_DEVELOPMENT_MODE_ENABLED'],
+					['value' => 0]);
+				$result['CLOUDFLARE_DEVELOPMENT_MODE_ENABLED'] = 0;
+			}
+			else {
+				$result['enabled-remaining'] = $expiresAtObject->modify(
+					'- ' . $nowObject->getTimestamp() . ' seconds'
+				)->format('H:i:s');
+			}
+		}
+
+		return $result;
+	}
+
+	private static function saveConfigValues(string $response): void
+	{
+		$decodedResponse = json_decode($response, true);
+		if ($decodedResponse['success'] == true) {
+			$state = $decodedResponse['result']['value'];
+			$expiresIn = $decodedResponse['result']['time_remaining'];
+			$updatedAt = $decodedResponse['result']['modified_on'];
+
+			$updatedAtFormatted = (new \DateTime($updatedAt))->format('Y-m-d H:i:s');
+
+			ConfigModel::updateOrCreate(
+				['key' => 'CLOUDFLARE_DEVELOPMENT_MODE_ENABLED'],
+				['value' => $state == 'on' ? 1 : 0]);
+
+			ConfigModel::updateOrCreate(
+				['key' => 'CLOUDFLARE_DEVELOPMENT_MODE_EXPIRES_IN'],
+				['value' => $expiresIn]);
+
+			ConfigModel::updateOrCreate(
+				['key' => 'CLOUDFLARE_DEVELOPMENT_MODE_UPDATED_AT'],
+				['value' => $updatedAtFormatted]);
+		}
+	}
+
+}

app/model/ConfigModel.php

@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Model;
+
+use App\Traits\Log;
+
+class ConfigModel extends Model {
+
+	use Log;
+
+	protected $table = 'config';
+	protected $sort = 'key';
+
+	public $title = "Config";
+
+	// Attribute rules
+	// Name | Type | Required | Filtered
+	public $rules = [
+		["key",              "text",      1, 0],
+		["value",            "text",      0, 0],
+		["log_id",           "text",      1, 1],
+	];
+}

app/views/admin/cache.php

@@ -0,0 +1,82 @@
+<?php
+
+use \App\Classes\Config;
+?>
+<div class="content shadow p-4 mb-4">
+	<h3 class="mb-4">Cache</h3>
+
+	<?php if (Config::c('CLOUDFLARE_ENABLED') != '1') { ?>
+		To enable the Cloudflare cache options,
+		make sure to set the following option in the <p>config.php</p> file:
+		<pre class="line-numbers mb-4 language-php"><p class="language-php"><span class="token single-quoted-string string">'CLOUDFLARE_ENABLED'</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token single-quoted-string string">'1'</span><span class="token punctuation">,</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></p></pre>
+		</p><?php } else { ?>
+		<div>
+			<p>
+				Cloudflare cache options:
+			</p>
+		</div>
+		<hr>
+		<div class="row align-items-center">
+			<div class="col-9 col-md-10 col-lg-11">
+				<h5>Purge CSS/JavaScript</h5>
+				<p class="mb-0">Granuarly remove .css and .js files from Cloudflare&apos;s cache.</p>
+			</div>
+			<div class="col-3 col-md-2 col-lg-1">
+				<div class="d-flex justify-content-end">
+					<button id="" class="btn btn-dark">Purge</button>
+				</div>
+			</div>
+		</div>
+		<hr>
+		<div class="row align-items-center">
+			<div class="col-9 col-md-10 col-lg-11">
+				<h5>Purge Fonts/Images</h5>
+				<p class="mb-0">Granuarly remove font and images files from Cloudflare&apos;s cache.</p>
+			</div>
+			<div class="col-3 col-md-2 col-lg-1">
+				<div class="d-flex justify-content-end">
+					<button id="" class="btn btn-danger">Purge</button>
+				</div>
+			</div>
+		</div>
+		<hr>
+		<div class="row align-items-center">
+			<div class="col-9 col-md-10 col-lg-11">
+				<h5>Purge All Files</h5>
+				<p class="mb-0">Remove ALL files from Cloudflare&apos;s cache.</p>
+			</div>
+			<div class="col-3 col-md-2 col-lg-1">
+				<div class="d-flex justify-content-end">
+					<button id="" class="btn btn-danger">Purge</button>
+				</div>
+			</div>
+		</div>
+		<hr>
+		<div class="row align-items-center">
+			<div class="col-9 col-mlg-10 col-xl-11">
+				<h5>Enable Development Mode</h5>
+				<p class="mb-0">
+					This will bypass Cloudflare&apos;s accelerated cache and slow down your site,
+					but is useful if you are making changes to cacheable content
+					(like images, CSS, or JavaScript) and would like to see those changes right away.
+					Once entered, development mode will last for 3 hours and then automatically toggle off.
+		<?php $state = $this->config['CLOUDFLARE_DEVELOPMENT_MODE_ENABLED']; ?>
+					<span id="develop-enabled" style="visibility: <?= $state == '1' ? 'visible' : 'hidden'; ?>;">
+						Enabled for another
+						<code id="develop-remaining">
+							<?= $state == '1' ? $this->config['enabled-remaining'] : ''; ?>
+						</code> hours.
+					</span>
+				</p>
+			</div>
+			<div class="col-3 col-lg-2 col-xl-1">
+				<div class="d-flex justify-content-start">
+					<input type="checkbox" id="development-mode"
+						<?= $this->config['CLOUDFLARE_DEVELOPMENT_MODE_ENABLED'] ? 'checked' : ''; ?>>
+				</div>
+			</div>
+		</div>
+	<?php } ?>
+
+	<div class="pb-5"></div>
+</div>

app/views/partials/admin.php

@@ -23,7 +23,10 @@
 		- <a href="<?= \App\Classes\Config::c('APP_URL'); ?>/admin/syntax-highlighting">Syntax Highlighting</a>
 
 		<hr>
-		<h5>Development mode&nbsp;&nbsp;<button id="development-mode" class="py-0 btn btn-dark">Enable</button></h5>
+		<h5>Config</h5>
+		- <a href="<?= \App\Classes\Config::c('APP_URL'); ?>/admin/cache">Cache</a>
+		<br>
+		- <a href="<?= \App\Classes\Config::c('APP_URL'); ?>/admin/config">Config</a>
 
 		<hr>
 		- <a href="<?= \App\Classes\Config::c('APP_URL'); ?>/logout">Log out</a>

config.php.example

@@ -15,7 +15,7 @@ return [
 	'MAIL_USERNAME' => '',
 	'MAIL_PASSWORD' => '',
 
-	'DEVELOPMENT_MODE' => '',
-	'DEVELOPMENT_MODE_TOKEN' => '',
-	'DEVELOPMENT_MODE_ZONE' => '',
+	'CLOUDFLARE_ENABLED' => '',
+	'CLOUDFLARE_TOKEN' => '',
+	'CLOUDFLARE_ZONE' => '',
 ];

public/js/app.js

@@ -232,15 +232,31 @@ $(document).ready(function() {
 	// Developer mode
 	$('#development-mode').on('click', function(e)
 	{
+		e.preventDefault();
+
+		if (!confirm('Are you sure you want to continue?')) {
+			return;
+		}
+
 		$.get('/admin/toggle-development-mode').done(function(data)
 		{
 			const response = JSON.parse(data);
 			if (response.success == true) {
-				alert("Development mode has been turned: " + response.result.value);
+				if (response.result.value == 'on') {
+					e.target.checked = true;
+					$('#develop-enabled').css('visibility', 'visible');
+					$('#develop-remaining').text('03:00:00');
+				}
+				else {
+					e.target.checked = false;
+					$('#develop-enabled').css('visibility', 'hidden');
+				}
+
+				alert("Development mode has been set to: '" + response.result.value + "'");
 			}
 			else {
-				alert("Development mode could not be enabled!")
 				console.log(data);
+				alert("Development mode could not be enabled!")
 			}
 		});
 	});

route.php

@@ -2,6 +2,7 @@
 
 use \App\Classes\Router;
 
+Router::resource('/admin/config',              'CrudController');
 Router::resource('/admin/section',             'CrudController');
 Router::resource('/admin/page',                'CrudController');
 Router::resource('/admin/content',             'CrudController');
@@ -20,8 +21,9 @@ return [
 	['/reset-password',             'LoginController',    'reset',    ['', 'Reset password', '']],
 	['/logout',                     'LoginController',    'logout',   ''],
 	['/admin',                      'AdminController',    '',         ''],
+	['/admin/cache',                'CacheController',      'cache',        ''],
 	['/admin/toggle',               'AdminController',    'toggle',   ''],
-	['/admin/toggle-development-mode',  'AdminController',  'development',  ''],
+	['/admin/toggle-development-mode',  'CacheController',  'development',  ''],
 	['/admin/syntax-highlighting',  'AdminController',    'syntax',   ''],
 	['/test', 'TestController', '', ''],
 	// ["", "", "", ""],