Admin+Config: Add toggle that disables Cloudflare cache

It's now possible to disable the Cloudflare cache during development,
so the hacky workaround with the random number in the CSS/JS URLs is no
longer needed.

Development mode is automatically disabled by Cloudflare after 4 hours.

app/controllers/AdminController.php

@@ -2,6 +2,7 @@
 
 namespace App\Controllers;
 
+use App\Classes\Config;
 use App\Classes\User;
 
 class AdminController extends PageController {
@@ -12,6 +13,37 @@ 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/views/layouts/default.php

@@ -22,7 +22,7 @@
 		<link href="https://cdn.jsdelivr.net/npm/prismjs@1.22.0/themes/prism-tomorrow.min.css" rel="stylesheet" integrity="sha384-rG0ypOerdVJPawfZS6juq8t8GVE9oCCPJbOXV/bF+e61zYW9Ib6u9WwSbTOK6CKA" crossorigin="anonymous">
 		<link href="https://cdn.jsdelivr.net/npm/prismjs@1.22.0/plugins/line-numbers/prism-line-numbers.min.css" rel="stylesheet" integrity="sha384-n3/UuPVL3caytud/opHXuyFoezGp2oAUB0foYaCAIs2QwGv/nV0kULHS2WAaJuxR" crossorigin="anonymous">
 
-		<link href="<?= Config::c('APP_URL'); ?>/css/style.css?v=<?= rand(); ?>" rel="stylesheet">
+		<link href="<?= Config::c('APP_URL'); ?>/css/style.css" rel="stylesheet">
 
 		<title><?= ($this->escape)($this->pageTitle); ?><?= $this->pageTitle != '' ? ' - ' : '' ?>Rick van Vonderen</title>
 		<link rel="icon" type="image/png" href="<?= Config::c('APP_URL'); ?>/img/favicon.png">

app/views/partials/admin.php

@@ -22,6 +22,9 @@
 		<br>
 		- <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>
+
 		<hr>
 		- <a href="<?= \App\Classes\Config::c('APP_URL'); ?>/logout">Log out</a>
 	</div>

app/views/partials/script.php

@@ -23,6 +23,6 @@
 	<script src="https://cdn.jsdelivr.net/npm/prismjs@1.22.0/plugins/line-numbers/prism-line-numbers.min.js" integrity="sha384-xktrwc/DkME39VrlkNS1tFEeq/S0JFbc8J9Q8Bjx7Xy16Z3NnmUi+94RuffrOQZR" crossorigin="anonymous"></script>
 	<script src="https://cdn.jsdelivr.net/npm/prismjs@1.22.0/plugins/highlight-keywords/prism-highlight-keywords.min.js" integrity="sha384-Rk2xv6YOAfQH8z3ZAK37pgnQihXfgkER8B5EYhoFc+mMNPzf+t7g2J9U74FAvy2T" crossorigin="anonymous"></script>
 
-	<script src="<?= Config::c('APP_URL'); ?>/js/app.js?v=<?= rand(); ?>"></script>
+	<script src="<?= Config::c('APP_URL'); ?>/js/app.js"></script>
 <?php } ?>
-<script src="<?= Config::c('APP_URL'); ?>/js/site.js?v=<?= rand(); ?>"></script>
+<script src="<?= Config::c('APP_URL'); ?>/js/site.js"></script>

config.php.example

@@ -14,4 +14,8 @@ return [
 	'MAIL_NAME' => '',
 	'MAIL_USERNAME' => '',
 	'MAIL_PASSWORD' => '',
+
+	'DEVELOPMENT_MODE' => '',
+	'DEVELOPMENT_MODE_TOKEN' => '',
+	'DEVELOPMENT_MODE_ZONE' => '',
 ];

public/js/app.js

@@ -227,6 +227,24 @@ $(document).ready(function() {
 
 	});
 
+//------------------------------------------
+
+	// Developer mode
+	$('#development-mode').on('click', function(e)
+	{
+		$.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);
+			}
+			else {
+				alert("Development mode could not be enabled!")
+				console.log(data);
+			}
+		});
+	});
+
 });
 
 // @Todo

route.php

@@ -21,6 +21,7 @@ return [
 	['/logout',                     'LoginController',    'logout',   ''],
 	['/admin',                      'AdminController',    '',         ''],
 	['/admin/toggle',               'AdminController',    'toggle',   ''],
+	['/admin/toggle-development-mode',  'AdminController',  'development',  ''],
 	['/admin/syntax-highlighting',  'AdminController',    'syntax',   ''],
 	['/test', 'TestController', '', ''],
 	// ["", "", "", ""],