Preview Functionality

app/Http/Controllers/NowController.php

@@ -20,6 +20,10 @@ class NowController extends Controller
 
     public function save(Request $request)
     {
+        if($request->action === "preview") {
+           return $this->preview($request);
+        }
+
         $now = new Now();
         $now->md = $request->md;
         $now->save();
@@ -34,6 +38,10 @@ class NowController extends Controller
 
     public function update(Request $request, $id)
     {
+        if($request->action === "preview") {
+            return $this->preview($request);
+        }
+
         $now = Now::find($id);
 
         $now->md = $request->md;
@@ -42,6 +50,14 @@ class NowController extends Controller
         return redirect()->route('admin.now.index');
     }
 
+    public function preview(Request $request)
+    {
+        return view('admin.preview', [
+            'md' => $request->md, 
+            'title' => "Now"
+        ]);
+    }
+
     public function delete($id)
     {
         $now= Now::find($id);

app/Http/Controllers/PostController.php

@@ -14,6 +14,10 @@ class PostController extends Controller
 
     public function save(Request $request)
     {
+        if($request->action === "preview") {
+           return $this->preview($request);
+        }
+
         $post = new Post();
         $post->title = $request->title;
         $post->md = $request->md;
@@ -29,6 +33,10 @@ class PostController extends Controller
 
     public function update(Request $request, $id)
     {
+        if($request->action === "preview") {
+            return $this->preview($request);
+        }
+
         $post = Post::find($id);
 
         $post->title = $request->title;
@@ -38,6 +46,14 @@ class PostController extends Controller
         return redirect()->route('admin.post.index');
     }
 
+    public function preview(Request $request)
+    {
+        return view('admin.preview', [
+            'md' => $request->md, 
+            'title' => $request->title
+        ]);
+    }
+
     public function delete($id)
     {
         $post = Post::find($id);

app/Http/Controllers/ProjectController.php

@@ -22,6 +22,10 @@ class ProjectController extends Controller
 
     public function save(Request $request)
     {
+        if($request->action === "preview") {
+           return $this->preview($request);
+        }
+
         $project = new Project();
         $project->title = $request->title;
         $project->md = $request->md;
@@ -37,6 +41,10 @@ class ProjectController extends Controller
 
     public function update(Request $request, $id)
     {
+        if($request->action === "preview") {
+            return $this->preview($request);
+        }
+
         $project = Project::find($id);
         $project->title = $request->title;
         $project->md = $request->md;
@@ -45,6 +53,14 @@ class ProjectController extends Controller
         return redirect()->route('admin.project.index');
     }
 
+    public function preview(Request $request)
+    {
+        return view('admin.preview', [
+            'md' => $request->md, 
+            'title' => $request->title
+        ]);
+    }
+
     public function delete($id)
     {
         Project::find($id)->delete();

app/Http/Controllers/SetupController.php

@@ -20,6 +20,10 @@ class SetupController extends Controller
 
     public function save(Request $request)
     {
+        if($request->action === "preview") {
+           return $this->preview($request);
+        }
+
         $setup = new Setup();
         $setup->title = $request->title;
         $setup->md = $request->md;
@@ -35,6 +39,10 @@ class SetupController extends Controller
 
     public function update(Request $request, $id)
     {
+        if($request->action === "preview") {
+            return $this->preview($request);
+        }
+
         $setup = Setup::find($id);
         $setup->title = $request->title;
         $setup->md = $request->md;
@@ -43,6 +51,14 @@ class SetupController extends Controller
         return redirect()->route('admin.setup.index');
     }
 
+    public function preview(Request $request)
+    {
+        return view('admin.preview', [
+            'md' => $request->md, 
+            'title' => $request->title
+        ]);
+    }
+
     public function delete($id)
     {
         Setup::find($id)->delete();

public/js/admin.js

@@ -93,21 +93,68 @@
 /*! no static exports found */
 /***/ (function(module, exports) {
 
-posts_edit_regexp = new RegExp("/admin/posts/\\d+/edit");
+function is_admin_post_route() {
-now_edit_regexp = new RegExp("/admin/now/\\d+/edit");
+  var posts_edit_regexp = new RegExp("/admin/posts/\\d+/edit");
-projects_edit_regexp = new RegExp("/admin/projects/\\d+/edit");
+  return window.location.pathname === "/admin/posts" || window.location.pathname === "/admin/posts/create" || window.location.pathname.match(posts_edit_regexp);
-setups_edit_regexp = new RegExp("/admin/setups/\\d+/edit");
-
-if (window.location.pathname === "/admin/posts" || window.location.pathname === "/admin/posts/create" || window.location.pathname.match(posts_edit_regexp)) {
-  document.getElementById("posts-link").classList.add("menu-highlight");
-} else if (window.location.pathname === "/admin/now" || window.location.pathname === "/admin/now/create" || window.location.pathname.match(now_edit_regexp)) {
-  document.getElementById("now-link").classList.add("menu-highlight");
-} else if (window.location.pathname === "/admin/projects" || window.location.pathname === "/admin/projects/create" || window.location.pathname.match(projects_edit_regexp)) {
-  document.getElementById("projects-link").classList.add("menu-highlight");
-} else if (window.location.pathname === "/admin/setups" || window.location.pathname === "/admin/setups/create" || window.location.pathname.match(setups_edit_regexp)) {
-  document.getElementById("setup-link").classList.add("menu-highlight");
 }
 
+function is_admin_now_route() {
+  var now_edit_regexp = new RegExp("/admin/now/\\d+/edit");
+  return window.location.pathname === "/admin/now" || window.location.pathname === "/admin/now/create" || window.location.pathname.match(now_edit_regexp);
+}
+
+function is_admin_projects_route() {
+  var projects_edit_regexp = new RegExp("/admin/projects/\\d+/edit");
+  return window.location.pathname === "/admin/projects" || window.location.pathname === "/admin/projects/create" || window.location.pathname.match(projects_edit_regexp);
+}
+
+function is_admin_setups_route() {
+  var setups_edit_regexp = new RegExp("/admin/setups/\\d+/edit");
+  return window.location.pathname === "/admin/setups" || window.location.pathname === "/admin/setups/create" || window.location.pathname.match(setups_edit_regexp);
+}
+
+function admin_highlight() {
+  if (is_admin_post_route()) {
+    document.getElementById("posts-link").classList.add("menu-highlight");
+  }
+
+  if (is_admin_now_route()) {
+    document.getElementById("now-link").classList.add("menu-highlight");
+  }
+
+  if (is_admin_projects_route()) {
+    document.getElementById("projects-link").classList.add("menu-highlight");
+  }
+
+  if (is_admin_setups_route()) {
+    document.getElementById("setup-link").classList.add("menu-highlight");
+  }
+}
+
+function preview() {
+  var previewButton = document.getElementById("preview");
+  var mainButton = document.getElementById("main");
+
+  if (previewButton == null) {
+    return;
+  }
+
+  var form = document.getElementsByTagName("form")[0];
+  previewButton.addEventListener("click", function (e) {
+    form.setAttribute("target", "_blank");
+  });
+  mainButton.addEventListener("click", function (e) {
+    form.removeAttribute("target");
+  });
+}
+
+function main() {
+  admin_highlight();
+  preview();
+}
+
+window.onload = main;
+
 /***/ }),
 
 /***/ 1:

resources/js/admin.js

@@ -1,30 +1,76 @@
-posts_edit_regexp = new RegExp("/admin/posts/\\d+/edit");
+function is_admin_post_route() {
-now_edit_regexp = new RegExp("/admin/now/\\d+/edit");
+    const posts_edit_regexp = new RegExp("/admin/posts/\\d+/edit");
-projects_edit_regexp = new RegExp("/admin/projects/\\d+/edit");
+    return (
-setups_edit_regexp = new RegExp("/admin/setups/\\d+/edit");
-
-if(
         window.location.pathname === "/admin/posts" || 
         window.location.pathname === "/admin/posts/create" ||
         window.location.pathname.match(posts_edit_regexp)
-){
+    );
-    document.getElementById("posts-link").classList.add("menu-highlight");
+}
-} else if(
+
+function is_admin_now_route() {
+    const now_edit_regexp = new RegExp("/admin/now/\\d+/edit");
+    return (
         window.location.pathname === "/admin/now" ||
         window.location.pathname === "/admin/now/create" ||
         window.location.pathname.match(now_edit_regexp)
-){
+    );
-    document.getElementById("now-link").classList.add("menu-highlight");
+}
-} else if(
+
+function is_admin_projects_route() {
+    const projects_edit_regexp = new RegExp("/admin/projects/\\d+/edit");
+    return (
         window.location.pathname === "/admin/projects" ||
         window.location.pathname === "/admin/projects/create" ||
         window.location.pathname.match(projects_edit_regexp)
-){
+    );
-    document.getElementById("projects-link").classList.add("menu-highlight");
+}
-} else if(
+
+function is_admin_setups_route() {
+    const setups_edit_regexp = new RegExp("/admin/setups/\\d+/edit");
+    return (
         window.location.pathname === "/admin/setups" ||
         window.location.pathname === "/admin/setups/create" ||
         window.location.pathname.match(setups_edit_regexp)
-){
+    );
-    document.getElementById("setup-link").classList.add("menu-highlight");
 }
+
+function admin_highlight() {
+    if(is_admin_post_route()){
+        document.getElementById("posts-link").classList.add("menu-highlight");
+    }
+    if(is_admin_now_route()){
+        document.getElementById("now-link").classList.add("menu-highlight");
+    }
+    if(is_admin_projects_route()){
+        document.getElementById("projects-link").classList.add("menu-highlight");
+    } 
+    if(is_admin_setups_route()){
+        document.getElementById("setup-link").classList.add("menu-highlight");
+    }
+}
+
+function preview() {
+    const previewButton = document.getElementById("preview");
+    const mainButton = document.getElementById("main");
+
+    if(previewButton == null){
+        return;
+    }
+
+    const form = document.getElementsByTagName("form")[0];
+
+    previewButton.addEventListener("click", (e) => {
+        form.setAttribute("target", "_blank");
+    });
+
+    mainButton.addEventListener("click", (e) => {
+        form.removeAttribute("target");
+    });
+}
+
+function main() {
+    admin_highlight();
+    preview();
+}
+
+window.onload = main;

resources/views/admin/now/create.blade.php

@@ -15,7 +15,8 @@
             <textarea id="md" name="md"></textarea>
 
             <div class="control">
-                <button type="submit" class="pure-button button-black-white">Create</button>
+                <button class="pure-button button-black-white" name="action" id="preview" type="submit" value="preview">Preview</button>
+                <button class="pure-button button-black-white" name="action" id="main" type="submit" value="create">Create</button>
             </div>
         </fieldset>
     </form>

resources/views/admin/now/edit.blade.php

@@ -15,7 +15,8 @@
             <textarea id="md" name="md">{{ old('md', $now->md) }}</textarea>
 
             <div class="control">
-                <button type="submit" class="pure-button button-black-white">Update</button>
+                <button class="pure-button button-black-white" name="action" id="preview" type="submit" value="preview">Preview</button>
+                <button class="pure-button button-black-white" name="action" id="main" type="submit" value="update">Update</button>
             </div>
         </fieldset>
     </form>

resources/views/admin/posts/create.blade.php

@@ -19,7 +19,8 @@
                 <textarea id="md" name="md"></textarea>
 
                 <div class="control">
-                    <button class="pure-button button-black-white" type="submit">Create</button>
+                    <button class="pure-button button-black-white" name="action" id="preview" type="submit" value="preview">Preview</button>
+                    <button class="pure-button button-black-white" name="action" id="main" type="submit" value="create">Create</button>
                 </div>
             </fieldset>
         </form>

resources/views/admin/posts/edit.blade.php

@@ -19,7 +19,8 @@
                 <textarea id="md" name="md">{{ old('md', $post->md) }}</textarea>
 
                 <div class="control">
-                    <button type="submit" class="pure-button button-black-white">Update</button>
+                    <button class="pure-button button-black-white" name="action" id="preview" type="submit" value="preview">Preview</button>
+                    <button class="pure-button button-black-white" name="action" id="main" type="submit" value="update">Update</button>
                 </div>
             </fieldset>
         </form>

resources/views/admin/preview.blade.php

@@ -0,0 +1,14 @@
+@extends('base')
+
+@php
+    $parse = new Parsedown();
+@endphp
+
+@section('content')
+        <article>
+            <header>
+                <h1 class="post-title">{{$title}}</h1>
+            </header>
+            {!! $parse->text($md) !!}
+        </article>
+@endsection

resources/views/admin/projects/create.blade.php

@@ -18,7 +18,8 @@
             <textarea id="md" name="md"></textarea>
 
             <div class="control">
-                <button class="pure-button button-black-white" type="submit">Create</button>
+                <button class="pure-button button-black-white" name="action" id="preview" type="submit" value="preview">Preview</button>
+                <button class="pure-button button-black-white" name="action" id="main" type="submit" value="create">Create</button>
             </div>
         </fieldset>
     </form>

resources/views/admin/projects/edit.blade.php

@@ -18,7 +18,8 @@
             <textarea class="form-input" id="md" name="md">{{ old('md', $project->md) }}</textarea>
 
             <div class="control">
-                <button type="submit" class="pure-button button-black-white">Back</button>
+                <button class="pure-button button-black-white" name="action" id="preview" type="submit" value="preview">Preview</button>
+                <button class="pure-button button-black-white" name="action" id="main" type="submit" value="update">Update</button>
             </div>
         </fieldset>
     </form>

resources/views/admin/setups/create.blade.php

@@ -18,7 +18,8 @@
             <textarea id="md" name="md"></textarea>
 
             <div class="control">
-                <button class="pure-button button-black-white" type="submit">Create</button>
+                <button class="pure-button button-black-white" name="action" id="preview" type="submit" value="preview">Preview</button>
+                <button class="pure-button button-black-white" name="action" id="main" type="submit" value="create">Create</button>
             </div>
         </fieldset>
     </form>

resources/views/admin/setups/edit.blade.php

@@ -18,7 +18,8 @@
             <textarea id="md" name="md">{{ old('md', $setup->md) }}</textarea>
 
             <div class="control">
-                <button type="submit" class="pure-button button-black-white">Update</button>
+                <button class="pure-button button-black-white" name="action" id="preview" type="submit" value="preview">Preview</button>
+                <button class="pure-button button-black-white" name="action" id="main" type="submit" value="update">Update</button>
             </div>
         </fieldset>
     </form>

routes/web.php

@@ -62,9 +62,3 @@ Route::middleware('auth')->group(function() {
 Route::get('/', function () {
     return view('index');
 })->name('index');
-
-
-Route::get('/setup', function () {
-    return view('setup');
-})->name('setup');
-