MyHyvesBookPlus/WebDB
1
0
Fork 0
Code Issues 2 Pull Requests Projects Releases Wiki Activity

GROUP BUTTONS AND GROUP STYLE #171

Merged
11319801 merged 33 commits from kevin-prototype into master 2017-02-01 12:29:09 +01:00
Conversation 4 Commits 33 Files Changed 41 +291 -116
19 changed files with 291 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 582d347bcb - Show all commits

2
website/public/bits/friend-item.php
View File

@@ -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'

11
website/public/js/chat.js
View File

@@ -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">\

3
website/public/js/friendButtons.js
View File

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

46
website/public/js/header.js
View File

@@ -1,25 +1,37 @@
$(document).ready(function() {
// Toggle menu
$("#own-profile-picture, #open-notifications").click(function() {
if ($("#notification-center").css('right') == "-256px") {
// 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");
if ($("#notification-center").css('display') == "none") {
// Make the menu visible and move the content to the left.
$(".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
document.cookie = "menu=open; path=/";
} else {
// Make the menu invisible and move the content to the right.
$("#chat-history").width("calc(100% - 331px)");
$(".modal").width("calc(100% - 256px)");
$(".content").css("margin-right", "0px");
$("#notification-center").css("right", "-256px");
// 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 {
document.cookie = "menu=closed; path=/";
}
} else {
$(".modal").width("calc(100% - 256px)");
$(".content").css("margin-right", "0px");
$("#notification-center").css("display", "none");
// Change menu cookie to close
document.cookie = "menu=closed; path=/";
}
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=/";
}
});
if (getCookie("menu") == "open") {

1
website/public/register(stash).php
View File

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

18
website/public/styles/chat.css
View File

@@ -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);
}
}

9
website/public/styles/header.css
View File

@@ -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;
}
}

10
website/public/styles/main.css
View File

@@ -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;
}
}

16
website/public/styles/menu.css
View File

@@ -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;
}
}

47
website/public/styles/mobilefriendly.css Normal file
View File

@@ -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);
}

2
website/public/styles/profile.css
View File

@@ -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);
}

12
website/queries/calcAge.php Normal file
View File

@@ -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;
}

16
website/queries/friendship.php
View File

@@ -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`

17
website/queries/settings.php
View File

@@ -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(":showBday", test_input($_POST["showBday"]));
$stmt->bindValue(":showEmail", (array_key_exists("showEmail", $_POST) ? "1" : "0"));
$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

87
website/queries/user.php
View File

@@ -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`,
@@ -104,47 +107,47 @@ function selectAllUserGroups($userID) {
return $stmt;
}
//function selectAllUserPosts($userID) {
// $stmt = prepareQuery("
// SELECT
// `post`.`postID`,
// `post`.`author`,
// `title`,
// CASE LENGTH(`post`.`content`) >= 150 AND `post`.`content` NOT LIKE '<img%'
// WHEN TRUE THEN
// CONCAT(LEFT(`post`.`content`, 150), '...')
// WHEN FALSE THEN
// `post`.`content`
// END
// AS `content`,
// `post`.`creationdate`,
// COUNT(`commentID`) AS `comments`,
// COUNT(`niet_slecht`.`postID`) AS `niet_slechts`
// FROM
// `post`
// LEFT JOIN
// `niet_slecht`
// ON
// `post`.`postID` = `niet_slecht`.`postID`
// LEFT JOIN
// `comment`
// ON
// `post`.`postID` = `comment`.`postID`
// WHERE
// `post`.`author` = :userID AND
// `groupID` IS NULL
// GROUP BY
// `post`.`postID`
// ORDER BY
// `post`.`creationdate` DESC
// ");
//
// $stmt->bindParam(':userID', $userID, PDO::PARAM_INT);
// if(!$stmt->execute()) {
// return False;
// }
// return $stmt;
//}
function selectAllUserPosts($userID) {
$stmt = prepareQuery("
SELECT
`post`.`postID`,
`post`.`author`,
`title`,
CASE LENGTH(`post`.`content`) >= 150 AND `post`.`content` NOT LIKE '<img%'
WHEN TRUE THEN
CONCAT(LEFT(`post`.`content`, 150), '...')
WHEN FALSE THEN
`post`.`content`
END
AS `content`,
`post`.`creationdate`,
COUNT(`commentID`) AS `comments`,
COUNT(`niet_slecht`.`postID`) AS `niet_slechts`
FROM
`post`
LEFT JOIN
`niet_slecht`
ON
`post`.`postID` = `niet_slecht`.`postID`
LEFT JOIN
`comment`
ON
`post`.`postID` = `comment`.`postID`
WHERE
`post`.`author` = :userID AND
`groupID` IS NULL
GROUP BY
`post`.`postID`
ORDER BY
`post`.`creationdate` DESC
");
$stmt->bindParam(':userID', $userID, PDO::PARAM_INT);
if(!$stmt->execute()) {
return False;
}
return $stmt;
}
function select20UsersFromN($n) {
$q = prepareQuery("

2
website/views/head.php
View File

@@ -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

2
website/views/menu.php
View File

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

4
website/views/profile.php
View File

@@ -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">

102
website/views/settings-view.php
View File

@@ -4,13 +4,11 @@ $settings = getSettings();
<div class="content">
<div class="settings">
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
echo "<div class='platform settings-message $alertClass '>
$alertMessage
</div>";
}
?>
<?php if ($_SERVER["REQUEST_METHOD"] == "POST"): ?>
<div class='platform settings-message <?=$alertClass?>'>
<?=$alertMessage?>
</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"
name="bday"
id="bday"
placeholder="yyyy-mm-dd"
value="<?= $settings["birthdate"]?>"
>
<select name='day' id="bday">
<?php for ($day = 1; $day <= 31; $day++): ?>
<option value='<?=$day?>'
<?=($day == $currentbday->format("d")) ? "selected" : ""?>
>
<?=$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"
<?php echo ($settings["showBday"] ? "checked" : "")?>
> Ja
<input type="radio"
name="showBday"
value="0"
<?php echo ($settings["showBday"] ? "" : "checked")?>
> Nee
id="showBday"
<?=($settings["showBday"] ? "checked" : "")?>
>
</li>
<li>
<label for="showEmail">Toon Email</label>
<input type="radio"
<input type="checkbox"
name="showEmail"
value="1"
<?php echo ($settings["showEmail"] ? "checked" : "")?>
> Ja
<input type="radio"
name="showEmail"
value="0"
<?php echo ($settings["showEmail"] ? "" : "checked")?>
> Nee
id="showEmail"
<?=($settings["showEmail"] ? "checked" : "")?>
>
</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>