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
# 8  
Old 02-15-2019
Quote:
Originally Posted by Neo
Mock-Update:
Here are a few pics and a link to Vue Black Dashboard (UserCP) Mockup Prototype V0.02 with the switch for dark and light mode, etc:
[
Wowww, Woww, Wowww. This is simply AWESOME. You ROCK Neo.

Thanks,
R. Singh
This User Gave Thanks to RavinderSingh13 For This Post:
Neo
# 9  
Old 02-15-2019
Quote:
Originally Posted by RavinderSingh13
Wowww, Woww, Wowww. This is simply AWESOME. You ROCK Neo.

Thanks,
R. Singh
LOL... yes, I know.... ROTFL

Thanks for the compliment, Ravinder.

This solution has a long way to go yet. I'm mocking up the template now, step-by-step and coding new features as I go.
This User Gave Thanks to Neo For This Post:
RavinderSingh13
# 10  
Old 02-15-2019
Vue Black Dashboard Mockup v0.04

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

  • Simple mockups for login, registration, patreon pages including quick formatting and bg image changes, etc.
# 11  
Old 02-15-2019
Hi Neo,

To use a local (Currently Glasgow UK) superlative - "most fandabidozi"! An excellent preview and I can only guess how much work must have gone into it, I cant wait to see it in full operation.

Just Awesome and a big thanks from me!

Regards

Gull04
This User Gave Thanks to gull04 For This Post:
Neo
# 12  
Old 02-15-2019
Quote:
Originally Posted by gull04
Hi Neo,

To use a local (Currently Glasgow UK) superlative - "most fandabidozi"! An excellent preview and I can only guess how much work must have gone into it, I cant wait to see it in full operation.

Just Awesome and a big thanks from me!

Regards

Gull04
Thanks.

I don't think it was working property 30 minutes ago. I was loading a new Vue build which loaded chart data from the server directly into browser localStorage() and I forgot to create the JS script to write the data; but I have since fixed it. Try it now Smilie

See next post:
# 13  
Old 02-15-2019
Vue Black Dashboard Mockup v0.05

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

  • Now loading Guests and Members chart and Discussions, Posts, Users and Errors stats badges from localStorage() created on the server on the PHP side;

sample data from forums I created for this mockup:

Code:
<script>
let online = [
    {
      "jan": "180",
      "feb": "10",
      "mar": "30",
      "apr": "120",
      "may": "80",
      "jun": "780",
      "jul": "170",
      "aug": "580",
      "sep": "80",
      "oct": "280",
      "nov": "130",
      "dec": "180"
    },
    {
      "jan": "10",
      "feb": "100",
      "mar": "11",
      "apr": "121",
      "may": "23",
      "jun": "78",
      "jul": "17",
      "aug": "58",
      "sep": "2",
      "oct": "80",
      "nov": "13",
      "dec": "80"
    },
    {
      "jan": "80",
      "feb": "101",
      "mar": "20",
      "apr": "140",
      "may": "60",
      "jun": "80",
      "jul": "70",
      "aug": "50",
      "sep": "0",
      "oct": "28",
      "nov": "30",
      "dec": "80"
    }
  ];
  let summary = [
    {
      "threads": "220K",
      "posts": "2,022K",
      "users": "123K",
      "errors": "2"
    }
  ];
  localStorage.setItem('online',JSON.stringify(online));
  localStorage.setItem('summary',JSON.stringify(summary));
</script>

Dashboard.vue (new code in red):

Very simple and crude way to get data from localStorage() into the Vue dashboard mockup:

Code:
<script>
import LineChart from "@/components/Charts/LineChart";
import BarChart from "@/components/Charts/BarChart";
import * as chartConfigs from "@/components/Charts/config";
import TaskList from "./TaskList";
import UserTable from "./UserTable";
import CountryMapCard from "./CountryMapCard";
import StatsCard from "src/components/Cards/StatsCard";
import config from "@/config";

export default {
  components: {
    LineChart,
    BarChart,
    StatsCard,
    TaskList,
    CountryMapCard,
    UserTable
  },
  data() {
    return {
      statsCards: [
        {
          title: JSON.parse(localStorage.getItem("summary"))[0].threads,
          subTitle: "Discussions",
          type: "warning",
          icon: "tim-icons icon-chat-33",
          footer: '<i class="tim-icons icon-refresh-01"></i> Update Now'
        },
        {
          title: JSON.parse(localStorage.getItem("summary"))[0].posts,
          subTitle: "Posts",
          type: "primary",
          icon: "tim-icons icon-shape-star",
          footer: '<i class="tim-icons icon-sound-wave"></i></i> Last Research'
        },
        {
          title: JSON.parse(localStorage.getItem("summary"))[0].users,
          subTitle: "Users",
          type: "info",
          icon: "tim-icons icon-single-02",
          footer: '<i class="tim-icons icon-trophy"></i> Customer feedback'
        },
        {
          title: JSON.parse(localStorage.getItem("summary"))[0].errors,
          subTitle: "Errors",
          type: "danger",
          icon: "tim-icons icon-molecule-40",
          footer: '<i class="tim-icons icon-watch-time"></i> In the last hours'
        }
      ],
      bigLineChart: {
        allData: [
          [
            JSON.parse(localStorage.getItem("online"))[0].jan,
            JSON.parse(localStorage.getItem("online"))[0].feb,
            JSON.parse(localStorage.getItem("online"))[0].mar,
            JSON.parse(localStorage.getItem("online"))[0].apr,
            JSON.parse(localStorage.getItem("online"))[0].may,
            JSON.parse(localStorage.getItem("online"))[0].jun,
            JSON.parse(localStorage.getItem("online"))[0].jul,
            JSON.parse(localStorage.getItem("online"))[0].aug,
            JSON.parse(localStorage.getItem("online"))[0].sep,
            JSON.parse(localStorage.getItem("online"))[0].oct,
            JSON.parse(localStorage.getItem("online"))[0].nov,
            JSON.parse(localStorage.getItem("online"))[0].dec
          ],
          [
            JSON.parse(localStorage.getItem("online"))[1].jan,
            JSON.parse(localStorage.getItem("online"))[1].feb,
            JSON.parse(localStorage.getItem("online"))[1].mar,
            JSON.parse(localStorage.getItem("online"))[1].apr,
            JSON.parse(localStorage.getItem("online"))[1].may,
            JSON.parse(localStorage.getItem("online"))[1].jun,
            JSON.parse(localStorage.getItem("online"))[1].jul,
            JSON.parse(localStorage.getItem("online"))[1].aug,
            JSON.parse(localStorage.getItem("online"))[1].sep,
            JSON.parse(localStorage.getItem("online"))[1].oct,
            JSON.parse(localStorage.getItem("online"))[1].nov,
            JSON.parse(localStorage.getItem("online"))[1].dec
          ],
          [
            JSON.parse(localStorage.getItem("online"))[2].jan,
            JSON.parse(localStorage.getItem("online"))[2].feb,
            JSON.parse(localStorage.getItem("online"))[2].mar,
            JSON.parse(localStorage.getItem("online"))[2].apr,
            JSON.parse(localStorage.getItem("online"))[2].may,
            JSON.parse(localStorage.getItem("online"))[2].jun,
            JSON.parse(localStorage.getItem("online"))[2].jul,
            JSON.parse(localStorage.getItem("online"))[2].aug,
            JSON.parse(localStorage.getItem("online"))[2].sep,
            JSON.parse(localStorage.getItem("online"))[2].oct,
            JSON.parse(localStorage.getItem("online"))[2].nov,
            JSON.parse(localStorage.getItem("online"))[2].dec
          ]
        ],
        activeIndex: 0,
        chartData: null,
        extraOptions: chartConfigs.purpleChartOptions,
        gradientColors: config.colors.primaryGradient,
        gradientStops: [1, 0.4, 0],
        categories: []
      },
      purpleLineChart: {
        extraOptions: chartConfigs.purpleChartOptions,
        chartData: {
          labels: ["JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],
          datasets: [
            {
              label: "Data",
              fill: true,
              borderColor: config.colors.primary,
              borderWidth: 2,
              borderDash: [],
              borderDashOffset: 0.0,
              pointBackgroundColor: config.colors.primary,
              pointBorderColor: "rgba(255,255,255,0)",
              pointHoverBackgroundColor: config.colors.primary,
              pointBorderWidth: 20,
              pointHoverRadius: 4,
              pointHoverBorderWidth: 15,
              pointRadius: 4,
              data: [80, 100, 70, 80, 120, 80]
            }
          ]
        },
        gradientColors: config.colors.primaryGradient,
        gradientStops: [1, 0.2, 0]
      },
      greenLineChart: {
        extraOptions: chartConfigs.greenChartOptions,
        chartData: {
          labels: ["JUL", "AUG", "SEP", "OCT", "NOV"],
          datasets: [
            {
              label: "My First dataset",
              fill: true,
              borderColor: config.colors.danger,
              borderWidth: 2,
              borderDash: [],
              borderDashOffset: 0.0,
              pointBackgroundColor: config.colors.danger,
              pointBorderColor: "rgba(255,255,255,0)",
              pointHoverBackgroundColor: config.colors.danger,
              pointBorderWidth: 20,
              pointHoverRadius: 4,
              pointHoverBorderWidth: 15,
              pointRadius: 4,
              data: [90, 27, 60, 12, 80]
            }
          ]
        },
        gradientColors: [
          "rgba(66,134,121,0.15)",
          "rgba(66,134,121,0.0)",
          "rgba(66,134,121,0)"
        ],
        gradientStops: [1, 0.4, 0]
      },
      blueBarChart: {
        extraOptions: chartConfigs.barChartOptions,
        chartData: {
          labels: ["USA", "GER", "AUS", "UK", "RO", "BR"],
          datasets: [
            {
              label: "Countries",
              fill: true,
              borderColor: config.colors.info,
              borderWidth: 2,
              borderDash: [],
              borderDashOffset: 0.0,
              data: [53, 20, 10, 80, 100, 45]
            }
          ]
        },
        gradientColors: config.colors.primaryGradient,
        gradientStops: [1, 0.4, 0]
      }
    };
  },
  computed: {
    enableRTL() {
      return this.$route.query.enableRTL;
    },
    isRTL() {
      return this.$rtl.isRTL;
    },
    bigLineChartCategories() {
      return [
        { name: "Guests", icon: "tim-icons icon-single-02 text-primary" },
        { name: "Members", icon: "tim-icons icon-gift-2 text-primary" },
        { name: "Staff", icon: "tim-icons icon-tap-02 text-primary" }
      ];
    }
  },
  methods: {
    initBigChart(index) {
      let chartData = {
        datasets: [
          {
            fill: true,
            borderColor: config.colors.primary,
            borderWidth: 2,
            borderDash: [],
            borderDashOffset: 0.0,
            pointBackgroundColor: config.colors.primary,
            pointBorderColor: "rgba(255,255,255,0)",
            pointHoverBackgroundColor: config.colors.primary,
            pointBorderWidth: 20,
            pointHoverRadius: 4,
            pointHoverBorderWidth: 15,
            pointRadius: 4,
            data: this.bigLineChart.allData[index]
          }
        ],
        labels: [
          "JAN",
          "FEB",
          "MAR",
          "APR",
          "MAY",
          "JUN",
          "JUL",
          "AUG",
          "SEP",
          "OCT",
          "NOV",
          "DEC"
        ]
      };
      this.$refs.bigChart.updateGradients(chartData);
      this.bigLineChart.chartData = chartData;
      this.bigLineChart.activeIndex = index;
    }
  },
  mounted() {
    this.i18n = this.$i18n;
    if (this.enableRTL) {
      this.i18n.locale = "ar";
      this.$rtl.enableRTL();
    }
    this.initBigChart(0);
  },
  beforeDestroy() {
    if (this.$rtl.isRTL) {
      this.i18n.locale = "en";
      this.$rtl.disableRTL();
    }
  }
};
</script>

I am now ready to pull this data live from the server MySQL DB with PHP and store the results in browser localStorage() with Javascript.

Getting close to having a full stack solution to build the dashboard Smilie . Just call me:

Mr. Super Full Stack Web Dev Guy ... LOL
This User Gave Thanks to Neo For This Post:
RavinderSingh13
# 14  
Old 02-15-2019
Update:

I have noticed in the logfiles that a few users are trying to access the new cool dashboard but are having issues.

Guess what they all had in common Smilie

Firefox.

This new code all makes heavy use of javascript and javascript localStorage() and unless you are a really experienced FF user who can debug all the "FF blocking and filtering of JS, etc), you will probably not have any luck viewing the cool new dash mockup.

I strongly suggest you use Chrome. Chrome works flawlessly "out of the box" without any tweeks.

Actually for me it works on Chrome, Safari, Opera and Firefox and here his the summary of each:
  • Chrome: Flawless
  • Opera: Flawless
  • Firefox: Works fine if you really know how to whitelist and permit Javascript and localStorage().
  • Safari: Works OK, but there are some formatting errors issues related to Bootstrap which are not resolved.

I cannot stress enough to everyone, please browse this site with Chrome (or Safari).

I have four browsers configured. Even if you LOVE Firefox for some historical or hysterical reason, you can run more than one browser.

Firefox breaks (filters and blocks by default) many Javascript features, so unless you are really an expert at understanding how to configure and test FF to get it to work (like Chrome, a great browser); most people do not know how to configure and do not use their built in web dev tools to debug.

I highly recommend you browser this site with CHROME.
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