Sneak Preview: New UNIX.COM UserCP VueJS Demo


 
Thread Tools Search this Thread
Top Forums Web Development Sneak Preview: New UNIX.COM UserCP VueJS Demo
# 15  
Old 02-15-2019
Update: Fixed the Safari issue with RTL Bootstrap (removed RTL Bootstrap, not needed.).
  • Chrome: Flawless
  • Opera: Flawless
  • Safari: Flawless
  • Firefox: Works fine if you really know how to whitelist and permit Javascript and localStorage().
# 16  
Old 02-15-2019
Vue Black Dashboard Mockup v0.06


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

Mostly cosmetic mockup changes:
  • Changed main font-family to Montserrat (same as main site).
  • Commented out sidebar menu items not necessary for mockup.
  • Restyled a number of pages (login, registration).
  • Restyled footer a bit.
  • Simplified mockup "member thanks" staff table.
  • Removed buggy RTL Bootstrap CSS file (since we do not need right-to-left text support because we are an English-only site).
  • Put a link to the Vue UserCP Mockup in the UserCP down down menu (main site, desktop) for all registered users.

Your Digital Artist, Neo Smilie
These 4 Users Gave Thanks to Neo For This Post:
# 17  
Old 02-16-2019
Vue Black Dashboard Mockup v0.07


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

Mostly cosmetic mockup changes:
  • Got rid of a number of the round purple buttons.
  • Added more "neo-ish" looking pics.
  • Other simple cosmetic mockup changes.

Functional change:
  • Moved mockup site specific data to external JS file:


Code:
<script src="https://www.unix.com/scripts/js/vue_usercp_mockup.min.js"></script>

Your Digital Artist and Site Slave, Neo Smilie

Image
Image
Image
Image
Image
This User Gave Thanks to Neo For This Post:
# 18  
Old 02-16-2019
A Slight Change in Direction Mockup v0.08

Vue Black Dashboard Mockup v0.08

"A Slight Change in Direction"

In early versions of this mockup I planned to use server-side PHP to write dynamic forum data to browser localStorage(); ; but now I have changed my mind and write PHP serve-side dynamic forum data as stringified Javascript objects and write the data as an external Javascript file on the server-side:

So, in this mockup version, have removed all dynamic mockup data (numeric chart data, table date, etc) and places in an external JS file, like so:

Code:
<script src="https://www.unix.com/scripts/js/vue_usercp_mockup_3.min.js?v=21"></script>

For example, in the current mockup this looks like:

Code:
var online_guests=JSON.stringify([13,156,46,288,99,333,13,156,46,88,199,33]);var online_members=JSON.stringify([223,52,406,38,992,3,131,560,46,808,99,331]);var online_staff=JSON.stringify([131,156,246,38,599,333,213,566,146,188,199,53]);var summary_forum=JSON.stringify(["2222K","8888K","111K","1"]);var prior_year=JSON.stringify(["MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC","JAN","FEB"]);var prior_halfyear=JSON.stringify(["SEP","OCT","NOV","DEC","JAN","FEB"]);var six_top_countries=JSON.stringify(["USA","GER","FR","UK","IN","TH"]);var striped_table=JSON.stringify([{id:1,name:"Dakota Rice",salary:"$36.738",country:"Niger",city:"Oud-Turnhout"},{id:2,name:"Minerva Hooper",salary:"$23,789",country:"Curaçao",city:"Sinaai-Waas"},{id:3,name:"Sage Rodriguez",salary:"$56,142",country:"Netherlands",city:"Baileux"},{id:4,name:"Philip Chaney",salary:"$38,735",country:"Korea, South",city:"Overland Park"},{id:5,name:"Doris Greene",salary:"$63,542",country:"Malawi",city:"Feldkirchen in Kärnten"}]);var purple_data=JSON.stringify([80,100,70,80,120,80]);var green_data=JSON.stringify([90,27,60,12,80,200]);var blue_data=JSON.stringify([53,20,10,80,100,45]);var pie2=JSON.stringify([["red","steelblue","navy"],[100,400,200]]);var pie1=JSON.stringify([["blue","red","limegreen","indigo"],[60,40,20,10]]);


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

Changes:
  • Moved all dynamic data to server-side Javascript.
  • Removed localStorage() for server-side forum data.
  • Changed all Vue components (charts, tables, badges) to get the data from the external JS file.

My plan is to write a PHP cron to pull the MySQL data for the VueCP and write the data to an external JS file (like the one above) and to use a random number on the external JS script URL to bust the cache so it updates when the user reloads the page.

So, in the first mockups with live data, I will not use AJAX calls on the clients-side; but will do the heavy lifting on the server-side, until I change my mind again Smilie
# 19  
Old 02-16-2019
Mockup v0.09

I have not uploaded this to the server yet (developing on my desktop), but FYI I have the mockup of the top two rows of the dashboard working with actual forum data (updating hourly), showing the thanks per month, discussions per month and posts per month over the past year and the lifetime totals for discussions, posts, participating users and thanks. See images below:

Image

Image

Image
# 20  
Old 02-16-2019
Vue Black Dashboard Mockup v0.09

"First Mockup with Live Forum Data"

Per the post above, I have written the PHP code to pull live data and create the required JS to make this work;
  • Top Row: One year of data for thanks per month, discussions per month, and posts per month.
  • Second Row: Four "lifetime badges" for discussions, posts, participating users and thanks
.

I would post the PHP code, but it's a mess at this point in time and I'm embarrassed to post it until I clean it up, LOL. Here is one function, the "make the JSON file for the yearly discussions stats:

Code:
<?php
function make_threads()
{
    global $vbulletin;
    for ($i = 11; $i >= 0; $i--) {
        $start = mktime(0, 0, 0, date("m") - $i, 1, date("Y"));
        $end = mktime(0, 0, 0, date("m") - ($i - 1), 1, date("Y"));
        $query = "select count(threadid) as count from thread where dateline >=" . $start . " AND dateline <" . $end;
        $t = $vbulletin->db->query_first($query);
        $threads[] = $t['count'];
    }
    $string = json_encode($threads);
    return $string;
}

Example output from function:

Code:
["445","456","511","442","320","264","281","202","189","217","255","176"]

# 21  
Old 02-17-2019
Away from my desk for a day or two so no new mockup builds, here is my plan for v0.10 when I'm back at my desk for "Dashboard Row 3". This will be for three key users stats versus earlier system stats.

Image
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