Merge pull request #131 from thnilsen/dev

Initial code for front-end categorization status view

classes/constellation.php

@@ -72,7 +72,8 @@ class Constellation
   public function render_status($admin = false, $heading = true){
     global $mysqli;
 
-    $query = $mysqli->query("SELECT id, name  FROM services");
+    //$query = $mysqli->query("SELECT id, name, description FROM services");
+    $query = $mysqli->query("SELECT services.id, services.name, services.description, services_groups.name as group_name FROM services LEFT JOIN services_groups ON services.group_id=services_groups.id ORDER BY services_groups.name ");
     $array = array();
     if ($query->num_rows){
       $timestamp = time();
@@ -87,10 +88,10 @@ class Constellation
         $tmp = $sql->get_result();
         if ($tmp->num_rows)
         {
-          $array[] = new Service($result['id'], $result['name'], $tmp->fetch_assoc()['type']);
+          $array[] = new Service($result['id'], $result['name'], $result['description'], $result['group_name'], $tmp->fetch_assoc()['type']);
         }
         else{
-          $array[] = new Service($result['id'], $result['name']);
+          $array[] = new Service($result['id'], $result['name'], $result['description'], $result['group_name']);
         }
       }
       if ($heading)
@@ -103,11 +104,27 @@ class Constellation
     }
     if (!$admin)
     {
-      echo '<div id="status-container" class="clearfix">';
+      ?>
+      <script>
+      $(document).ready(function(){
+        $('[data-toggle="tooltip"]').tooltip();
+      });
+      </script>
+      <?php
+      //echo '<div id="status-container" class="clearfix">';
+      //$arrCompletedGroups = array();
       foreach($array as $service){
+        //print_r($service);
+        //if ( !empty($service->group_name) && !in_array($service->group_name, $arrCompletedGroups)) {
+//print $service->name;
+        //  $arrCompletedGroups[] = $service['group_name'];
+        //  $service->render(true);
+        //} else {
         $service->render();
+        //}
       }
-      echo '</div>';
+      echo '</ul>';
+      //echo '</div>';
     }
     else{
       return $array;

classes/service.php

@@ -6,19 +6,24 @@ class Service implements JsonSerializable
 {
   private $id;
   private $name;
+  private $description;
+  private $group_name;
   private $status;
 
   /**
    * Constructs service from its data.
    * @param int $id service ID
    * @param String $name service name
+   * @param String $descriotion service description for tooltip
    * @param int $status current service status
    */
-  function __construct($id, $name, $status=3)
+  function __construct($id, $name, $description=null, $group_name='', $status=3)
   {
     //TODO: Maybe get data from ID?
     $this->id = $id;
     $this->name = $name;
+    $this->description = $description;
+    $this->group_name = $group_name;
     $this->status = $status;
   }
 
@@ -49,6 +54,15 @@ class Service implements JsonSerializable
     return $this->name;
   }
 
+  /**
+   * Returns description of this service
+   * @return String description
+   */
+  public function get_description()
+  {
+    return $this->description;
+  }
+
   /**
    * Processes submitted form and adds service unless problem is encountered,
    * calling this is possible only for admin or higher rank. Also checks requirements
@@ -192,17 +206,56 @@ class Service implements JsonSerializable
 
   /**
    * Renders this service.
+   * @param $boolGroup set to true if the groups name is to be rendered
    * @return void
    */
   public function render(){
     global $statuses;
     global $classes;
-    ?>
+    static $arrCompletedGroups = array();
-      <div class="item clearfix">
+    //static $boolClosed;
-        <div class="service"><?php echo $this->name; ?></div>
+    static $boolOpened;
-        <?php if ($this->status!=-1){?><div class="status <?php echo $classes[$this->status];?>"><?php echo _($statuses[$this->status]);?></div><?php }?>
+
-      </div>
+    // Check if previous ul has been opened, and if a empty/new group is being
-  <?php
+    // render_header, close the UL first.
+    if ( $boolOpened ) {
+      if ( empty($this->group_name) || !in_array($this->group_name, $arrCompletedGroups) ) {
+        echo '</ul>';
+        $boolOpened = false;
+      }
+    }
+
+    // If no group exist or group is new, start a new UL
+    if ( !empty($this->group_name) && !in_array($this->group_name, $arrCompletedGroups)) {
+      echo '<ul class="list-group components">';
+      //echo '<ul class="platforms list-group mb-2">';
+      // Render the group status if it exists
+      echo '<li class="list-group-item list-group-item-success group-name"><span><i class="glyphicon glyphicon-plus"></i></span>&nbsp;' . $this->group_name .'<div class="status '. $classes[$this->status] .'">'. _($statuses[$this->status]).'</div></li>';
+      //echo '<li class="cist-group-item d-flex flex-row justify-content-between platform list-group-item-action py-0 expanded" role="button">' . $this->group_name .'<div class="status '. $classes[$this->status] .'"'. _($statuses[$this->status]).'</div></li>';
+      $arrCompletedGroups[] = $this->group_name;
+      $boolOpened = true;
+    }
+
+    if ( empty($this->group_name)) {
+      echo '<ul class="list-group components">';
+
+//      echo '<ul class="platforms list-group mb-2">';
+      $boolFinish = true;
+    }
+
+    // Render the service status
+    echo '<li class="list-group-item sub-component"><strong>' . $this->name .'</strong>';
+    //echo '<li class="list-group-item d-flex flex-columns justify-content-between><span>+</span><h3 class="py-2 my-0 flex-fill expanded">' . $this->name . '</h3>';
+    if(!empty($this->description)) {
+      echo '<a class="desc-tool-tip" data-toggle="tooltip" data-placement="top" title="'.$this->description.'"> <span><i class="glyphicon glyphicon-question-sign"></i></span></a>';
+    }
+    if ($this->status!=-1){?><div class="status pull-right <?php echo $classes[$this->status];?>"><?php echo _($statuses[$this->status]);?></div>
+    <?php
+    }
+    echo '</li>';
+    if ( isset($boolFinish) && $boolFinish) {
+      echo '</ul>';
+    }
   }
 
   public function jsonSerialize() {
@@ -210,6 +263,7 @@ class Service implements JsonSerializable
     return [
       "id" => $this->id,
       "name" => $this->name,
+      "description" => $this->description,
       "status" => $this->status,
       "status_string" => $statuses[$this->status]
     ];

css/main.css

@@ -27,6 +27,10 @@ a:focus {
   color:#f5f4f4;
 }
 
+a.desc-tool-tip, a.desc-tool-tip:hover, a.desc-tool-tip:visited {
+    color: grey;
+}
+
 .centered {
     text-align: center
 }
@@ -136,7 +140,6 @@ body a h1{
 .status{
 	float: right;
 	box-sizing: border-box;
-	padding: 15px 35px;
 	text-align: right;
 	font-size: 1.05em;
 	font-family: 'Fira Sans', sans-serif;
@@ -686,4 +689,3 @@ input:checked + .slider:before {
 .slider.round:before {
   border-radius: 50%;
 }
-