From cc361c5dd29f360e0ec55f49a323230838b70956 Mon Sep 17 00:00:00 2001
From: Marvin Borner
Date: Tue, 12 Jun 2018 19:05:00 +0200
Subject: Began user page integration

---
 .../admin/src/Controller/PostController.php        |   2 +
 .../sprinkles/core/assets/SiteAssets/css/main.css  | 116 +++++++--------------
 .../sprinkles/core/assets/SiteAssets/js/chat.js    |   4 +-
 .../sprinkles/core/assets/SiteAssets/js/main.js    |  48 ++++++---
 .../sprinkles/core/templates/pages/index.html.twig |  28 ++++-
 5 files changed, 105 insertions(+), 93 deletions(-)

(limited to 'main/app/sprinkles')

diff --git a/main/app/sprinkles/admin/src/Controller/PostController.php b/main/app/sprinkles/admin/src/Controller/PostController.php
index cab87cd..f4a1905 100644
--- a/main/app/sprinkles/admin/src/Controller/PostController.php
+++ b/main/app/sprinkles/admin/src/Controller/PostController.php
@@ -67,9 +67,11 @@ class PostController extends SimpleController
             foreach ($ImagesFromFriends as $ImageFromFriend) {
                 $ImageFromFriend->image_url = $config["site.uri.public"] . "/image/" . $ImageFromFriend->image_id;
                 if ($ImageFromFriend->user_id == $user->id) { // UPLOADED FROM HIMSELF
+                    $ImageFromFriend->username = $user->user_name;
                     $ImageFromFriend->full_name = $user->full_name; // ADD USERNAME TO IMAGE ID
                     $ImageFromFriend->avatar =  $user->avatar;
                 } else { // UPLOADED FROM ANOTHER USER
+                    $ImageFromFriend->username = $UsersFriendInformation[0]->user_name;
                     $ImageFromFriend->full_name = $UsersFriendInformation[0]->full_name; // ADD USERNAME TO IMAGE ID
                     $ImageFromFriend->avatar =  $UsersFriendInformation[0]->avatar;
                 }
diff --git a/main/app/sprinkles/core/assets/SiteAssets/css/main.css b/main/app/sprinkles/core/assets/SiteAssets/css/main.css
index ca85727..47076cd 100644
--- a/main/app/sprinkles/core/assets/SiteAssets/css/main.css
+++ b/main/app/sprinkles/core/assets/SiteAssets/css/main.css
@@ -64,6 +64,35 @@ img {
     height: 100%;
 }
 
+/**************
+USER SELECT ROW
+**************/
+.UserSelector {
+    display: grid;
+    grid-template-columns: 10% 20% auto 10%;
+    overflow-y: auto;
+    max-height: 45%;
+    width: 100%;
+    z-index: 9999;
+}
+
+.UserSelector .Avatar {
+    grid-column-start: 2;
+    justify-self: center;
+    align-self: center;
+    height: 50px;
+    width: 50px;
+    -webkit-border-radius: 100%;
+    -moz-border-radius: 100%;
+    border-radius: 100%;
+}
+
+.UserSelector .UsersFullName {
+    grid-column-start: 3;
+    justify-self: center; /* OR start */
+    align-self: center;
+}
+
 /*******
 SWIPEABLE
 *******/
@@ -175,31 +204,6 @@ EXPLORE WINDOW
     border-radius: 25px;
 }
 
-.SearchResults {
-    display: grid;
-    grid-template-columns: 10% 20% auto 10%;
-    overflow-y: auto;
-    max-height: 45%;
-    width: 100%;
-}
-
-.SearchResults .Avatar {
-    grid-column-start: 2;
-    justify-self: center;
-    align-self: center;
-    height: 50px;
-    width: 50px;
-    -webkit-border-radius: 100%;
-    -moz-border-radius: 100%;
-    border-radius: 100%;
-}
-
-.SearchResults .UsersFullName {
-    grid-column-start: 3;
-    justify-self: center; /* OR start */
-    align-self: center;
-}
-
 /**********
 CHAT WINDOW
 **********/
@@ -213,33 +217,6 @@ hr.ChatHeaderDivider {
     margin-bottom: 0.6em; /* cause of symmetry things */
 }
 
-/* receiver select window */
-.SelectReceiver .ReceiverSelector {
-    display: grid;
-    grid-template-columns: 10% 20% auto 10%;
-    overflow-y: auto;
-    max-height: 45%;
-    width: 100%;
-    z-index: 9999;
-}
-
-.SelectReceiver .ReceiverSelector .Avatar {
-    grid-column-start: 2;
-    justify-self: center;
-    align-self: center;
-    height: 50px;
-    width: 50px;
-    -webkit-border-radius: 100%;
-    -moz-border-radius: 100%;
-    border-radius: 100%;
-}
-
-.SelectReceiver .ReceiverSelector .UsersFullName {
-    grid-column-start: 3;
-    justify-self: center; /* OR start */
-    align-self: center;
-}
-
 /* main chat */
 .SelectedReceiver {
     display: none;
@@ -402,31 +379,6 @@ FRIEND TAB
     margin: 5px;
 }
 
-.FriendList {
-    display: grid;
-    grid-template-columns: 10% 20% auto 10%;
-    overflow-y: auto;
-    max-height: 45%;
-    width: 100%;
-}
-
-.FriendList .Avatar {
-    grid-column-start: 2;
-    justify-self: center;
-    align-self: center;
-    height: 50px;
-    width: 50px;
-    -webkit-border-radius: 100%;
-    -moz-border-radius: 100%;
-    border-radius: 100%;
-}
-
-.FriendList .FriendName {
-    grid-column-start: 3;
-    justify-self: center; /* OR start */
-    align-self: center;
-}
-
 /***********
 PERSONAL TAB
 ***********/
@@ -475,6 +427,16 @@ PERSONAL TAB
     margin-bottom: var(--navbar-margin-height);
 }
 
+/****************
+USER PROFILE PAGE
+****************/
+.UserProfilePage {
+    position: relative;
+    overflow: auto;
+    margin: 5px;
+}
+
+
 /*****
 NAVBAR
 *****/
diff --git a/main/app/sprinkles/core/assets/SiteAssets/js/chat.js b/main/app/sprinkles/core/assets/SiteAssets/js/chat.js
index 0989860..d3f443a 100644
--- a/main/app/sprinkles/core/assets/SiteAssets/js/chat.js
+++ b/main/app/sprinkles/core/assets/SiteAssets/js/chat.js
@@ -308,9 +308,9 @@ function InitializeChatServer() {
         });
 
         // SET RECEIVER
-        $(document).on("click", ".ReceiverSelector", function () {
+        $(document).on("click", ".SelectReceiver .UserSelector", function () {
             ReceiversUsername = $(this).attr("data-username");
-            ReceiversId = $(this).attr("data-id");
+            ReceiversId = $(this).attr("data-user-id");
             ChatSocket.send(JSON.stringify({
                 ClientMessageType: "SetReceiver",
                 ReceiversId: ReceiversId,
diff --git a/main/app/sprinkles/core/assets/SiteAssets/js/main.js b/main/app/sprinkles/core/assets/SiteAssets/js/main.js
index 136f188..87b9b2c 100644
--- a/main/app/sprinkles/core/assets/SiteAssets/js/main.js
+++ b/main/app/sprinkles/core/assets/SiteAssets/js/main.js
@@ -12,6 +12,18 @@ const alerts = $("#alerts-page");
 const ExploreData = $("#ExploreData");
 
 
+/**
+ * To get HTML for user selector
+ *
+ * @param User
+ * @returns {string}
+ * @constructor
+ */
+function GetUserSelectorHTML(User) {
+    return "<div class='UserSelector' data-username='" + User.username + "' data-user-id='" + User.id + "'><img class='Avatar' src='" + User.avatar + "'/><div class='UsersFullName'>" + User.full_name + "</div></div><hr class='ShorterLine'>"
+}
+
+
 /**
  * CACHE IMAGES
  * @type {*|jQueryImageCaching|jQuery}
@@ -121,11 +133,11 @@ $("#ImageUploadButton").on("click", function () {
     swal({
         title: 'Choose an image to upload!',
         html: "<form id='ImageUploadForm'>" +
-            "<input formenctype='multipart/form-data' type='file' name='image' />" +
-            "<input formenctype='multipart/form-data' type='submit' value='Upload!' />" +
-            "<input type='hidden' name='" + site.csrf.keys.name + "' value='" + site.csrf.name + "' />" +
-            "<input type='hidden' name='" + site.csrf.keys.value + "' value='" + site.csrf.value + "' />" +
-            "</form>"
+        "<input formenctype='multipart/form-data' type='file' name='image' />" +
+        "<input formenctype='multipart/form-data' type='submit' value='Upload!' />" +
+        "<input type='hidden' name='" + site.csrf.keys.name + "' value='" + site.csrf.name + "' />" +
+        "<input type='hidden' name='" + site.csrf.keys.value + "' value='" + site.csrf.value + "' />" +
+        "</form>"
     });
 
     $(".swal2-confirm").text("Close");
@@ -153,13 +165,13 @@ UserSearchBar.keypress(function () {
             url: site.uri.public + "/api/search/user/" + RequestedUser,
             success: function (UserArray) {
                 SearchResults.empty();
-                UserArray.forEach(function(User) {
+                UserArray.forEach(function (User) {
                     console.log("%c[SEARCH LOGGER] User " + RequestedUser + " was found!", "color: green");
                     //var GifUrls = ["https://media.giphy.com/media/xUPGcg01dIAot4zyZG/giphy.gif", "https://media.giphy.com/media/IS9LfP9oSLdcY/giphy.gif", "https://media.giphy.com/media/5wWf7H0WTquIU1DFY4g/giphy.gif"];
                     //var RandomGif = Math.floor((Math.random() * GifUrls.length));
                     //var RandomGifUrl = GifUrls[RandomGif];
                     //console.image(RandomGifUrl, 0.5);
-                    SearchResults.append("<img class='Avatar' src='" + User.avatar + "'/><div class='UsersFullName'>" + User.full_name + "</div>");
+                    SearchResults.append(GetUserSelectorHTML(User));
                 })
             },
             error: function () {
@@ -181,11 +193,11 @@ $(document).ready(function () {
     $.ajax({ // CHAT RECEIVERS -- more in chat.js
         url: site.uri.public + "/api/users/u/" + current_username + "/friends",
         success: function (receivers) {
-            receivers.forEach(function (receiversInfo) {
-                SelectReceiver.append("<div class='ReceiverSelector' data-username='" + receiversInfo.username + "' data-id='" + receiversInfo.id + "'><img class='Avatar' src='" + receiversInfo.avatar + "'/><div class='UsersFullName'>" + receiversInfo.full_name + "</div></div><hr class='ShorterLine'>");
-                SelectedReceiver.prepend("<div style='display: none;' id='ChatMessages' class='ChatMessages' data-username='" + receiversInfo.username + "'></div>");
+            receivers.forEach(function (User) {
+                SelectReceiver.append(GetUserSelectorHTML(User));
+                SelectedReceiver.prepend("<div style='display: none;' id='ChatMessages' class='ChatMessages' data-username='" + User.username + "'></div>");
 
-                FriendList.append("<img class='Avatar' src='" + receiversInfo.avatar + "'><a class='FriendName' href='" + site.uri.public + "/users/u/" + receiversInfo.username + "'>" + receiversInfo.full_name + "</a><br>");
+                FriendList.append(GetUserSelectorHTML(User));
             })
         },
         error: function () {
@@ -200,14 +212,24 @@ $(document).ready(function () {
             images.forEach(function (imageInfo) {
                 FeedTabWindow.append("" +
                     "<div data-image-id='" + imageInfo.image_id + "' class='FeedImageWrapper'>" +
-                    "<div class='UploaderInfo'>" +
+                    "<div data-username='" + imageInfo.username + "' data-id='" + imageInfo.user_id + "' class='UploaderInfo'>" +
                     "<img class='UploaderAvatar' src='" + imageInfo.avatar + "'>" +
                     "<div class='UploaderName'>" + imageInfo.full_name + "</div>" +
                     "</div>" +
                     "<img class='FeedImage' src='" + imageInfo.image_url + "'>" +
                     "</div>" +
                     "<hr>");
-            })
+            });
+
+            /**
+             * USER PROFILE PAGE SHOW/RENDER -- needs to be initialized after ajax load
+             */
+            $("[data-username]").on("click", function () {
+                console.log(1);
+                $(".main > *").hide(); // TODO: Improve -- maybe move out of success ajax
+                $(".main").prepend(GetProfilePageHTML($(this).attr("data-username")));
+            });
+
         },
         error: function () {
             console.log("%c[FEED LOGGER] No images in feed!", "color: red");
diff --git a/main/app/sprinkles/core/templates/pages/index.html.twig b/main/app/sprinkles/core/templates/pages/index.html.twig
index 6eec2cc..54b891d 100644
--- a/main/app/sprinkles/core/templates/pages/index.html.twig
+++ b/main/app/sprinkles/core/templates/pages/index.html.twig
@@ -124,7 +124,8 @@
                         <p class="EditFieldText">{{ current_user.email }}</p><br>
 
                         <p class="EditFieldLabel">{{ translate('LOCALE') }}</p>
-                        <p class="EditFieldText">{{ site.locales.available[current_user.locale] }}</p><br> {# more in admin/templates/forms/user.html.twig #}
+                        <p class="EditFieldText">{{ site.locales.available[current_user.locale] }}</p> {# more in admin/templates/forms/user.html.twig #}
+                        <br>
 
                         <p class="EditFieldLabel">{{ translate('THEME') }}</p>
                         <p class="EditFieldText">{{ current_user.theme }}</p>
@@ -133,6 +134,31 @@
             </div>
         </div>
 
+
+        {# it's here so it's easier to find #}
+        <script>
+            /**
+             * @returns {string}
+             * @constructor
+             */
+            function GetProfilePageHTML(Username) {
+                return `
+                <div class="UserProfilePage">
+                    <div class="headerWrap">
+                        <div class="header">
+                            <span class="LeftButtonHeader"><i class="fas fa-bars"></i></span>
+                            <span class="HeaderCaption TabCaption">${Username}</span>
+                            <span class="RightButtonHeader"><i class="fas fa-bell"></i></span>
+                        </div>
+                        <hr>
+                    </div>
+                    <div class="MainInTab UserProfilePageWindow">
+                    </div>
+                </div>
+                `
+            }
+        </script>
+
         <div class="Navbar">
             <span id="0" class="NavbarIconWrap">
                 <img src="{{ assets.url('assets://SiteAssets/icons/FriendFeedOutline.svg') }}">
-- 
cgit v1.2.3