website/public/bits/friend-item.php

@@ -21,7 +21,7 @@ $friends = json_decode($_POST["friends"]);
 foreach($friends as $i => $friend) {
     $friendshipStatus = getFriendshipStatus($friend->userID);
     ?>
-    <li class='friend-item <?= $extra ?>'>
+    <li class='friend-item'>
         <form action='<?= $action ?>' method='<?= $actionType ?>'>
             <button type='submit'
                     name='username'

website/public/js/admin.js

@@ -60,7 +60,6 @@ function adminSearch() {
         "API/adminSearchUsers.php",
         $("#admin-searchform").serialize()
     ).done(function (data) {
-        console.log(data);
         $("#usertable").html(data);
     })
 }

website/public/js/chat.js

@@ -54,16 +54,25 @@ function addMessages(messages) {
             type = "chat-message-other";
         }
         if (i == 0) {
+            if (thisDate > previousDate) {
+                previousDate = thisDate;
+                messagesText += '\
+                    <div class="day-message"> \
+                        <div class="day-message-content">\
+                        ' + days[thisDate.getDay()] + " " + thisDate.getDate() + " " + months[thisDate.getMonth()] + " " + thisDate.getFullYear() + '\
+                        </div> \
+                    </div>';
+            }
             messagesText += '<div class="chat-message"><div class="' + type + '">';
         } else if (type != previousType || thisTime != previousTime || thisDate > previousDate) {
             messagesText += '<div class="chat-time">\
                     ' + thisTime + '\
                     </div></div></div>';
 
-            previousDate = thisDate;
             previousTime = thisTime;
             previousType = type;
             if (thisDate > previousDate) {
+                previousDate = thisDate;
                 messagesText += '\
                     <div class="day-message"> \
                         <div class="day-message-content">\

website/public/js/friendButtons.js

@@ -48,9 +48,6 @@ function placeFriendButtons() {
                         text2 = "Weiger";
                         icon2 = "fa-times";
                         break;
-                    default:
-                        console.log(friendshipStatus);
-                        break;
                 }
 
                 $buttonContainer.append(

website/public/js/header.js

@@ -1,24 +1,36 @@
 $(document).ready(function() {
     // Toggle menu
     $("#own-profile-picture, #open-notifications").click(function() {
-        if ($("#notification-center").css('right') == "-256px") {
+            if ($("#notification-center").css('display') == "none") {
                 // Make the menu visible and move the content to the left.
-            $("#chat-history").width("calc(100% - 587px)");
                 $(".modal").width("calc(100% - 512px)");
                 $(".content").css("margin-right", "256px");
                 $("#notification-center").css("right", "0px");
+                $("#notification-center").css("display", "block");
+                $("#contact-menu").css("display", "block");
 
                 // Add cookie so the menu stays open on other pages
+                if (window.innerWidth > 1080) {
+                    $("#chat-history").width("calc(100% - 587px)");
                     document.cookie = "menu=open; path=/";
                 } else {
-            // Make the menu invisible and move the content to the right.
+                    document.cookie = "menu=closed; path=/";
-            $("#chat-history").width("calc(100% - 331px)");
+                }
+            } else {
                 $(".modal").width("calc(100% - 256px)");
                 $(".content").css("margin-right", "0px");
-            $("#notification-center").css("right", "-256px");
+                $("#notification-center").css("display", "none");
+
+                if (window.innerWidth > 1080) {
+                    $("#chat-history").width("calc(100% - 331px)");
+                } else {
+                    // Make the menu invisible and move the content to the right.
+                    $("#contact-menu").css("display", "none");
+                }
 
                 // Change menu cookie to close
                 document.cookie = "menu=closed; path=/";
+
             }
     });
 

website/public/register(stash).php

@@ -10,6 +10,7 @@
 <body>
 <?php
     session_start();
+
     if(isset($_SESSION["userID"])){
         header("location: login.php");
     }

website/public/styles/chat.css

@@ -145,3 +145,21 @@ body {
 .chat-message-other .chat-time {
     text-align: right;
 }
+
+@media only screen and (max-width: 1080px) {
+    .chat-message-self, .chat-message-other {
+        max-width: 75%;
+    }
+    .chat {
+        left: 0;
+        width: 100%;
+    }
+    #chat-recent-panel {
+        left: 0;
+        width: 320px;
+    }
+    #chat-history {
+        left: 50%;
+        width: calc(100% - 390px);
+    }
+}

website/public/styles/header.css

@@ -26,7 +26,8 @@ header {
 }
 
 #header-search {
-    padding-left: 42px;
+    margin: 24px 0 24px 32px;
+    vertical-align: middle;
 }
 
 
@@ -50,3 +51,9 @@ header div {
 #open-notifications {
     padding: 5px 20px 5px 0px;
 }
+
+@media only screen and (max-width: 1080px) {
+    #header-logo {
+        display: none;
+    }
+}

website/public/styles/main.css

@@ -294,3 +294,13 @@ div[data-title]:hover:after {
     border-radius: 20px;
     background: #4CAF50;
 }
+
+@media only screen and (max-width: 1080px) {
+    body {
+        font-size: 28px!important;
+    }
+    button {
+        font-size: 28px;
+    }
+
+}

website/public/styles/menu.css

@@ -5,7 +5,7 @@
 
     left: 0;
     top: 80px;
-    height: calc(100% - 80px);
+    height: calc(100% - 120px);
     width: 236px;
 
     padding: 20px 10px;
@@ -87,3 +87,17 @@
     padding: 0;
     text-align: left;
 }
+
+@media only screen and (max-width: 1080px) {
+    #contact-menu, #notification-center {
+        display: none;
+        background: rgba(0, 0, 0, 0.4);
+        width: calc(50% - 20px);
+    }
+    .content {
+        margin-left: 0;
+    }
+    #quick-links i {
+        font-size: 48px!important;
+    }
+}

website/public/styles/mobilefriendly.css

@@ -0,0 +1,47 @@
+/* MAIN */
+body {
+    font-size: 28px!important;
+}
+button {
+    font-size: 28px;
+}
+
+/* HEADER */
+#header-logo {
+    display: none;
+}
+
+/* PROFILE */
+.post-box {
+    width: calc(100% - 65px);
+}
+
+/* MENU */
+#contact-menu, #notification-center {
+    display: none;
+    background: rgba(0, 0, 0, 0.4);
+    width: calc(50% - 20px);
+}
+.content {
+    margin-left: 0;
+}
+#quick-links i {
+    font-size: 48px!important;
+}
+
+/* CHAT */
+.chat-message-self, .chat-message-other {
+    max-width: 75%;
+}
+.chat {
+    left: 0;
+    width: 100%;
+}
+#chat-recent-panel {
+    left: 0;
+    width: 320px;
+}
+#chat-history {
+    left: 50%;
+    width: calc(100% - 390px);
+}

website/public/styles/profile.css

@@ -116,7 +116,7 @@ div.posts .post form textarea.newpost {
 }
 
 /* mobile */
-@media only screen and (max-width: 1000px) {
+@media only screen and (max-width: 1080px) {
     .post-box {
         width: calc(100% - 65px);
     }

website/queries/calcAge.php

@@ -0,0 +1,12 @@
+<?php
+/**
+ * calculates the age of a user
+ * @param string $bdayAsString
+ * @return int age
+ */
+function getAge(string $bdayAsString) : int {
+    $bday = new DateTime($bdayAsString);
+    $today = new DateTime("now");
+    $interval = $bday->diff($today);
+    return $interval->y;
+}

website/queries/friendship.php

@@ -16,7 +16,6 @@ function selectLimitedFriends($userID, $limit) {
                 `profilepicture`,
                 '../img/avatar-standard.png'
             ) AS profilepicture,
-            `onlinestatus`,
             `role`
         FROM
             `user`
@@ -56,7 +55,10 @@ function selectAllFriends($userID) {
                 `profilepicture`,
                 '../img/avatar-standard.png'
             ) AS profilepicture,
-            `onlinestatus`,
+            CASE `lastactivity` >= DATE_SUB(NOW(),INTERVAL 15 MINUTE)
+              WHEN TRUE THEN 'online'
+              WHEN FALSE THEN 'offline'
+            END AS `onlinestatus`,
             `role`
         FROM
             `user`
@@ -88,7 +90,10 @@ function selectAllFriendRequests() {
                 `profilepicture`,
                 '../img/avatar-standard.png'
             ) AS profilepicture,
-            `onlinestatus`,
+            CASE `lastactivity` >= DATE_SUB(NOW(),INTERVAL 15 MINUTE)
+              WHEN TRUE THEN 'online'
+              WHEN FALSE THEN 'offline'
+            END AS `onlinestatus`,
             `role`
         FROM
             `user`
@@ -235,7 +240,10 @@ function searchSomeFriends($n, $m, $search) {
                 `profilepicture`,
                 '../img/avatar-standard.png'
             ) AS profilepicture,
-            `onlinestatus`,
+            CASE `lastactivity` >= DATE_SUB(NOW(),INTERVAL 15 MINUTE)
+              WHEN TRUE THEN 'online'
+              WHEN FALSE THEN 'offline'
+            END AS `onlinestatus`,
             `role`
         FROM
             `user`

website/queries/settings.php

@@ -110,20 +110,31 @@ function updateSettings() {
     WHERE
       `userID` = :userID
     ");
+    $bday = new DateTime();
+    $bday->setDate(test_input($_POST["year"]), test_input($_POST["month"]), test_input($_POST["day"]));
+    checkBday($bday);
 
     $stmt->bindValue(":fname", test_input($_POST["fname"]));
     $stmt->bindValue(":lname", test_input($_POST["lname"]));
     $stmt->bindValue(":location", test_input($_POST["location"]));
-    $stmt->bindValue(":bday", test_input($_POST["bday"]));
+    $stmt->bindValue(":bday", $bday->format("Ymd"));
     $stmt->bindValue(":bio", test_input($_POST["bio"]));
-    $stmt->bindValue(":showEmail", test_input($_POST["showEmail"]));
+    $stmt->bindValue(":showEmail", (array_key_exists("showEmail", $_POST) ? "1" : "0"));
-    $stmt->bindValue(":showBday", test_input($_POST["showBday"]));
+    $stmt->bindValue(":showBday", (array_key_exists("showBday", $_POST) ? "1" : "0"));
 
     $stmt->bindValue(":userID", $_SESSION["userID"]);
     $stmt->execute();
     throw new HappyAlert("Instellingen zijn opgeslagen.");
 }
 
+function checkBday(DateTime $bday) {
+    $today = new DateTime();
+    if ($bday >= $today) {
+        throw new AngryAlert("Jij bent vast niet in de toekomst geboren toch? ;)");
+    }
+}
+
+
 /**
  * Change
  * @throws AngryAlert

website/queries/user.php

@@ -45,7 +45,10 @@ function selectUser($me, $other) {
             ) AS profilepicture,
           `bio`,
           `user`.`creationdate`,
-          `onlinestatus`,
+          CASE `lastactivity` >= DATE_SUB(NOW(),INTERVAL 15 MINUTE)
+            WHEN TRUE THEN 'online'
+            WHEN FALSE THEN 'offline'
+          END AS `onlinestatus`,
           `role`,
           `fname`,
           `lname`,

website/views/head.php

@@ -12,6 +12,8 @@
     @import url("styles/header.css");
     @import url("styles/menu.css");
     @import url("styles/footer.css");
+
+    @import url("styles/mobilefriendly.css") screen and (orientation: portrait);
 </style>
 <?php
 

website/views/menu.php

@@ -1,4 +1,4 @@
-<nav class="menu">
+<nav class="menu" id="contact-menu">
     <section id="friends-menu-section">
         <h4>
             Recente vrienden

website/views/profile.php

@@ -3,7 +3,9 @@
         <img class="profile-picture main-picture" src="<?= $user["profilepicture"] ?>"><br />
         <div class="platform">
             <div class="status-buttons-container">
-                <button disabled class="gray"><?= $user["onlinestatus"] ?></button>
+                <button disabled class="gray">
+                    <?= $user["onlinestatus"]  ?>
+                </button>
                 <button disabled class="gray"><?= $user["role"] ?></button>
             </div>
             <div class="friend-button-container">

website/views/settings-view.php

@@ -4,13 +4,11 @@ $settings = getSettings();
 
 <div class="content">
     <div class="settings">
-        <?php
+        <?php if ($_SERVER["REQUEST_METHOD"] == "POST"): ?>
-        if ($_SERVER["REQUEST_METHOD"] == "POST") {
+        <div class='platform settings-message <?=$alertClass?>'>
-            echo "<div class='platform settings-message $alertClass '>
+            <?=$alertMessage?>
-            $alertMessage
+        </div>
-        </div>";
+        <?php endif; ?>
-        }
-        ?>
         <form class="settings-profile platform" method="post">
             <h5>Profiel Instellingen</h5>
             <ul>
@@ -21,7 +19,7 @@ $settings = getSettings();
                            id="fname"
                            placeholder="Voornaam"
                            title="Voornaam"
-                           value="<?= $settings["fname"]?>"
+                           value="<?=$settings["fname"]?>"
                     >
                 </li>
                 <li>
@@ -30,7 +28,7 @@ $settings = getSettings();
                            name="lname"
                            id="lname"
                            placeholder="Achternaam"
-                           value="<?= $settings["lname"]?>"
+                           value="<?=$settings["lname"]?>"
                     >
                 </li>
                 <li>
@@ -39,43 +37,61 @@ $settings = getSettings();
                            name="location"
                            id="location"
                            placeholder="Locatie"
-                           value="<?= $settings["location"]?>"
+                           value="<?=$settings["location"]?>"
                     >
                 </li>
                 <li>
+                    <?php $currentbday = new DateTime($settings["birthdate"]); ?>
                     <label for="bday">Geboortedatum</label>
-                    <input type="date"
+                    <select name='day' id="bday">
-                           name="bday"
+                        <?php for ($day = 1; $day <= 31; $day++): ?>
-                           id="bday"
+                        <option value='<?=$day?>'
-                           placeholder="yyyy-mm-dd"
+                                <?=($day == $currentbday->format("d")) ? "selected" : ""?>
-                           value="<?= $settings["birthdate"]?>"
                         >
+                            <?=$day?>
+                        </option>
+                        <?php endfor; ?>
+                    </select>
+                    <select name='month' id="bday">
+                        <?php
+                        $months = array ("januari", "februari", "maart", "april", "mei", "juni", "juli", "augustus",
+                            "september", "oktober", "november", "december");
+                        for ($month = 1; $month <= 12; $month++):
+                        ?>
+                            <option value='<?=$month?>'
+                                    <?=($month == $currentbday->format("m")) ? "selected" : ""?>
+                            >
+                                <?=$months[$month - 1]?>
+                            </option>
+                        <?php endfor; ?>
+                    </select>
+                    <select name='year' id="bday">
+                        <?php
+                        $now = (new DateTime)->format("Y");
+                        for ($year = $now; $year >= 1900; $year--): ?>
+                        <option value='<?=$year?>'
+                                <?=($year == $currentbday->format("Y")) ? "selected" : ""?>
+                        >
+                            <?=$year?>
+                        </option>
+                        <?php endfor; ?>
+                    </select>
                 </li>
                 <li>
                     <label for="showBday">Toon leeftijd</label>
-                    <input type="radio"
+                    <input type="checkbox"
                            name="showBday"
-                           value="1"
+                           id="showBday"
-                           <?php echo ($settings["showBday"] ? "checked" : "")?>
+                           <?=($settings["showBday"] ? "checked" : "")?>
-                    > Ja
+                    >
-                    <input type="radio"
-                           name="showBday"
-                           value="0"
-                           <?php echo ($settings["showBday"] ? "" : "checked")?>
-                           > Nee
                 </li>
                 <li>
                     <label for="showEmail">Toon Email</label>
-                    <input type="radio"
+                    <input type="checkbox"
                            name="showEmail"
-                           value="1"
+                           id="showEmail"
-                           <?php echo ($settings["showEmail"] ? "checked" : "")?>
+                           <?=($settings["showEmail"] ? "checked" : "")?>
-                    > Ja
+                    >
-                    <input type="radio"
-                           name="showEmail"
-                           value="0"
-                        <?php echo ($settings["showEmail"] ? "" : "checked")?>
-                    > Nee
                 </li>
                 <li>
                     <label for="bio">Bio</label>
@@ -83,7 +99,7 @@ $settings = getSettings();
                               rows="5"
                               title="bio"
                               id="bio"
-                    ><?= $settings["bio"]?></textarea>
+                    ><?=$settings["bio"]?></textarea>
                 </li>
                 <li>
                     <label></label>
@@ -99,7 +115,7 @@ $settings = getSettings();
             <ul>
                 <li>
                     <label>Huidige profielfoto</label>
-                    <img src="<?= $settings["profilepicture"] ?>"
+                    <img src="<?=$settings["profilepicture"]?>"
                          class="profile-picture"
                     >
                 </li>
@@ -124,24 +140,30 @@ $settings = getSettings();
             <h5>Verander Wachtwoord</h5>
             <ul>
                 <li>
-                    <label>Oud wachtwoord</label>
+                    <label for="password-old">Oud wachtwoord</label>
                     <input type="password"
                            name="password-old"
+                           id="password-old"
                            placeholder="Oud wachtwoord"
+                           autocomplete="current-password"
                     >
                 </li>
                 <li>
-                    <label>Nieuw wachtwoord</label>
+                    <label for="password-new">Nieuw wachtwoord</label>
                     <input type="password"
                            name="password-new"
+                           id="password-new"
                            placeholder="Nieuw wachtwoord"
+                           autocomplete="new-password"
                     >
                 </li>
                 <li>
-                    <label>Bevestig wachtwoord</label>
+                    <label for="password-confirm">Bevestig wachtwoord</label>
                     <input type="password"
                            name="password-confirm"
+                           id="password-confirm"
                            placeholder="Bevestig wachtwoord"
+                           autocomplete="new-password"
                     >
                 </li>
                 <li>
@@ -160,7 +182,7 @@ $settings = getSettings();
                     <label for="email-old">Huidig Email </label>
                     <input type="email"
                            id="email-old"
-                           value="<?= $settings["email"]?>"
+                           value="<?=$settings["email"]?>"
                            disabled
                     >
                 </li>