Merge branch 'lars-chat' into 'master'

Lars chat

See merge request !101

website/public/js/admin.js

@@ -28,7 +28,7 @@ function checkCheckAll(allbox) {
 }
 
 function changeFilter() {
-    if (document.getElementById('group').checked) {
+    if ($('#pagetype').find(":selected").val() == "group") {
         document.getElementById('admin-filter').style.display = 'none';
         document.getElementById('admin-groupfilter').style.display = 'inline-block';
 

website/public/js/header.js

@@ -1,26 +1,18 @@
 $(document).ready(function() {
-    // Hide notification center.
-    $("#profile-menu-popup").hide();
-
-    // $("#own-profile-picture").click(function() {
-    //     $("#profile-menu-popup").toggle();
-    //     $("#profile-hello-popup").toggle();
-    // });
-
     $("#own-profile-picture").click(function() {
         if($("#notification-center").css('right') == "-256px") {
             $(".content").animate({
                 marginRight: "256px"
             }, 500);
             $(".chat-right").animate({
-                width: "calc(100% - 512px - 40px)"
+                width: $(".chat-right").width() - 266
             }, 500);
             $("#notification-center").animate({
                 right: "0px"
             }, 500);
         } else {
             $(".chat-right").animate({
-                width: "calc(100% - 256px - 40px)"
+                width: $(".chat-right").width() + 266
             }, 500);
             $(".content").animate({
                 marginRight: "0px"
@@ -30,6 +22,4 @@ $(document).ready(function() {
             }, 500);
         }
     });
-
-    $("#own-profile-picture").click();
 });

website/public/styles/adminpanel.css

@@ -1,71 +1,33 @@
 .admin-panel {
-    margin: auto;
     min-width: 800px;
 }
 
-.admin-title {
-    margin: 10px;
-    padding-bottom: 5px;
-    border-bottom: 4px solid #FBC02D;
-}
-
 .admin-panel input[type="radio"], input[type="checkbox"] {
+    vertical-align: middle;
     height: auto;
-}
+    margin: 2px;
-
-.admin-batchactions, .admin-groupbatchactions {
-    display: inline-block;
-    padding: 8px;
-    vertical-align: top;
-    border-radius: 10px;
-    border: 4px solid #FBC02D;
-    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 }
 
 .admin-searchform {
     display: inline-block;
+    width: 100%;
 }
 
 .admin-searchbar {
-    display: inline-block;
-    margin: 10px;
-    vertical-align: top;
-}
-
-.admin-searchinput {
-    margin-bottom: 10px;
-}
-
-.admin-filter, .admin-filtertype, .admin-groupfilter {
-    display: inline-block;
-    margin: 10px;
-    vertical-align: top;
-    margin-right: 50px;
-    margin-left: 50px;
-}
-
-.admin-filter, .admin-groupfilter {
-    width: 120px;
-}
-
-.admin-users {
-    margin: 10px;
-}
-
-.admin-userheading {
-    width: auto;
-    float: left;
-}
-
-.admin-pageui {
-    text-align: right;
-    float: right;
-    width: auto;
     margin-bottom: 20px;
 }
 
-.usertitle {
+.admin-pageui {
-    width: 150px;
+    display: inline-block;
+    width: 100%;
+}
+
+.admin-pageselector {
+    display: inline-block;
+}
+
+.admin-users {
+    margin-top: 50px;
 }
 
 .usertable {

website/public/styles/chat.css

@@ -3,7 +3,7 @@
     position: fixed;
     top: 80px;
     left: 256px;
-    padding: 15px 0;
+    padding: 20px 0;
     width: calc(100% - 256px);
     height: calc(100% - 120px);
     display: inline-flex;
@@ -25,8 +25,11 @@
 /* Chat history. */
 .chat-history {
     overflow-y: auto;
+    overflow-x: hidden;
     height: 100%;
     padding: 10px;
+
+    word-wrap: break-word;
 }
 
 /* Chat-message takes the whole width of the chat area */
@@ -46,14 +49,15 @@
 .chat-message-self {
     float: right;
     margin-right: 10px;
-    background-color: darkgreen;
+    background-color: #FBC02D;
-    color: white;
+    color: #333;
 }
 
 .chat-message-other {
     float: left;
     margin-left: 10px;
-    background-color: aquamarine;
+    background-color: #4CAF50;
+    color: white;
 }
 
 /* Chat reply field */
@@ -77,7 +81,6 @@
     width: 100%;
     border: none;
     border-radius: 10px 0 0 10px;
-    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 }
 
 .chat-field input[type="submit"] {
@@ -87,10 +90,9 @@
     color: white;
     padding: 5px 10px;
     border-radius: 0 10px 10px 0;
-    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 }
 
 .active-friend-chat {
-    background: aquamarine;
+    background: #4CAF50;
-    color: #333;
+    color: white;
 }

website/public/styles/header.css

@@ -7,7 +7,9 @@ header {
     height: 80px;
     width: 100%;
 
-    color: white;
+    color: #FFF;
+    font-weight: bold;
+    letter-spacing: 1px;
     background-color: #FBC02D;
     box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 }

website/views/adminpanel.php

@@ -1,16 +1,8 @@
-<!DOCTYPE html>
+<script src="js/admin.js" charset="utf-8"></script>
-<html>
-<head>
-    <meta charset="utf-8">
-    <title>Admin Panel</title>
-    <script src="/js/admin.js" charset="utf-8"></script>
 <?php
-        include_once("../queries/user.php");
+require_once ("../queries/user.php");
-        include_once("../queries/group_page.php");
+require_once ("../queries/group_page.php");
 ?>
-</head>
-<body>
-
 <!-- function test_input taken from http://www.w3schools.com/php/php_form_validation.asp -->
 <?php
 $search = "";
@@ -66,48 +58,81 @@ $listm = $currentpage * $perpage;
 
 <div class="content">
     <div class="platform admin-panel">
-        <div class="admin-title">
+        <h5>Zoek naar gebruikers of groepen:</h5>
-            <h1>User Management Panel</h1>
-        </div> <br>
         <div class="admin-options">
             <form class="admin-searchform"
                   action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"
                   method="get">
+
                 <div class="admin-searchbar">
-                    <h2>Search</h2>
+                    Zoek: <input type="text"
-                    <input type="text"
                            name="search"
                            class="admin-searchinput"
-                           value="<?php echo $search;?>"> <br>
+                           placeholder="Naam"
-                    <input type="submit" value="Search">
+                           value="<?php echo $search;?>">
+                        Op: <select name="pagetype" id="pagetype" onchange="changeFilter()">
+                        <option value="user"
+                            <?php if (isset($pagetype) && $pagetype=="user") echo "selected";?>>
+                            Gerbuiker
+                        </option>
+                        <option value="group"
+                            <?php if (isset($pagetype) && $pagetype=="group") echo "selected";?>>
+                            Groep
+                        </option>
+                    </select>
+                    <button type="submit"><i class="fa fa-search"></i></button>
                 </div>
-
+                <div id="admin-filter">
-                <div class="admin-filter" id="admin-filter">
+                    <h5>Type gebruiker:</h5>
-                    <h2>Show:</h2>
+                    <input type="checkbox"
-
+                           name="status[]"
-                    <input type="checkbox" name="status[]" id="normal" value="1"
+                           id="all"
-                           <?php if (in_array("1", $status)) echo "checked";?>>
+                           value="all"
+                        <?php if (in_array("all", $status)) echo "checked";?>>
+                    <label for="normal">Allemaal</label><br>
+                    <input type="checkbox"
+                           name="status[]"
+                           id="normal"
+                           value="user"
+                           <?php if (in_array("user", $status)) echo "checked";?>>
                     <label for="normal">Normal</label><br>
-                    <input type="checkbox" name="status[]" id="frozen" value="2"
+                    <input type="checkbox"
-                           <?php if (in_array("2", $status)) echo "checked";?>>
+                           name="status[]"
+                           id="frozen"
+                           value="frozen"
+                           <?php if (in_array("frozen", $status)) echo "checked";?>>
                     <label for="frozen">Frozen</label><br>
-                    <input type="checkbox" name="status[]" id="banned" value="3"
+                    <input type="checkbox"
-                           <?php if (in_array("3", $status)) echo "checked";?>>
+                           name="status[]"
+                           id="banned"
+                           value="banned"
+                           <?php if (in_array("banned", $status)) echo "checked";?>>
                     <label for="banned">Banned</label><br>
-                    <input type="checkbox" name="status[]" id="admin" value="5"
+                    <input type="checkbox"
-                           <?php if (in_array("5", $status)) echo "checked";?>>
+                           name="status[]"
+                           id="admin"
+                           value="admin"
+                           <?php if (in_array("admin", $status)) echo "checked";?>>
                     <label for="admin">Admin</label><br>
-                    <input type="checkbox" name="status[]" id="unvalidated" value="0"
+                    <input type="checkbox"
-                           <?php if (in_array("0", $status)) echo "checked";?>>
+                           name="status[]"
+                           id="unvalidated"
+                           value="unconfirmed"
+                           <?php if (in_array("unconfirmed", $status)) echo "checked";?>>
                     <label for="unvalidated">Unvalidated</label><br>
-                    <input type="checkbox" name="status[]" id="owner" value="42"
+                    <input type="checkbox"
-                           <?php if (in_array("42", $status)) echo "checked";?>>
+                           name="status[]"
+                           id="owner"
+                           value="owner"
+                           <?php if (in_array("owner", $status)) echo "checked";?>>
                     <label for="owner">Owner</label>
                 </div>
 
-                <div class="admin-groupfilter" id="admin-groupfilter">
+                <div id="admin-groupfilter">
-                    <h2>Show:</h2>
+                    <h5>Type groep:</h5>
-
+                    <input type="checkbox" name="groupstatus[]" id="all" value="all"
+                        <?php if (in_array("all", $groupstatus)) echo "checked";?>>
+                    <label for="hidden">Allemaal</label><br>
                     <input type="checkbox" name="groupstatus[]" id="hidden" value="0"
                            <?php if (in_array("0", $groupstatus)) echo "checked";?>>
                     <label for="hidden">Hidden</label><br>
@@ -118,60 +143,12 @@ $listm = $currentpage * $perpage;
                            <?php if (in_array("2", $groupstatus)) echo "checked";?>>
                     <label for="membersonly">Members-only</label><br>
                 </div>
-
-                <div class="admin-filtertype">
-                    <h2>Page Type:</h2>
-                    <input type="radio" name="pagetype" id="user" value="user"
-                           <?php if (isset($pagetype) && $pagetype=="user") echo "checked";?>
-                           onchange="changeFilter()">
-                    <label for="user">Users</label><br>
-                    <input type="radio" name="pagetype" id="group" value="group"
-                           <?php if (isset($pagetype) && $pagetype=="group") echo "checked";?>
-                           onchange="changeFilter()">
-                    <label for="group">Groups</label>
-                </div>
-            </form>
-
-                <div class="admin-batchactions" id="admin-batchactions">
-                    <h2>Batch Actions: </h2>
-                    <form class="admin-batchform"
-                          id="admin-batchform"
-                          action="<?php htmlspecialchars(basename($_SERVER['REQUEST_URI'])) ?>"
-                          method="post">
-                        <input type="radio" name="batchactions" id="freeze" value="2">
-                        <label for="freeze">Freeze</label><br>
-                        <input type="radio" name="batchactions" id="ban" value="3">
-                        <label for="ban">Ban</label><br>
-                        <input type="radio" name="batchactions" id="restore" value="1">
-                        <label for="restore">Restore</label><br><br>
-                        <input type="submit" value="Confirm">
             </form>
             </div>
-
-                <div class="admin-groupbatchactions" id="admin-groupbatchactions">
-                    <h2>Batch Actions: </h2>
-                    <form class="admin-groupbatchform"
-                          id="admin-groupbatchform"
-                          action="<?php htmlspecialchars(basename($_SERVER['REQUEST_URI'])) ?>"
-                          method="post">
-                        <input type="radio" name="groupbatchactions" id="hide" value="0">
-                        <label for="hide">Hide</label><br>
-                        <input type="radio" name="groupbatchactions" id="public" value="1">
-                        <label for="public">Public</label><br>
-                        <input type="radio" name="groupbatchactions" id="membersonly" value="2">
-                        <label for="membersonly">Member</label><br><br>
-                        <input type="submit" value="Confirm">
-                    </form>
-                </div>
-            </div>
-            <br>
-
             <div class="admin-users">
                 <div class="admin-usertitle">
-                    <div class="admin-userheading">
+                    <h4>Resultaat:</h4>
-                        <h2>Users:</h2>
+                    <span style="float: right">
-                    </div>
-                    <div class="admin-pageui">
                         <?php
                         if ($pagetype == "user") {
                             $pages = countSomeUsersByStatus($search, $status);
@@ -182,8 +159,7 @@ $listm = $currentpage * $perpage;
                         $mincount = min($listm, $countresults);
                         $minlist = min($listn + 1, $countresults);
                         ?>
-                        <p class="pagenumber">Current page:</p>
+                        Pagina: <form class="admin-pageselector"
-                        <form class="admin-pageselector"
                               action="<?php htmlspecialchars(basename($_SERVER['REQUEST_URI'])) ?>"
                               method="post">
                               <select class="admin-pageselect"
@@ -201,22 +177,27 @@ $listm = $currentpage * $perpage;
                                   ?>
                               </select>
                         </form>
-                        <p class="entriesshown">
                         <?php
-                        echo "Showing results $minlist to $mincount out of $countresults";
+                        echo "$minlist tot $mincount ($countresults totaal)";
                         ?>
-                    </div>
+                    </span>
-                </div> <br>
+                <form
+                        id="admin-batchform"
+                        action="<?php htmlspecialchars(basename($_SERVER['REQUEST_URI'])) ?>"
+                        method="post">
 
+                    <button type="submit" name="batchactions" id="freeze" value="frozen">Bevries</button>
+                    <button type="submit" name="batchactions" id="ban" value="banned">Ban</button>
+                    <button type="submit" name="batchactions" id="restore" value="user">Activeer</button>
+                </form>
+                </div>
                 <table class="usertable">
                     <tr>
-                        <th class="table-checkbox">
+                        <th><input type="checkbox" id="checkall" name="checkall" onchange="checkAll(this)"></th>
-                            <input type="checkbox" id="checkall" name="checkall" onchange="checkAll(this)">
+                        <th class="table-username">Gebruikersnaam</th>
-                        </th>
-                        <th class="table-username">User</th>
                         <th class="table-status">Status</th>
-                        <th class="table-comment">Comment</th>
+                        <th class="table-comment">Aantekening</th>
-                        <th class="table-action">Action</th>
+                        <th class="table-action">Actie</th>
                     </tr>
 
                     <!-- Table construction via php PDO. -->
@@ -226,7 +207,6 @@ $listm = $currentpage * $perpage;
 
                     if ($pagetype == 'user') {
                         $q = searchSomeUsersByStatus($listn, $listm, $search, $status);
-
                         while($user = $q->fetch(PDO::FETCH_ASSOC)) {
                             $userID = $user['userID'];
                             $username = $user['username'];
@@ -252,9 +232,9 @@ $listm = $currentpage * $perpage;
                             action='$thispage'
                             method='post'>
                             <select class='action' name='actions'>
-                            <option value='2'>Freeze</option>
+                            <option value='frozen'>Bevries</option>
-                            <option value='3'>Ban</option>
+                            <option value='banned'>Ban</option>
-                            <option value='1'>Restore</option>
+                            <option value='user'>Activeer</option>
                             </select>
                             <input type='hidden' name='userID' value='$userID'>
                             <input type='submit' value='Confirm'>

website/views/header.php

@@ -14,8 +14,9 @@ $userinfo = getHeaderInfo();
                    placeholder="Zoek naar wat je wil"
                    required
             />
-            <input type="submit"
+            <button type="submit">
-                   value="Zoek"/>
+                <i class="fa fa-search"></i>
+            </button>
         </form>
     </div>
     <div class="right profile-menu">