Frontend stuff

2020-04-03 22:10:21 +02:00
parent d9a20ae62e
commit efe3ada470
23 changed files with 515 additions and 650 deletions
--- a/core/Api/User/Fetch.class.php
+++ b/core/Api/User/Fetch.class.php
@@ -9,7 +9,7 @@ class Fetch extends Request {
  public function __construct($user, $externalCall = false) {
    parent::__construct($user, $externalCall, array());
    $this->loginRequired = true;
-    // $this->requiredGroup = USER_GROUP_ADMIN;
+    $this->requiredGroup = USER_GROUP_ADMIN;
  }

  public function execute($values = array()) {
--- a/core/Documents/Admin.class.php
+++ b/core/Documents/Admin.class.php
@@ -2,25 +2,25 @@

 namespace Documents {

-  use Documents\Admin\AdminBody;
  use Documents\Admin\AdminHead;
  use Elements\Document;
+  use Objects\User;
+  use Views\AdminDashboard;
+  use Views\LoginBody;

  class Admin extends Document {
-    public function __construct($user) {
-      parent::__construct($user, AdminHead::class, AdminBody::class);
+    public function __construct(User $user) {
+      $body = $user->isLoggedIn() ? AdminDashboard::class : LoginBody::class;
+      parent::__construct($user, AdminHead::class, $body);
    }
  }
 }

 namespace Documents\Admin {

-  use Elements\Body;
  use Elements\Head;
  use Elements\Link;
  use Elements\Script;
-  use Views\Admin;
-  use Views\Login;

  class AdminHead extends Head {

@@ -30,7 +30,6 @@ namespace Documents\Admin {

    protected function initSources() {
      $this->loadJQuery();
-      $this->loadBootstrap();
      $this->loadFontawesome();
      $this->addJS(Script::CORE);
      $this->addCSS(Link::CORE);
@@ -56,24 +55,4 @@ namespace Documents\Admin {
      return "WebBase - Administration";
    }
  }
-
-  class AdminBody extends Body {
-
-    public function __construct($document) {
-      parent::__construct($document);
-    }
-
-    public function getCode() {
-      $html = parent::getCode();
-
-      $document = $this->getDocument();
-      if(!$document->getUser()->isLoggedIn()) {
-        $html .= new Login($document);
-      } else {
-        $html .= new Admin($document);
-      }
-
-      return $html;
-    }
-  }
 }
--- a/core/Documents/Install.class.php
+++ b/core/Documents/Install.class.php
@@ -794,7 +794,7 @@ namespace Documents\Install {
            </div>
            <div class=\"col-md-8 order-md-1\">
              $progressMainview
-              <div class=\"alert$errorClass margin-top-m\" id=\"status\"$errorStyle>$this->errorString</div>
+              <div class=\"alert$errorClass mt-4\" id=\"status\"$errorStyle>$this->errorString</div>
            </div>
          </div>
        </div>
--- a/core/Driver/SQL/SQL.class.php
+++ b/core/Driver/SQL/SQL.class.php
@@ -161,7 +161,7 @@ abstract class SQL {
    $params = array();

    if (!$tables) {
-      return "SELECT $columns";
+      return $this->execute("SELECT $columns", $params, true);
    }

    $tables = $this->tableName($tables);
--- a/core/Elements/Head.class.php
+++ b/core/Elements/Head.class.php
@@ -69,6 +69,11 @@ abstract class Head extends View {
    $this->addJS(Script::BOOTSTRAP);
  }

+  public function loadAdminlte() {
+    $this->addCSS(Link::ADMINLTE);
+    $this->addJS(Script::ADMINLTE);
+  }
+
  public function getCode() {
    $header = "<head>";

--- a/core/Elements/Link.class.php
+++ b/core/Elements/Link.class.php
@@ -24,6 +24,7 @@ class Link extends View {
  // const REVEALJS                  = "/css/reveal.css";
  // const REVEALJS_THEME_MOON       = "/css/reveal_moon.css";
  // const REVEALJS_THEME_BLACK      = "/css/reveal_black.css";
+  const ADMINLTE = "/css/adminlte.min.css";

  private string $type;
  private string $rel;
--- a/core/Elements/Script.class.php
+++ b/core/Elements/Script.class.php
@@ -20,7 +20,7 @@ class Script extends \View {
  // const SYNTAX_HIGHLIGHTER      = "/js/syntaxhighlighter.js";
  // const HIGHLIGHT               = "/js/highlight.pack.js";
  // const GOOGLE_CHARTS           = "/js/loader.js";
-  const BOOTSTRAP               = "/js/bootstrap.min.js";
+  // const BOOTSTRAP               = "/js/bootstrap.min.js";
  // const BOOTSTRAP_DATEPICKER_JS = "/js/bootstrap-datepicker.min.js";
  // const POPPER                  = "/js/popper.min.js";
  // const JSMPEG                  = "/js/jsmpeg.min.js";
@@ -29,8 +29,10 @@ class Script extends \View {
  // const REVEALJS                = "/js/reveal.js";
  // const REVEALJS_PLUGIN_NOTES   = "/js/reveal_notes.js";
  const INSTALL                 = "/js/install.js";
+  const BOOTSTRAP = "/js/bootstrap.bundle.min.js";

  const HIGHLIGHT_JS_LOADER = "\$(document).ready(function(){\$('code').each(function(i, block) { hljs.highlightBlock(block); }); })";
+  const ADMINLTE = "/js/adminlte.min.js";

  private string $type;
  private string $content;
--- a/core/Elements/Style.class.php
+++ b/core/Elements/Style.class.php
@@ -2,6 +2,8 @@

 namespace Elements;

+use View;
+
 class Style extends View {

  private string $style;
--- a/core/View.class.php
+++ b/core/View.class.php
@@ -50,31 +50,6 @@ abstract class View {
  }

  // UI Functions
-
-  // TODO: do we need this in our general web-base?
-  public function createFileIcon($mimeType) {
-    $mimeType = htmlspecialchars($mimeType);
-    return "<img src=\"/img/icons/admin/getIcon.php?mimeType=$mimeType\" class=\"file-icon\" alt=\"[$mimeType icon]\">";
-  }
-
-  public function createParagraph($title, $id, $content) {
-    $id = replaceCssSelector($id);
-    $iconId = urlencode("$id-icon");
-    return "
-      <div class=\"row\">
-        <div class=\"col-12\">
-          <i class=\"fas fa-link\" style=\"display:none;position:absolute\" id=\"$iconId\"></i>
-          <h2 id=\"$id\" data-target=\"$iconId\" class=\"inlineLink\">$title</h2>
-          <div class=\"margin-bottom-xl\"><hr>$content</div>
-        </div>
-      </div>";
-  }
-
-  public function createSimpleParagraph($content, $class="") {
-    if($class) $class = " class=\"$class\"";
-    return "<p$class>$content</p>";
-  }
-
  private function createList($items, $tag) {
    if(count($items) === 0)
      return "<$tag></$tag>";
@@ -90,19 +65,6 @@ abstract class View {
    return $this->createList($items, "ul");
  }

-  public function createJumbotron($content, $lastModified=false) {
-    $lastModified = ($lastModified ? "<span class=\"float-right text-xxs margin-top-xxxl\">Last modified: $lastModified</span>" : "");
-    return "
-      <div class=\"row\">
-        <div class=\"col-12\">
-          <div class=\"jumbotron\">
-            $content
-            $lastModified
-          </div>
-        </div>
-      </div>";
-  }
-
  protected function createLink($link, $title=null) {
    if(is_null($title)) $title=$link;
    return "<a href=\"$link\">$title</a>";
@@ -113,91 +75,16 @@ abstract class View {
    return "<a href=\"$link\" target=\"_blank\" class=\"external\">$title</a>";
  }

-  protected function createCodeBlock($code, $lang="") {
-    if($lang) $lang = " class=\"$lang\"";
-    $html = "<pre><code$lang>";
-    $html .= intendCode($code);
-    $html .= "</code></pre>";
-    return $html;
-  }
-
-  protected function createIcon($icon, $margin = NULL) {
-    $marginStr = (is_null($margin) ? "" : " margin-$margin");
-    $iconClass = $this->getIconClass($icon);
-    return "<i class=\"$iconClass$marginStr\"></i>";
-  }
-
-  protected function getIconClass($icon) {
-
-    $mappings = array(
-      "sign-out" => "sign-out-alt",
-      "bank" => "university",
-      "line-chart" => "chart-line",
-      "circle-right" => "arrow-alt-circle-right",
-      "refresh" => "sync"
-    );
-
-    if(isset($mappings[$icon]))
-      $icon = $mappings[$icon];
+  protected function createIcon($icon, $type = "fas", $classes = "") {
+    $iconClass = "$type fa-$icon";

    if($icon === "spinner")
-      $icon .= " fa-spin";
+      $iconClass .= " fa-spin";

-    return "fas fa-$icon";
-  }
+    if($classes)
+      $iconClass .= " $classes";

-  protected function createBootstrapTable($data) {
-    $code = "<div class=\"container\">";
-    foreach($data as $row) {
-      $code .= "<div class=\"row margin-top-xs margin-bottom-xs\">";
-      $columnCount = count($row);
-      if($columnCount > 0) {
-        $remainingSize = 12;
-        $columnSize = 12 / $columnCount;
-        foreach($row as $col) {
-          $size = ($columnSize <= $remainingSize ? $columnSize : $remainingSize);
-          $content = $col;
-          $class = "";
-          $code .= "<div";
-
-          if(is_array($col)) {
-            foreach($col as $key => $val) {
-              if(strcmp($key, "content") === 0) {
-                $content = $val;
-              } else if(strcmp($key, "class") === 0) {
-                $class = " " . $col["class"];
-              } else if(strcmp($key, "cols") === 0 && is_numeric($val)) {
-                $size = intval($val);
-              } else {
-                $code .= " $key=\"$val\"";
-              }
-            }
-
-            $content = (isset($col["content"]) ? $col["content"] : "");
-            if(isset($col["class"])) $class = " " . $col["class"];
-          }
-
-          if($size <= 6) $class .= " col-md-" . intval($size * 2);
-          $code .= " class=\"col-lg-$size$class\">$content</div>";
-          $remainingSize -= $size;
-        }
-      }
-      $code .= "</div>";
-    }
-
-    $code .= "</div>";
-    return $code;
-  }
-
-  protected function createBash($command, $output="", $prefix="") {
-    $command = htmlspecialchars($command);
-    $output = htmlspecialchars($output);
-    $output = str_replace("\n", "<br>", $output);
-    return "<div class=\"bash\">
-              <span>$prefix$</span>&nbsp;
-              <span>$command</span><br>
-              <span>$output</span>
-            </div>";
+    return "<i class=\"$iconClass\"></i>";
  }

  protected function createErrorText($text, $id="", $hidden=false) {
--- a/core/Views/Admin.class.php
+++ b/core/Views/Admin.class.php
@@ -1,47 +0,0 @@
-<?php
-
-namespace Views;
-
-// Source: https://adminlte.io/themes/v3/
-
-class Admin extends \View {
-  public function __construct($document) {
-    parent::__construct($document);
-  }
-
-  private function getMainHeader() {
-    $home = L("Home");
-    $search = L("Search");
-
-    $iconMenu = $this->createIcon("bars");
-    $iconSearch = $this->createIcon("search");
-    $iconNotifications = $this->createIcon("bell");
-    $header = "";
-
-    return $header;
-  }
-
-  private function getMainContent() {
-    return "";
-  }
-
-  private function getSideBar() {
-    return "";
-  }
-
-  public function getCode() {
-    $html = parent::getCode();
-
-    $html .= "<div class=\"main-wrapper\">";
-    $html .=    $this->getMainHeader();
-    $html .=    "<div id=\"content\">";
-    $html .=      $this->getSideBar();
-    $html .=      $this->getMainContent();
-    $html .=    "</div>
-             </div>";
-
-    return $html;
-  }
-}
-
-?>
--- a/core/Views/AdminDashboard.class.php
+++ b/core/Views/AdminDashboard.class.php
@@ -0,0 +1,230 @@
+<?php
+
+namespace Views;
+
+// Source: https://adminlte.io/themes/v3/
+
+use Elements\Body;
+use Elements\Script;
+
+class AdminDashboard extends Body {
+
+  private array $errorMessages;
+
+  public function __construct($document) {
+    parent::__construct($document);
+    $this->errorMessages = array();
+  }
+
+  private function getNotifications() : array {
+    $req = new \Api\Notifications\Fetch($this->getDocument()->getUser());
+    if(!$req->execute()) {
+      $this->errorMessages[] = $req->getLastError();
+      return array();
+    } else {
+      return $req->getResult()['notifications'];
+    }
+  }
+
+  private function getUsers() : array {
+    $req = new \Api\User\Fetch($this->getDocument()->getUser());
+    if(!$req->execute()) {
+      $this->errorMessages[] = $req->getLastError();
+      return array();
+    } else {
+      return $req->getResult()['users'];
+    }
+  }
+
+  private function getHeader() {
+
+    // Locale
+    $home = L("Home");
+    $search = L("Search");
+
+    // Icons
+    $iconMenu = $this->createIcon("bars");
+    $iconNotification = $this->createIcon("bell", "far");
+    $iconSearch = $this->createIcon("search");
+    $iconMail = $this->createIcon("envelope", "fas");
+
+    // Notifications
+    $notifications = $this->getNotifications();
+    $numNotifications = count($notifications);
+    if ($numNotifications === 0) {
+      $notificationText = L("No new notifications");
+    } else if($numNotifications === 1) {
+      $notificationText = L("1 new notification");
+    } else {
+      $notificationText = sprintf(L("%d new notification"), $numNotifications);
+    }
+
+    $html =
+      "<nav class=\"main-header navbar navbar-expand navbar-white navbar-light\">
+
+        <!-- Left navbar links -->
+        <ul class=\"navbar-nav\">
+          <li class=\"nav-item\">
+            <a class=\"nav-link\" data-widget=\"pushmenu\" href=\"#\" role=\"button\">$iconMenu</a>
+          </li>
+          <li class=\"nav-item d-none d-sm-inline-block\">
+            <a href=\"/\" class=\"nav-link\">$home</a>
+          </li>
+        </ul>
+    
+        <!-- SEARCH FORM -->
+        <form class=\"form-inline ml-3\">
+          <div class=\"input-group input-group-sm\">
+            <input class=\"form-control form-control-navbar\" type=\"search\" placeholder=\"$search\" aria-label=\"$search\">
+            <div class=\"input-group-append\">
+              <button class=\"btn btn-navbar\" type=\"submit\">
+                $iconSearch
+              </button>
+            </div>
+          </div>
+        </form>
+    
+        <!-- Right navbar links -->
+        <ul class=\"navbar-nav ml-auto\">
+          <!-- Notifications Dropdown Menu -->
+          <li class=\"nav-item dropdown\">
+            <a class=\"nav-link\" data-toggle=\"dropdown\" href=\"#\">
+              $iconNotification
+              <span class=\"badge badge-warning navbar-badge\">$numNotifications</span>
+            </a>
+            <div class=\"dropdown-menu dropdown-menu-lg dropdown-menu-right\">
+              <span class=\"dropdown-item dropdown-header\">$notificationText</span>
+              <div class=\"dropdown-divider\"></div>";
+
+    // Notifications
+    $i = 0;
+    foreach($notifications as $notification) {
+
+      $title = $notification["title"];
+      $notificationId = $notification["uid"];
+      $createdAt = getPeriodString($notification["created_at"]);
+
+      if ($i > 0) {
+        $html .= "<div class=\"dropdown-divider\"></div>";
+      }
+
+      $html .=
+        "<a href=\"#\" class=\"dropdown-item\" data-id=\"$notificationId\">
+            $iconMail<span class=\"ml-2\">$title</span>
+            <span class=\"float-right text-muted text-sm\">$createdAt</span>
+        </a>";
+
+      $i++;
+      if ($i >= 5) {
+        break;
+      }
+    }
+
+    $html .= "<a href=\"#\" class=\"dropdown-item dropdown-footer\">See All Notifications</a>
+            </div>
+          </li>
+        </ul>
+      </nav>";
+
+    return $html;
+  }
+
+  private function getSidebar() {
+
+    $menuEntries = array(
+      "dashboard" => array(
+        "name" => "Dashboard",
+        "icon" => "tachometer-alt"
+      ),
+      "users" => array(
+        "name" => "Users",
+        "icon" => "users"
+      ),
+      "settings" => array(
+        "name" => "Settings",
+        "icon" => "tools"
+      ),
+      "help" => array(
+        "name" => "Help",
+        "icon" => "question-circle"
+      ),
+    );
+
+    $currentView = $_GET["view"] ?? "dashboard";
+
+    $html =
+      "<aside class=\"main-sidebar sidebar-dark-primary elevation-4\">
+        <!-- Brand Logo -->
+        <a href=\"index3.html\" class=\"brand-link\">
+          <img src=\"/img/web_base_logo.png\" alt=\"WebBase Logo\" class=\"brand-image img-circle elevation-3\"
+               style=\"opacity: .8\">
+          <span class=\"brand-text font-weight-light\">WebBase</span>
+        </a>
+    
+        <!-- Sidebar -->
+        <div class=\"sidebar\">
+     
+          <!-- Sidebar Menu -->
+          <nav class=\"mt-2\">
+            <ul class=\"nav nav-pills nav-sidebar flex-column\" data-widget=\"treeview\" role=\"menu\" data-accordion=\"false\">";
+
+    foreach($menuEntries as $view => $menuEntry) {
+      $name = L($menuEntry["name"]);
+      $icon = $this->createIcon($menuEntry["icon"], "fas", "nav-icon");
+      $active = ($currentView === $view) ? " active" : "";
+      $html .=
+              "<li class=\"nav-item\">
+                <a href=\"?view=$view\" class=\"nav-link$active\">
+                  $icon
+                  <p>$name </p>
+                </a>
+              </li>";
+    }
+
+    $html .=
+            "</ul>  
+          </nav>
+        </div>
+      </aside>";
+
+    return $html;
+  }
+
+  private function getContent() {
+
+    $this->getUsers();
+
+    $html = "<div class=\"content-wrapper p-2\">";
+
+    foreach($this->errorMessages as $errorMessage) {
+      $html .= $this->createErrorText($errorMessage);
+    }
+
+    $html .= "</div>";
+
+    return $html;
+  }
+
+  public function getCode() {
+
+    $head = $this->getDocument()->getHead();
+    $head->addJS(Script::BOOTSTRAP);
+    $head->loadAdminlte();
+
+    $header = $this->getHeader();
+    $sidebar = $this->getSidebar();
+    $content = $this->getContent();
+
+    $html =
+      "<!-- LICENSE: /docs/LICENSE_ADMINLTE -->
+      <body class=\"hold-transition sidebar-mini layout-fixed\">
+          <div class=\"wrapper\">
+            $header
+            $sidebar
+            $content
+          </div>
+      </body>";
+
+    return $html;
+  }
+}
--- a/core/Views/LanguageFlags.class.php
+++ b/core/Views/LanguageFlags.class.php
@@ -2,6 +2,8 @@

 namespace Views;

+use Api\GetLanguages;
+
 class LanguageFlags extends \View {

  public function __construct($document) {
@@ -14,7 +16,7 @@ class LanguageFlags extends \View {
    $queryString = $_SERVER['QUERY_STRING'];

    $flags = array();
-    $request = new \Api\GetLanguages($this->getDocument()->getUser());
+    $request = new GetLanguages($this->getDocument()->getUser());
    $params = explode("&", $queryString);
    $query = array();
    foreach($params as $param) {
@@ -40,7 +42,7 @@ class LanguageFlags extends \View {

        $flags[] = $this->createLink(
          "$url$queryString",
-          "<img src=\"/img/icons/lang/$langCode.gif\" alt=\"$langName\" title=\"$langName\">"
+          "<img class=\"p-1\" src=\"/img/icons/lang/$langCode.gif\" alt=\"$langName\" title=\"$langName\">"
        );
      }
    } else {
--- a/core/Views/LoginBody.class.php
+++ b/core/Views/LoginBody.class.php
@@ -2,53 +2,65 @@

 namespace Views;

-use View;
+use Elements\Body;
+
+class LoginBody extends Body {

-class Login extends View {
  public function __construct($document) {
    parent::__construct($document);
  }

  public function getCode() {
-    $html = parent::getCode();
+
+    $this->getDocument()->getHead()->loadBootstrap();

    $username = L("Username");
    $password = L("Password");
-    $rememberMe = L("Remember me");
    $login = L("Login");
    $backToStartPage = L("Back to Start Page");
+    $stayLoggedIn = L("Stay logged in");
+
    $flags = new LanguageFlags($this->getDocument());
-    $iconBack = $this->createIcon("arrow-circle-left", "right");
+    $iconBack = $this->createIcon("arrow-circle-left");
    $domain = $_SERVER['HTTP_HOST'];
    $protocol = getProtocol();

+    $html = "<body>";
+
    $accountCreated = "";
    if(isset($_GET["accountCreated"])) {
-      $accountCreated .= '
-        <div class="alert alert-success margin-top-xs" id="accountCreated">
+      $accountCreated =
+        '<div class="alert alert-success mt-3" id="accountCreated">
          Your account was successfully created, you may now login with your credentials
        </div>';
    }

    $html .= "
-      <div class=\"container margin-top-xxl\">
+      <div class=\"container mt-4\">
        <div class=\"title text-center\">
          <h2>Admin Control Panel</h2>
        </div>
-        <div class=\"loginContainer margin-center\">
+        <div class=\"loginContainer m-auto\">
          <form class=\"loginForm\">
            <label for=\"username\">$username</label>
            <input type=\"text\" class=\"form-control\" name=\"username\" id=\"username\" placeholder=\"$username\" required autofocus />
            <label for=\"password\">$password</label>
            <input type=\"password\" class=\"form-control\" name=\"password\" id=\"password\" placeholder=\"$password\" required />
+            <div class=\"form-check\">
+              <input type=\"checkbox\" class=\"form-check-input\" id=\"stayLoggedIn\" name=\"stayLoggedIn\">
+              <label class=\"form-check-label\" for=\"stayLoggedIn\">$stayLoggedIn</label>
+            </div>
            <button class=\"btn btn-lg btn-primary btn-block\" id=\"btnLogin\" type=\"button\">$login</button>
            <div class=\"alert alert-danger hidden\" role=\"alert\" id=\"loginError\"></div>
+            <span class=\"flags position-absolute\">$flags</span>
          </form>
-          <span class=\"subtitle flags-container\"><span class=\"flags\">$flags</span></span>
-          <span class=\"subtitle\"><a class=\"link\" href=\"$protocol://$domain\">$iconBack&nbsp;$backToStartPage</a></span>
+          <div class=\"p-1\">
+            <a href=\"$protocol://$domain\">$iconBack&nbsp;$backToStartPage</a>
+          </div>
          $accountCreated
        </div>
-      </div>";
+      </div>
+     </body>";

    return $html;
  }