|
|
@@ -0,0 +1,115 @@
|
|
|
+<?php
|
|
|
+include_once 'auth.php';
|
|
|
+//Get information of local data storage from auth.php
|
|
|
+$userAccountName = $_SESSION['login'];
|
|
|
+$dataStorage = $sysConfigDir . '/userdata/' . $_SESSION['login'] . "/";
|
|
|
+
|
|
|
+?>
|
|
|
+<html>
|
|
|
+<head>
|
|
|
+
|
|
|
+<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
|
+<title>TeaBag.tw</title>
|
|
|
+<link rel="stylesheet" href="script/tocas/tocas.css">
|
|
|
+<script src="script/tocas/tocas.js"></script>
|
|
|
+<script src="script/jquery.min.js"></script>
|
|
|
+<style>
|
|
|
+.extrapadding{
|
|
|
+ padding-left:10%;
|
|
|
+ padding-right:10%;
|
|
|
+}
|
|
|
+.removePadding{
|
|
|
+ padding:0px !important;
|
|
|
+}
|
|
|
+.active.item{
|
|
|
+ color:#4287f5 !important;
|
|
|
+ font-weight: bold !important;
|
|
|
+}
|
|
|
+.postAvator{
|
|
|
+ height:50px !important;
|
|
|
+ padding-right:25px;
|
|
|
+}
|
|
|
+.teabag.card{
|
|
|
+ max-width:350px;
|
|
|
+}
|
|
|
+.nopadding{
|
|
|
+ padding:0px !important;
|
|
|
+}
|
|
|
+.selectable{
|
|
|
+ cursor:pointer;
|
|
|
+ padding:5px !important;
|
|
|
+}
|
|
|
+.selectable:hover{
|
|
|
+ background-color:#f2f2f2 !important;
|
|
|
+}
|
|
|
+.online{
|
|
|
+ color: #88db99;
|
|
|
+}
|
|
|
+.linebreak{
|
|
|
+ white-space: pre-wrap;
|
|
|
+}
|
|
|
+</style>
|
|
|
+</head>
|
|
|
+ <body>
|
|
|
+ <div class="ts tabbed menu extrapadding">
|
|
|
+ <a class="item" href="index.php"><img src="img/minilogo.png" style="height:25px;"></a>
|
|
|
+ <a class="item" href="home.php"><i class="home icon"></i> Following</a>
|
|
|
+ <a class="item" href="index.php"><i class="user outline icon"></i>Timeline</a>
|
|
|
+ <a class="item"><i class="mail outline icon"></i>Notification</a>
|
|
|
+ <a class="active item"><i class="comments outline icon"></i>Post Comment</a>
|
|
|
+ <div class="right item removePadding">
|
|
|
+ <div class="ts icon tiny input">
|
|
|
+ <input type="text" placeholder="Search...">
|
|
|
+ <i class="circular search link icon"></i>
|
|
|
+ </div>
|
|
|
+ <a class="item" href="logout.php"><i class="log out icon"></i>Logout</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div id="comments" class="ts container">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="ts container" style="padding-top:12px;">
|
|
|
+ <?php
|
|
|
+ //Echo comemnt box
|
|
|
+
|
|
|
+ echo '<div class="ts segment" style="margin-left:50px;">
|
|
|
+ <div class="ts icon fluid input">
|
|
|
+ <input id="commentText" type="text" placeholder="Comment.">
|
|
|
+ <i class="send link icon" onClick="sendComment();"></i>
|
|
|
+ </div>
|
|
|
+ <small>Press Enter or the send button on the right to leave a comment.</small>
|
|
|
+ </div>';
|
|
|
+ ?>
|
|
|
+ </div>
|
|
|
+ <script>
|
|
|
+ var postID = "<?php echo $_GET['post']; ?>";
|
|
|
+ initPostAndComments();
|
|
|
+
|
|
|
+ function initPostAndComments(){
|
|
|
+ $("#comments").html("");
|
|
|
+ $("#comments").load("ajaxGetPost.php?post=" + postID);
|
|
|
+
|
|
|
+ }
|
|
|
+ function reply(username){
|
|
|
+ if ($("#commentText").val() == ""){
|
|
|
+ $("#commentText").val("#" + username + " ");
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function sendComment(){
|
|
|
+ var comment = $("#commentText").val();
|
|
|
+ $.post("postComment.php",{"comment":comment,"postid":postID}).done(function(data){
|
|
|
+ initPostAndComments();
|
|
|
+ $("#commentText").val("");
|
|
|
+ });
|
|
|
+ }
|
|
|
+ $("#commentText").on('keypress',function(e) {
|
|
|
+ if(e.which == 13 && $("#commentText").val() != "") {
|
|
|
+ //Enter pressed and comment not empty. Send Comment
|
|
|
+ sendComment();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ </script>
|
|
|
+ </body>
|
|
|
+</html>
|
|
|
+
|
Toby Chui