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
# 1  
Old 02-14-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
# 2  
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().
# 3  
Old 02-14-2019
Update: Version Mockup 0.03

Vue Black Dashboard Mockup v0.03

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

  • Removed world map (for now) because of "responsive issues" on mobile.
  • Added localStorage() to save "dark / light" mode switch and "sidebar background color selection".
  • Changed link to /cp/index.com temporarily due to some strange PHP issue.

Code (new SidebarSharePlugin.vue code in red):

Code:
<script>
import { BaseSwitch } from "src/components";

export default {
  name: "sidebar-share",
  components: {
    BaseSwitch
  },
  props: {
    backgroundColor: String
  },
  data() {
    return {
      sidebarMini: true,
      darkMode: true,
      isOpen: false,
      sidebarColors: [
        { color: "primary", active: false, value: "primary" },
        { color: "vue", active: true, value: "vue" },
        { color: "info", active: false, value: "blue" },
        { color: "success", active: false, value: "green" },
        { color: "warning", active: false, value: "orange" },
        { color: "danger", active: false, value: "red" }
      ]
    };
  },
  methods: {
    toggleDropDown() {
      this.isOpen = !this.isOpen;
    },
    closeDropDown() {
      this.isOpen = false;
    },
    toggleList(list, itemToActivate) {
      list.forEach(listItem => {
        listItem.active = false;
      });
      itemToActivate.active = true;
    },
    changeSidebarBackground(item) {
      this.$emit("update:backgroundColor", item.value);
      this.toggleList(this.sidebarColors, item);
      localStorage.setItem("sidebarbg", item.value);
    },
    toggleMode(type) {
      let docClasses = document.body.classList;
      if (type) {
        docClasses.remove("white-content");
        localStorage.setItem("mode", "dark-content");
      } else {
        docClasses.add("white-content");
        localStorage.setItem("mode", "white-content");
      }
    },
    minimizeSidebar() {
      this.$sidebar.toggleMinimize();
    }
  },
  mounted() {
    let modeSwitch = document.getElementById("dark-mode");
    if (localStorage.getItem("mode")) {
      if (localStorage.getItem("mode") == "white-content") {
        document.body.classList.add("white-content");
        modeSwitch.classList.add("bootstrap-switch-off");
      } else if (localStorage.getItem("mode") == "dark-content") {
        document.body.classList.remove("white-content");
        modeSwitch.classList.add("bootstrap-switch-on");
      }
    }
    let sidebarBg = document.getElementById("sidebar-bg");
    if (localStorage.getItem("sidebarbg")) {
      this.$emit("update:backgroundColor", localStorage.getItem("sidebarbg"));
    }
  }
};
</script>

These 2 Users Gave Thanks to Neo For This Post:
Akshay Hegde nezabudka
# 4  
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.
# 5  
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
# 6  
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:
# 7  
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
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