Sneak Preview: New UNIX.COM UserCP VueJS Demo


Login or Register to Reply

 
Thread Tools Search this Thread
# 15  
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  
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  
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  
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  
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  
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  
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 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