Login or Register to Ask a Question and Join Our Community


Web Development

Sneak Preview: New UNIX.COM UserCP VueJS Demo

Login to Discuss or Reply to this Discussion in Our Community

 
Thread Tools Search this Thread
Top Forums Web Development Sneak Preview: New UNIX.COM UserCP VueJS Demo
# 1  
Old 02-19-2019
After a long time, logged in Forum looking great, happy to see its responsive. Great job Neo
This User Gave Thanks to Akshay Hegde For This Post:
Neo
# 2  
Old 02-25-2019
I have closed the "Mockup" and have move the new Vue UserCP to "Prototype" with limited features, as follows:

UserCP Prototype v0.27

  • Hide all "non functioning pages" from everyone but developers (me).
  • Enabled the "forum logout" menu item in the upper right.
  • Added "Future Forum Search Bar" to the search bar menu until I decide how to implement the display (maybe I'll just display in the original forum search page for now.. ? Or created a new page inside the CP?)
  • Get the service workers working Smilie - have not worked on them yet; but will someday Smilie

Issues:
  • Having some trouble with Vue dynamic vars in the dashboard because that page is very complex and needs to be simplified ("componentized") to debug; so my plans to simply duplicate the system dashboard to a user-specific dashboard is delayed until I figure out the Vue-bug which is causing me hours of grief. I'll figure it out, hopefully sooner than later.

TODO:
  • Build a user-specific stats dashboard when I get the issue above worked out.
  • Build out the search bar function (when I decide how to want to display the results). I am leaning toward just displaying the search results in the main forums for now (keep it simple in this page).
  • Add another timeline (but have not decided what timeline to add).
  • Add a "more or next" button for in the timelines for users who might want to go back in further than the current 200 item limit (but I may change 200 to 100 to speed up the query and rendering).
  • Start adding UserCP forms to update user profile information (which is the main goal of this new CP, but I got off task because charts and timelines were more fun).

Note:

When I get the Vue-bug worked out with getting the user-specific data to work using Axios (AJAX), I can remove the PHP link from the app and go to pure HTML; but until I get the kinks worked out, the link to the CP will still be a PHP link.

Cheers.
This User Gave Thanks to Neo For This Post:
Akshay Hegde
# 3  
Old 02-19-2019
Welcome Back Akshay!

Are you going to hang around for a while?
This User Gave Thanks to Neo For This Post:
Akshay Hegde
# 4  
Old 02-19-2019
Update:

Created new DB table for tracking badge notifications and currently testing.

Will use this data in the new Vue UserCP I'm working on for listing the various badges users have received after testing:

Code:
mysql> describe neo_system_notifications;
+----------+--------------+------+-----+---------+----------------+
| Field    | Type         | Null | Key | Default | Extra          |
+----------+--------------+------+-----+---------+----------------+
| noteid   | int(10)      | NO   | PRI | NULL    | auto_increment |
| dateline | int(10)      | NO   |     | NULL    |                |
| userid   | int(10)      | NO   |     | NULL    |                |
| username | varchar(100) | NO   |     | NULL    |                |
| count    | int(10)      | NO   |     | NULL    |                |
| text     | varchar(256) | NO   |     | NULL    |                |
| type     | varchar(64)  | NO   |     | badge   |                |
+----------+--------------+------+-----+---------+----------------+
7 rows in set (0.00 sec)


Seems to be working OK:

Code:
mysql> select * from neo_system_notifications ;
+--------+------------+-----------+----------------+-------+------------------------------------------------------------+-------+
| noteid | dateline   | userid    | username       | count | text                                                       | type  |
+--------+------------+-----------+----------------+-------+------------------------------------------------------------+-------+
|      1 | 1550567302 | 302177877 | sadique.manzar |     2 | Posts This Past Month, Discussions Started This Past Month | badge |
|      2 | 1550569598 | 302069760 | anaigini45     |     1 | Discussions Started This Past Month                        | badge |
+--------+------------+-----------+----------------+-------+------------------------------------------------------------+-------+
2 rows in set (0.00 sec)

# 5  
Old 02-19-2019
OK... so this table for storing basic badge notification details is working fine:

Code:
mysql> select * from neo_system_notifications;
+--------+------------+-----------+----------------+-------+------------------------------------------------------------+-------+
| noteid | dateline   | userid    | username       | count | text                                                       | type  |
+--------+------------+-----------+----------------+-------+------------------------------------------------------------+-------+
|      1 | 1550567302 | 302177877 | sadique.manzar |     2 | Posts This Past Month, Discussions Started This Past Month | badge |
|      2 | 1550569598 | 302069760 | anaigini45     |     1 | Discussions Started This Past Month                        | badge |
|      3 | 1550573088 | 302169481 | Sumanthsv      |     1 | Weeks Active In A Row                                      | badge |
|      4 | 1550573354 | 302132521 | Akshay Hegde   |     1 | Forum Advisor                                              | badge |
|      5 | 1550574998 | 302181958 | johnprogrammer |     2 | Posts Per Day, Weeks Active In A Row                       | badge |
|      6 | 1550575937 | 302132521 | Akshay Hegde   |     2 | Bits, Discussions Started This Past Month                  | badge |
|      7 | 1550577993 | 302132521 | Akshay Hegde   |     1 | Posts This Past Month                                      | badge |
+--------+------------+-----------+----------------+-------+------------------------------------------------------------+-------+
7 rows in set (0.00 sec)

Will wait a day until there are a lot of entries, then write a new Vue.js component in "UserCP Mockup" to display these notifications.

Need to take a break, as this is a lot of work, building so many components.... LOL
This User Gave Thanks to Neo For This Post:
nezabudka
# 6  
Old 02-20-2019
Mockup Vue Dashboard v0.12


Code:
https://www.unix.com/cp/index.php

New Mockup Table (Mockup Data Only)
  • Table: Leadership Team
  • Forum Advisors

TODO:
  • Write PHP MySQL queries for tables, create and debug Javascript / JSON for tables.

Image

Image
This User Gave Thanks to Neo For This Post:
nezabudka
# 7  
Old 02-21-2019
Mockup Vue Dashboard v0.13


Code:
https://www.unix.com/cp/index.php

New Mockup Table (Mockup Data Only)
  • Table: Leadership Team - Avatar Images and New Defaults (sheriff img) Working in Vue.js
  • Forum Advisors - Avatar Images and New Defaults (chess bishop img) Working in Vue.js
  • JSON Mockup Tables for above completed.

Next:
  • Write PHP script to query databases and create / write Javascript / JSON.

Image

Image


Mockup Vue Dashboard v0.14


Code:
https://www.unix.com/cp/index.php

New Mockup Table (Mockup Data Only)
  • Profile Pics and URLs: Updated with User Avatars and URLs
  • Tables: Fixed minor Vue.js mockup bug with FA titles / roles.
Login or Register to Ask a Question

Previous Thread | Next Thread

6 More Discussions You Might Find Interesting

1. 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

2. 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

3. What is on Your Mind?

Major Changes in New UserCP (v0.63) Prototype

Regarding the latest version of the UserCP prototype (version 0.63) I have made a lot of major changes, including Added a "Posts Timeline" table for the recent posts, complimenting the non-table version earlier, which has been moved off the main menu (link at the bottom of the table). Added a... (4 Replies)
Discussion started by: Neo
4 Replies

4. What is on Your Mind?

Vuejs Periodic Table by Kadin Zhang

Was working on Vue.js and stumbled upon this beautiful Vue project by Kadin Zhang Periodicity is a dynamic periodic table built with Vue.js that animates and graphs data to aid the visualization of chemical concepts. The code is available on GitHub (2 Replies)
Discussion started by: Neo
2 Replies

5. UNIX for Dummies Questions & Answers

Shell basic graphics demo.

I have been thinking about another shell scripting project using the Arduino Diecimila board. I was going to make a kids level slow 8 channel Logic Analyser. I thought about using the termiinal esc code graphics characters. This is the test code using said terminal escape codes. I have only... (2 Replies)
Discussion started by: wisecracker
2 Replies

6. UNIX for Dummies Questions & Answers

License with demo???

I'm trying to setup a test environment to test upgrading to Solaris 8 or 9. Though when I go to install the demo version of Sun1 (forte/sun workshop as named before) it'll still ask for a 20 hexidecminal password for just a demo. huh? Ok so I added a 20 character thing in there it passed... (2 Replies)
Discussion started by: merlin
2 Replies
Login or Register to Ask a Question