From 41d3b5fb68829bbc61ef13ed127dcfb86fa124a0 Mon Sep 17 00:00:00 2001
From: Geo Halkiadakis <gchalkiadakis@sklavenitis.co.gr>
Date: Mon, 24 Apr 2023 12:47:53 +0300
Subject: frontend and backend design enhancements

---
 public/app/views/admin/lessons.php           | 129 +++++++++++++++++++++++++++
 public/app/views/components/courses_menu.php |  97 ++++++++++++++++++++
 public/app/views/components/top-bar.php      |  17 ----
 public/app/views/components/top_bar.php      |  17 ++++
 public/app/views/welcome.php                 |  33 +++++--
 5 files changed, 271 insertions(+), 22 deletions(-)
 create mode 100644 public/app/views/admin/lessons.php
 create mode 100644 public/app/views/components/courses_menu.php
 delete mode 100644 public/app/views/components/top-bar.php
 create mode 100644 public/app/views/components/top_bar.php

(limited to 'public/app/views')

diff --git a/public/app/views/admin/lessons.php b/public/app/views/admin/lessons.php
new file mode 100644
index 0000000..6e7afeb
--- /dev/null
+++ b/public/app/views/admin/lessons.php
@@ -0,0 +1,129 @@
+ <!-- title bar -->
+ <div class="title-bar">
+    <div><h5>Διαχείριση Μαθημάτων</h5></div>
+    <div>
+        <!-- Button trigger modal -->
+        <a type="button" class="btn pull-right" href="/admin/edit_lesson">
+            <i class="fas fa-plus"></i> &nbsp; Νέο Μάθημα
+        </a>
+        <button type="button" class="btn"
+        data-bs-toggle="modal" data-bs-target="#manageLessons" data-action="preview">
+        test</button>
+    </div>
+</div>
+
+<div class="manage">
+    <div class="row">
+        <div class="col-md-12">
+
+            <div id="lessons">
+
+                <table id="dt-lessons" class="table table-responsive dt-table" style="width:100%">
+                    <thead>
+                        <th class="dt-title">Τίτλος</th>
+                        <th class="dt-breadcrumb">Κεφάλαιο</th>
+                        <th class="dt-privileges">Πρόσβαση</th>
+                        <th class="dt-actions"></th>
+                    </thead>
+                </table>
+
+            </div>
+
+
+        </div>
+    </div>
+</div><!-- /manage -->
+
+
+
+<!-- MODAL for new/edit category -->
+<!-- NOTE: tabindex="-1" removed, ref:https://github.com/select2/select2-bootstrap-theme/issues/41 -->
+<div class="modal fade" id="manageLessons" aria-labelledby="myModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-lg" role="document">
+        <div class="modal-content">
+        
+        <form method="post" action="">
+
+            <div class="modal-header">
+                <h4 class="modal-title" id="myModalLabel">Παράμετροι Μαθήματος</h4>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div><!-- /modal-header -->
+
+            <!-- modal-body -->
+            <div class="modal-body">
+
+                <!-- form fields -->
+                    
+                <div class="row form-group">
+                    <label class="control-label col-sm-12" for="label">Τίτλος</label>
+                    <div class="col-sm-12">
+                        <input class="form-control form-control-sm" type="text" name="title" value="" required="">
+                    </div>
+                </div>
+
+                <div class="row form-group">
+                    <label class="control-label col-sm-12" for="parent_id">Γονική Κατηγορία</label>
+                    <div class="col-sm-12">
+                        <select class="form-control form-control-sm form-select form-select-sm" id="parent_id" name="parent_id" required></select>
+                    </div>
+                </div>
+
+                <!-- one line, two fields (privilege, status) -->
+                <div class="row">
+                    <div class="col-md-8">
+
+            <!-- privilege level -->
+            <div class="row form-group">
+                <label class="control-label col-sm-12" for="privilege_id">Επίπεδο Πρόσβασης</label>
+                <div class="col-sm-12">
+                    <select class="form-control form-control-sm form-select form-select-sm" id="privilege_id" name="privilege_id">
+                    </select>
+                </div>
+            </div>
+
+                    </div>
+                    <div class="col-md-4">
+
+            <!-- status: published|unpublished -->
+            <div class="row form-group">
+                <label class="control-label col-sm-12" for="status">Κατάσταση</label>
+                <div class="col-sm-12">
+                    <select class="form-control form-control-sm form-select form-select-sm" name="status" onchange="this.dataset.chosen = this.value;">
+                        <option value="0">Αδημοσίευτο</option>
+                        <option value="one">ΔΗΜΟΣΙΕΥΜΕΝΟ</option>
+                    </select>
+                </div>
+            </div>
+
+
+                    </div>
+                </div>
+
+
+
+
+                <div class="row form-group">
+                    <input type="hidden" name="id" value="0"><!-- lesson-id -->
+                </div>
+                        
+
+            </div><!-- /modal body -->
+
+            <div class="modal-footer">
+                <div class="row" style="width: 50%;">
+                    <div class="form-actions">
+                        <div class="col-4">
+                            <button type="button" class="btn btn-default js-modal-close col-sm-12" data-bs-dismiss="modal">Κλείσιμο</button>
+                        </div>
+                        <div class="col-8">
+                            <button class="btn btn-success col-sm-12" type="submit">Καταχώριση</button>
+                        </div>
+                    </div>
+                </div>
+            </div><!-- /modal-footer -->
+
+        </form><!-- /form -->
+
+        </div>
+    </div>
+</div>
diff --git a/public/app/views/components/courses_menu.php b/public/app/views/components/courses_menu.php
new file mode 100644
index 0000000..6539f8c
--- /dev/null
+++ b/public/app/views/components/courses_menu.php
@@ -0,0 +1,97 @@
+<?php 
+/** Categories Menu
+ * -----------------------------------------------------------------------------
+ * sits in the (left) sidebar
+ * 
+ * imported variables
+ * ---
+ * @param $categories (array) : the categories tree
+ * @param $open_path (array) : 'id's array of selected categories
+ * 
+ * example call:
+ * (draw the categories-menu and set open the categories with ids 1 and 2)
+ * --- 
+ * Render::template("section/categories_menu.php",[
+ *      'categories' => $category_tree,
+ *      'open_path' => [1 ,2]
+ * ]);
+ * 
+ * -----------------------------------------------------------------------------
+ */
+
+/** tree_ul
+ * creates (recursively) a nested ul-li tree of categories
+ * --- -- -- - - -
+ * @param $tree (array) : categories array formated as tree
+ * @param $open_nodes (array) : array of categor ids that shall be marked open/selected
+ * @return $html (string)
+ */
+function tree_li($tree, $open_nodes = [], $l = 0)
+{
+    $html = "";
+
+    foreach($tree as $node) {
+
+        // if has childs ...
+        // write li ; traverse children recursively
+        if ((isset($node['childs'])) && ( $node['childs']!= [])) {
+
+            if (in_array(intval($node['rec']['id']), $open_nodes)) {
+                $inner_class = "inner show";
+                $sign = "–";
+                $a_class = "has-childs selected";
+
+            } else {
+                $inner_class = "inner";
+                $sign = "+";
+                $a_class = "has-childs";
+            }
+
+            $html .= "<li>
+                <a href='/course/{$node['rec']['id']}' class='{$a_class}'>
+                    <span class='label'>{$node['rec']['label']}</span>
+                    <span class='toggler'>{$sign}</span>
+                </a>
+                <ul class='{$inner_class}'>"
+                    . tree_li($node['childs'], $open_nodes, $l+1)
+                ."</ul>
+            </li>";
+
+
+        } else {    // else just write the li
+
+            if (in_array(intval($node['rec']['id']), $open_nodes)) {
+                $u_in = "<u>";
+                $u_out = "</u>";
+                $a_class = "selected";
+
+            } else {
+                $u_in = "";
+                $u_out = "";
+                $a_class = "";
+
+            }
+
+            $html .= "<li>
+                <a href='/course/{$node['rec']['id']}' class='{$a_class}'>
+                    <span class='label'>{$node['rec']['label']}</span>
+                </a>
+            </li>";
+        }
+    }
+
+    return $html;
+
+}
+
+
+// draw the menu (hidden on XS screens)
+// -----------------------------------------------------------------------------
+echo "<h3>Διαθέσιμη ύλη</h3>";
+echo "<ul class='hidden-xs side-bar'>". tree_li($categories, $open_path) ."</ul>";
+
+
+
+// TODO:
+// draw menu for XS screens (for example, just the 1st-level categories)
+// (maybe in an accordion so it won;t take too much area on small screens)
diff --git a/public/app/views/components/top-bar.php b/public/app/views/components/top-bar.php
deleted file mode 100644
index ed96e35..0000000
--- a/public/app/views/components/top-bar.php
+++ /dev/null
@@ -1,17 +0,0 @@
-<div class="top-bar">
-
-    <?php    // breadcrumbs
-        ////////////////////////////////////////////////////////////////////////
-        Render::template("components/breadcrumbs", [
-            'id' => 0,
-            'title' => '',
-            'parents' => []
-        ]);
-    ?>
-
-    <?php   // User management drop-down
-        ////////////////////////////////////////////////////////////////////////
-        Render::view('components/user-management');
-    ?>
-
-</div><!-- /top-bar -->
\ No newline at end of file
diff --git a/public/app/views/components/top_bar.php b/public/app/views/components/top_bar.php
new file mode 100644
index 0000000..ed96e35
--- /dev/null
+++ b/public/app/views/components/top_bar.php
@@ -0,0 +1,17 @@
+<div class="top-bar">
+
+    <?php    // breadcrumbs
+        ////////////////////////////////////////////////////////////////////////
+        Render::template("components/breadcrumbs", [
+            'id' => 0,
+            'title' => '',
+            'parents' => []
+        ]);
+    ?>
+
+    <?php   // User management drop-down
+        ////////////////////////////////////////////////////////////////////////
+        Render::view('components/user-management');
+    ?>
+
+</div><!-- /top-bar -->
\ No newline at end of file
diff --git a/public/app/views/welcome.php b/public/app/views/welcome.php
index ded2294..08be0a2 100644
--- a/public/app/views/welcome.php
+++ b/public/app/views/welcome.php
@@ -12,14 +12,34 @@
 </head>
 <body class='classroom'>
 
-    <?php   // top-bar
+    <?php        // top-bar
         ////////////////////////////////////////////////////////////////////////
-        Render::view('components/top-bar');
+        Render::view('components/top_bar');
     ?>
 
-    <pre>
-        <?php print_r($categories); ?>
-    </pre>
+
+    <div class="main-content container">
+        <div class="row">
+
+            <div class="col col-md-5 col-lg-4 d-sm-none d-md-block side-bar">
+
+
+    <?php    // tree of courses
+        ////////////////////////////////////////////////////////////////////////
+        Render::view('components/courses_menu', [
+            'categories' => $categories,
+            'open_path' => []
+        ]);
+    ?>
+            </div>
+
+            <div class="col col-sm-12 col-md-7 col-lg-8">
+                the content goes here
+            </div>
+
+        </div>
+    </div>
+
 
     <!-- TESTING STRINGS (while developing only) -->
     <?php /* --- print_r($_SESSION); ?>
@@ -32,6 +52,9 @@
         ? var_dump($_SESSION[UserTokenInterface::DEFAULT_PREFIX_KEY])
         : 'none!'
     --- */ ?>
+    
+
+    <script src="/assets/js/classroom.js"></script>
 
 </body>
 </html>
\ No newline at end of file
-- 
cgit v1.2.3