Sneak Preview: New UNIX.COM UserCP VueJS Demo


Login or Register to Reply

 
Thread Tools Search this Thread
# 29  
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:
# 30  
Welcome Back Akshay!

Are you going to hang around for a while?
This User Gave Thanks to Neo For This Post:
# 31  
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)

# 32  
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:
# 33  
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:
# 34  
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.
# 35  
I'm going to start another discussion thread next, because I have reached a milestone with

Mockup UserCP Version v0.15

So, on the main dashboard page, all the chart stats and badges, leadership table and forum advisor tables are all using live data from the database.

In a nutshell, that page is basically done for now and I'll start on a new page for the UserCP soon.
Login or Register to Reply

|
Thread Tools Search this Thread
Search this Thread:
Advanced Search

More UNIX and Linux Forum Topics You Might Find Helpful
New UserCP Update Profile Image Page (UserCP Screeching Frog 0.7485)
Neo
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 ...... What is on Your Mind?
0
What is on Your Mind?
Vuejs Periodic Table by Kadin Zhang
Neo
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... What is on Your Mind?
2
What is on Your Mind?
License with demo???
merlin
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...... UNIX for Dummies Questions & Answers
2
UNIX for Dummies Questions & Answers