Initial code for New Page templating system

cms/controller/index.php

@@ -11,4 +11,33 @@ switch ($_REQUEST["action"]) {
             die('Unable to save page');
         }
         break;
+
+    /**
+     * getTemplates AJAX call to get list of files
+     */
+    case "getTemplates":
+        header('Content-type: application/json');
+        $files=array_diff(scandir("../templates/"),array('..', '.'));
+        $returnArray = array();
+        foreach($files as $file) {
+            $returnArray[]=array("id" => $file, "name" => str_replace(array(".htm",".html"), "", $file));
+        }
+        return json_encode($returnArray);
+        break;
+
+    /**
+     * newPage AJAX call to take a template file and create a new page
+     */
+    case "newPage":
+        $filename = str_replace("..","",$_POST['filename']);
+        $template = str_replace("..","",$_POST['template']);
+
+        if(!str_ends_with($filename, ".htm") && !str_ends_with($filename, ".html")) {
+            $filename .= ".html";
+        }
+
+        if(!file_exists("../templates/".$template)) return json_encode(array("error" => "Template not found"));
+        if(!copy("../templates/".$template,"../../".$filename)) return json_encode(array("error" => "Template copy failed"));
+        return json_encode(array("ok" => "DONE_THE_NEEDFUL","url"=>$filename));
+        break;
 }

cms/index.php

@@ -3,7 +3,7 @@ require_once "neoCMSCore.php";
 require_once "init.php";
 ?>
 <!DOCTYPE html>
-<html>
+<html lang="en-gb">
 <head>
     <title>NeoCMS</title>
     <!-- Include jQuery -->
@@ -58,6 +58,21 @@ require_once "init.php";
     </div>
 </div>
 
+<!--New Page modal -->
+<div id="newPage" title="Create a New Page">
+    <div class="modal-content">
+        <form id="newPageForm">
+            <div id="radioList">
+                <!-- Radio buttons will be populated here -->
+            </div>
+            <label for="filename">New Filename:</label>
+            <input type="text" id="filename" name="filename" placeholder="Enter new filename" required>
+
+            <button type="submit">Submit</button>
+        </form>
+    </div>
+</div>
+
 <script src="/cms/js/cms.js"></script>
 
 </body>

cms/js/cms.js

@@ -51,6 +51,7 @@ $(document).ready(function () {
         });
     });
 
+    // Save changes made to a div, but not save to the file on the server
     $('#saveBtn').click(function () {
         // Get the data from TinyMCE
         var data = tinymce.get('editor').getContent();
@@ -69,13 +70,76 @@ $(document).ready(function () {
         }
     });
 
+    // Handle Saving changes to the page
     $('#savePage').click(() => {
         $.post("./controller/", {
             action: "save",
             uri: $('#frameContainer').contents().get(0).location.pathname,
             content: new XMLSerializer().serializeToString($('#frameContainer').contents().get(0))
         }, function (data) {
-            alert(data)
+            // alert(data)
         });
     });
+
+    // Show dialog for page templates
+    $("#newPage").click(function() {
+        loadItems(); // Call the function to load items when the modal is opened
+        $("#newPageDialog").dialog({
+            modal: true,
+            width: 500,
+            buttons: {
+                Close: function() {
+                    $(this).dialog("close");
+                }
+            }
+        });
+    });
+
+    // Handle form submission
+    $("#newPageForm").submit(function(event) {
+        event.preventDefault(); // Prevent the default form submission
+
+        let selectedItemId = $('input[name="item"]:checked').val();
+        let filename = $("#filename").val();
+
+        $.ajax({
+            url: "/controller/?action=newPage",
+            method: "POST",
+            data: {
+                template: selectedItemId,
+                filename: filename
+            },
+            success: function(response) {
+                alert('Page created successfully, I think. TODO: Check JSON response');
+                $("#newPageForm").dialog("close"); // Close the modal on success
+            },
+            error: function() {
+                alert('Failed to create the new page.');
+            }
+        });
+    });
+
+    // Function to load the items via an AJAX GET request and populate the radio buttons for page templates
+    function loadItems() {
+        $.ajax({
+            url: "/controller/?action=getTemplates",
+            method: "GET",
+            success: function(data) {
+                let radioList = $('#radioList');
+                radioList.empty(); // Clear previous content
+                data.forEach(function(item, index) {
+                    radioList.append(`
+            <label>
+              <input type="radio" name="item" value="${item.id}" ${index === 0 ? 'checked' : ''}>
+              ${item.name}
+            </label>
+          `);
+                });
+            },
+            error: function() {
+                alert('Failed to load templates.');
+            }
+        });
+    }
+
 });