Login or Register to Ask a Question and Join Our Community

Sponsored Content
Full Discussion: MySQL Query to Build Mockup Vue.js UserCP Timeline Page
Top Forums Web Development MySQL Query to Build Mockup Vue.js UserCP Timeline Page Post 303031195 by Neo on Saturday 23rd of February 2019 08:41:38 AM
Old 02-23-2019
So, this PHP code works fine on the server side to create the JSON array needed in the Vue.js application:

Code:
<?php
header("Content-Type: application/json");
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, OPTIONS");
require_once '/var/www/global.php';
$timeline = "select thread.threadid, post.userid, post.username, thread.title, thread.dateline,post.postid, thread.lastpostid from thread inner join post ON post.threadid = thread.threadid  order by dateline desc limit 30";

$results = $vbulletin->db->query_read($timeline);
while ($item = $db->fetch_array($results)) {
    if ($item['postid'] == $item['lastpostid']) {
        $item['title'] = $item['username'] . ' started discussion ' . $item['title'];
    } else {
        $item['title'] = $item['username'] . ' replied to ' . $item['title'];
    }
    $item['when'] = date("D M j G:i:s T Y", $item['dateline']);
    unset($item['postid']);
    unset($item['lastpostid']);
    $final[] = $item;
}

$serialize = json_encode($final);
echo $serialize;

With sample PHP results:

Quote:
[{"threadid":"281241","userid":"1","username":"Neo","title":"Neo replied to MySQL Query to Build Mockup Vue.js UserCP Timeline Page","dateline":"1550927675","when":"Sat Feb 23 7:14:35 CST 2019"},{"threadid":"281241","userid":"1","username":"Neo","title":"Neo started discussion MySQL Query to Build Mockup Vue.js UserCP Timeline Page","dateline":"1550927675","when":"Sat Feb 23 7:14:35 CST 2019"},{"threadid":"281240","userid":"302061468","username":"newbie_01","title":"newbie_01 replied to Need help with how to search a file for a variable string and delete that line","dateline":"1550899316","when":"Fri Feb 22 23:21:56 CST 2019"},{"threadid":"281240","userid":"302122047","username":"RudiC","title":"RudiC started discussion Need help with how to search a file for a variable string and delete that line","dateline":"1550899316","when":"Fri Feb 22 23:21:56 CST 2019"},{"threadid":"281240","userid":"302122727","username":"Don Cragun","title":"Don Cragun replied to Need help with how to search a file for a variable string and delete that line","dateline":"1550899316","when":"Fri Feb 22 23:21:56 CST 2019"},{"threadid":"281239","userid":"1","username":"Neo","title":"Neo replied to Vue.js UserCP Mockup Version 0.20 - Badge Notifications","dateline":"1550894775","when":"Fri Feb 22 22:06:15 CST 2019"},{"threadid":"281239","userid":"1","username":"Neo","title":"Neo replied to Vue.js UserCP Mockup Version 0.20 - Badge Notifications","dateline":"1550894775","when":"Fri Feb 22 22:06:15 CST 2019"},{"threadid":"281239","userid":"1","username":"Neo","title":"Neo started discussion Vue.js UserCP Mockup Version 0.20 - Badge Notifications","dateline":"1550894775","when":"Fri Feb 22 22:06:15 CST 2019"},{"threadid":"281238","userid":"302136317","username":"wisecracker","title":"wisecracker started discussion Apple looking to switch to using in-house ARM chips for their HW.","dateline":"1550864937","when":"Fri Feb 22 13:48:57 CST 2019"},{"threadid":"281237","userid":"41441","username":"bakunin","title":"bakunin replied to Combining multiple greps","dateline":"1550845443","when":"Fri Feb 22 8:24:03 CST 2019"},{"threadid":"281237","userid":"302052697","username":"Scrutinizer","title":"Scrutinizer replied to Combining multiple greps","dateline":"1550845443","when":"Fri Feb 22 8:24:03 CST 2019"},{"threadid":"281237","userid":"302116191","username":"MadeInGermany","title":"MadeInGermany replied to Combining multiple greps","dateline":"1550845443","when":"Fri Feb 22 8:24:03 CST 2019"},{"threadid":"281237","userid":"302170346","username":"stomp","title":"stomp replied to Combining multiple greps","dateline":"1550845443","when":"Fri Feb 22 8:24:03 CST 2019"},{"threadid":"281237","userid":"302181753","username":"Xubuntu56","title":"Xubuntu56 replied to Combining multiple greps","dateline":"1550845443","when":"Fri Feb 22 8:24:03 CST 2019"},{"threadid":"281237","userid":"302181753","username":"Xubuntu56","title":"Xubuntu56 replied to Combining multiple greps","dateline":"1550845443","when":"Fri Feb 22 8:24:03 CST 2019"},{"threadid":"281237","userid":"302181753","username":"Xubuntu56","title":"Xubuntu56 replied to Combining multiple greps","dateline":"1550845443","when":"Fri Feb 22 8:24:03 CST 2019"},{"threadid":"281237","userid":"302181753","username":"Xubuntu56","title":"Xubuntu56 started discussion Combining multiple greps","dateline":"1550845443","when":"Fri Feb 22 8:24:03 CST 2019"},{"threadid":"281236","userid":"21292","username":"milhan","title":"milhan replied to Remove lines ending with a certain character","dateline":"1550836350","when":"Fri Feb 22 5:52:30 CST 2019"},{"threadid":"281236","userid":"302122047","username":"RudiC","title":"RudiC replied to Remove lines ending with a certain character","dateline":"1550836350","when":"Fri Feb 22 5:52:30 CST 2019"},{"threadid":"281236","userid":"302122047","username":"RudiC","title":"RudiC replied to Remove lines ending with a certain character","dateline":"1550836350","when":"Fri Feb 22 5:52:30 CST 2019"},{"threadid":"281236","userid":"302122727","username":"Don Cragun","title":"Don Cragun replied to Remove lines ending with a certain character","dateline":"1550836350","when":"Fri Feb 22 5:52:30 CST 2019"},{"threadid":"281236","userid":"302122727","username":"Don Cragun","title":"Don Cragun replied to Remove lines ending with a certain character","dateline":"1550836350","when":"Fri Feb 22 5:52:30 CST 2019"},{"threadid":"281236","userid":"302180382","username":"maya3","title":"maya3 replied to Remove lines ending with a certain character","dateline":"1550836350","when":"Fri Feb 22 5:52:30 CST 2019"},{"threadid":"281236","userid":"302180382","username":"maya3","title":"maya3 replied to Remove lines ending with a certain character","dateline":"1550836350","when":"Fri Feb 22 5:52:30 CST 2019"},{"threadid":"281236","userid":"302180382","username":"maya3","title":"maya3 started discussion Remove lines ending with a certain character","dateline":"1550836350","when":"Fri Feb 22 5:52:30 CST 2019"},{"threadid":"281235","userid":"1","username":"Neo","title":"Neo replied to Mtime or the equivalent for HP-UX","dateline":"1550808466","when":"Thu Feb 21 22:07:46 CST 2019"},{"threadid":"281235","userid":"302024200","username":"drl","title":"drl replied to Mtime or the equivalent for HP-UX","dateline":"1550808466","when":"Thu Feb 21 22:07:46 CST 2019"},{"threadid":"281235","userid":"302122047","username":"RudiC","title":"RudiC replied to Mtime or the equivalent for HP-UX","dateline":"1550808466","when":"Thu Feb 21 22:07:46 CST 2019"},{"threadid":"281235","userid":"302181968","username":"danielshell","title":"danielshell replied to Mtime or the equivalent for HP-UX","dateline":"1550808466","when":"Thu Feb 21 22:07:46 CST 2019"},{"threadid":"281235","userid":"302181968","username":"danielshell","title":"danielshell started discussion Mtime or the equivalent for HP-UX","dateline":"1550808466","when":"Thu Feb 21 22:07:46 CST 2019"}]

Off Topic Note to Self, Don Cragun and the Mod Team regarding ICODE, CODE and QUOTE BBCODE tags.

The CODE tags do not work well for the JSON output above and neither do QUOTE tags, and the ICODE tags do not work either, so no current BBCODE tag solution is perfect. This means (TODO) someday in the future (after finish the Vue.js mockup and initial code base) I am going to (try to) create a new BBCODE tag which is like ICODE or CODE tags but wraps properly, is responsive (formats well in all screen sizes), has a different background color, and has more margin. (TODO).

In the time being, I'm going to leave the wrap property on the ICODE tags, as I am finding having ICODE tags wrap have pros-and-cons, even though they were designed not to wrap. I don't want members to start using ICODE tags instead of CODE tags for code and output. ICODE tags should only be used for very short "phrases" which normally do not wrap (within the ICODE tag); however I realize there are "exceptions" and so I need to create a new kind of BBCODE tag this year.

In a nutshell, neither CODE, ICODE or QUOTE tags work well for the large "single line" JSON file output above. Of the three, QUOTE tags worked the best for this example.

Hmmm.
 

9 More Discussions You Might Find Interesting

1. What is on Your Mind?

Promotion! Like Our New Facebook Timeline Page for 10,000 Bits!

Hey! We have started a new Forum HQ Facebook "Timeline" page where we plan to create a unix/linux timeline with major milestones for unix/linux, company start up dates for major releases, etc. We are just getting started, so I would like to personally invite you to visit and "Like" our new... (10 Replies)
Discussion started by: Neo
10 Replies

2. Web Development

Vue.js UserCP Mockup Version 0.20 - Badge Notifications

Vue.js UserCP Mockup Version 0.20 - Badge Notifications https://www.unix.com/cp/index.php#/dashboardIn this mockup release: Badge Notifications are working with live data: Upper Right (see image) Added Axios to Vue and changed large table updates to axios (ajax) Note: Will reformat... (2 Replies)
Discussion started by: Neo
2 Replies

3. Web Development

New Discussion Timeline in Vue.js UserCP Mockup

Well, thanks to the amazing power of Vue.js, we now have a new timeline in version 0.23 of the UserCP Mockup: Wow! I'm really impressed with Vue.js. https://www.unix.com/cp/index.php#/pages/timeline In this version: Created database, and PHP model for the remote AJAX (Axios) call to... (1 Reply)
Discussion started by: Neo
1 Replies

4. Web Development

New Badge Timeline in Vue.js UserCP Mockup

Continuing to think Vue.js is AWESOME, we now have a new badges timeline in version 0.26 of the UserCP Mockup: https://www.unix.com/cp/index.php#/pages/badges Changes: Added Mockup from Badges timeline. Changed notifications (upper right) to use v-for: bindings. Fixes minor vue routing... (0 Replies)
Discussion started by: Neo
0 Replies

5. What is on Your Mind?

My Charts in the Prototype Vue.js UserCP

Yea.... something I thought would take me an hour ended up taking most of the day. Well, it's not like those YT video tutorials where it take a week or more to make a video and the guys (gals) make it look so easy. But having said that, I'm happy to share with forum members the first "My... (6 Replies)
Discussion started by: Neo
6 Replies

6. Web Development

Simple Vue.js Component to Redirect to External Web Page Using Vue Router

Vue Router has some quirks and on of the quirks is that it is not reliable when adding external links using the vue-router library. After struggling with many solutions, I have found that creating a simple Vue.js component like this one seems to work the best (so far): Component Example: ... (0 Replies)
Discussion started by: Neo
0 Replies

7. What is on Your Mind?

New UserCP Update Profile Image Page (UserCP Screeching Frog 0.7485)

Update! UserCP Screeching Frog 0.7485 Created a new page for uploaded a profile picture (profile pictures are different than avatar pictures). https://www.unix.com/usercp/#/settings/other https://www.unix.com/members/1-albums225-picture1158.png ... (0 Replies)
Discussion started by: Neo
0 Replies

8. What is on Your Mind?

UserCP Screeching Frog 0.7446 Using Vue.js

Here is a status update on the new forum usercp. The current version of the new UserCP is Screeching Frog v0.7446. Most users will need to clear the files from your browser cache, quit and restart your browser to see the new version (check bottom of the page for version). Safari seems to... (9 Replies)
Discussion started by: Neo
9 Replies

9. What is on Your Mind?

Video Overview of the Vue.js UserCP @UNIX.com

Here is my second live video screencast (in my life, using Camtasia) with voice for the new usercp: Overview of the Vue.js UserCP @UNIX.com Shout outs to Don Cragun, Corona688, Rudi, Wolf, Made in Germany, stomp, Ravinder, Creative Tim, PubNub and others in the video. Thanks. If you are... (1 Reply)
Discussion started by: Neo
1 Replies
All times are GMT -4. The time now is 02:26 AM.
Unix & Linux Forums Content Copyright 1993-2022. All Rights Reserved.
Privacy Policy