bludit/bl-themes/social-network/php/home.php

190 lines
5.4 KiB
PHP
Raw Normal View History

<?php if (empty($content)): ?>
<div class="mt-4">
<?php $language->p('No pages found') ?>
</div>
<?php endif ?>
<?php if ($user): ?>
<div class="card my-2 p-2 bg-light-blue">
<div>
<div class="form-group mb-1">
<textarea id="jspostText" class="form-control" rows="3" placeholder="What's up?"></textarea>
</div>
<div id="jspreviewImages" class="mb-1">
</div>
<div>
<input type="file" id="jsimageInputFile">
<script>
var jsimageInputFile = document.getElementById('jsimageInputFile');
jsimageInputFile.onchange = function(event) {
uploadImage(jsimageInputFile.files[0]);
}
</script>
</div>
<div class="form-group text-right mb-0">
<button id="jspostButton" type="button" class="btn btn-primary btn-sm">Post</button>
</div>
</div>
</div>
<script>
// Global variables
var _apiToken = "<?php echo $apiToken ?>"
var _userToken = "<?php echo $user->tokenAuth() ?>"
var _pageUUID = Date.now().toString(36) + Math.random().toString(36).substr(2, 15);
function insertPostInTimeline(args) {
const postTemplate = `
<div class="card my-2 p-2">
<div class="card-body">
<img class="float-left rounded-circle" style="width: 48px" src="${args.srcProfilePicture}" />
<div style="padding-left: 56px">
<p class="mb-2 text-muted">
@${args.nickname} - ${args.date}
</p>
${args.content}
</div>
</div>
</div>
`;
console.log(postTemplate);
var listOfPosts = document.getElementById("jslistOfPosts");
listOfPosts.innerHTML = postTemplate + listOfPosts.innerHTML;
}
function getPost(key) {
console.log("Getting post.");
fetch("http://localhost:8000/api/pages/"+key+"?token="+_apiToken, {
method: "GET"
}).then(function(response) {
return response.json();
}).then(function(data) {
console.log("Getting post. Response >");
console.log(data);
if (data.status=="0") {
data.data.nickname = "<?php echo $user->nickname() ?>";
data.data.srcProfilePicture = "<?php echo $user->profilePicture() ?>";
insertPostInTimeline(data.data);
}
});
}
function createPost(content) {
console.log("Creating new post.");
fetch("http://localhost:8000/api/pages/", {
method: "POST",
body: JSON.stringify({
token: _apiToken,
authentication: _userToken,
uuid: _pageUUID,
content: content
})
}).then(function(response) {
return response.json();
}).then(function(data) {
console.log("Creating new post. Response >");
console.log(data);
if (data.status=="0") {
document.getElementById("jspostText").value = "";
var newPostKey = data.data["key"];
getPost(newPostKey);
}
});
}
function uploadImage(file) {
console.log("Uploading image.");
var data = new FormData();
data.append("image", file);
data.append("uuid", _pageUUID);
data.append("token", _apiToken);
data.append("authentication", _userToken);
fetch("http://localhost:8000/api/images", {
method: "POST",
body: data
}).then(function(response) {
return response.json();
}).then(function(data) {
console.log("Uploading image. Response >");
console.log(data);
var img = document.createElement("img");
img.src = data.thumbnail;
img.className = "img-thumbnail";
img.dataset.original = data.image;
var previewImages = document.getElementById("jspreviewImages");
previewImages.appendChild(img);
});
}
// Event for click on button jspostButton
document.getElementById("jspostButton").onclick = function(event) {
// Get the post content from the textarea
var postContent = document.getElementById("jspostText").value;
// Insert all uploaded images to the post content
var images = document.getElementById("jspreviewImages").querySelectorAll("img");
if (images.length > 0) {
postContent += "<div class=image-gallery>";
for (var i = 0; i < images.length; i++) {
postContent += "<a href="+images[i].dataset.original+"><img src="+images[i].src+"/></a>";
}
postContent += "</div>";
}
createPost(postContent);
// Clean up
postContent.value = "";
document.getElementById("jspreviewImages").innerHTML = "";
}
</script>
<?php endif; ?>
<div id="jslistOfPosts">
<?php foreach ($content as $page): ?>
<!-- Post -->
<div class="card my-2 p-2">
<!-- Load Bludit Plugins: Page Begin -->
<?php Theme::plugins('pageBegin') ?>
<div class="card-body">
<!-- Profile picture -->
<img class="float-left rounded-circle" style="width: 48px" src="<?php echo $page->user('profilePicture') ?>" />
<div style="padding-left: 56px">
<!-- Post's author and date -->
<p class="mb-2 text-muted">
@<?php echo $page->user('nickname') ?> -
<?php echo $page->date() ?>
</p>
<!-- Post's content -->
<div id="post-content">
<?php echo $page->contentBreak() ?>
</div>
<!-- <div class="share text-right">
<a target="_blank" class="twitter" href="https://twitter.com/share?text=<?php echo urlencode($page->title()) ?>&amp;url=<?php echo urlencode ($page->permalink()) ?>">
<i class="fa fa-twitter"></i>
</a>
<a target="_blank" class="facebook" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode ($page->permalink()) ?>">
<i class="fa fa-facebook"></i>
</a>
<a target="_blank" class="reddit" href="https://www.reddit.com/submit?url=<?php echo urlencode ($page->permalink()) ?>&amp;title=<?php echo urlencode($page->title()) ?>">
<i class="fa fa-reddit"></i>
</a>
</div> -->
</div>
</div>
<!-- Load Bludit Plugins: Page End -->
<?php Theme::plugins('pageEnd') ?>
</div>
<?php endforeach ?>
</div>