Web Development

02-15-2019

Administrator

19,118, 3,359

Join Date: Sep 2000

Last Activity: 15 July 2022, 8:51 AM EDT

Location: Asia Pacific, Cyberspace, in the Dark Dystopia

Posts: 19,118

Thanks Given: 2,351

Thanked 3,359 Times in 1,878 Posts

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

These 4 Users Gave Thanks to Neo For This Post:

Neo

02-16-2019

Administrator

19,118, 3,359

Join Date: Sep 2000

Last Activity: 15 July 2022, 8:51 AM EDT

Location: Asia Pacific, Cyberspace, in the Dark Dystopia

Posts: 19,118

Thanks Given: 2,351

Thanked 3,359 Times in 1,878 Posts

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

This User Gave Thanks to Neo For This Post:

Neo

02-16-2019

Administrator

19,118, 3,359

Join Date: Sep 2000

Last Activity: 15 July 2022, 8:51 AM EDT

Location: Asia Pacific, Cyberspace, in the Dark Dystopia

Posts: 19,118

Thanks Given: 2,351

Thanked 3,359 Times in 1,878 Posts

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

Neo

02-16-2019

Administrator

19,118, 3,359

Join Date: Sep 2000

Last Activity: 15 July 2022, 8:51 AM EDT

Location: Asia Pacific, Cyberspace, in the Dark Dystopia

Posts: 19,118

Thanks Given: 2,351

Thanked 3,359 Times in 1,878 Posts

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:

Neo

02-16-2019

Administrator

19,118, 3,359

Join Date: Sep 2000

Last Activity: 15 July 2022, 8:51 AM EDT

Location: Asia Pacific, Cyberspace, in the Dark Dystopia

Posts: 19,118

Thanks Given: 2,351

Thanked 3,359 Times in 1,878 Posts

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"]

Neo

02-17-2019

Administrator

19,118, 3,359

Join Date: Sep 2000

Last Activity: 15 July 2022, 8:51 AM EDT

Location: Asia Pacific, Cyberspace, in the Dark Dystopia

Posts: 19,118

Thanks Given: 2,351

Thanked 3,359 Times in 1,878 Posts

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.

Neo