New Badge Timeline in Vue.js UserCP Mockup


 
Thread Tools Search this Thread
Top Forums Web Development New Badge Timeline in Vue.js UserCP Mockup
# 1  
Old 02-24-2019
New Badge Timeline in Vue.js UserCP Mockup

Continuing to think Vue.js is AWESOME, we now have a new badges timeline in version 0.26 of the UserCP Mockup:

Code:
https://www.unix.com/cp/index.php#/pages/badges

Changes:
  • Added Mockup from Badges timeline.
  • Changed notifications (upper right) to use v-for: bindings.
  • Fixes minor vue routing bug in /cp/ "default / " route.
Login or Register to Ask a Question

Previous Thread | Next Thread

9 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?

UserCP Screeching Frog 0.7446 Using Vue.js

Here is a status update on the new forum usercp. The current version of the new UserCP is Screeching Frog v0.7446. Most users will need to clear the files from your browser cache, quit and restart your browser to see the new version (check bottom of the page for version). Safari seems to... (9 Replies)
Discussion started by: Neo
9 Replies

3. 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

4. Web Development

Simple Vue.js Component to Redirect to External Web Page Using Vue Router

Vue Router has some quirks and on of the quirks is that it is not reliable when adding external links using the vue-router library. After struggling with many solutions, I have found that creating a simple Vue.js component like this one seems to work the best (so far): Component Example: ... (0 Replies)
Discussion started by: Neo
0 Replies

5. What is on Your Mind?

Congrats to Nezabudka for her Formulator Badge (UserCP Prototype v0.40)

Please join me in thanking one of our most active new members, nezabudka, who suggested that we start using the new usercp prototype and change the menu items around, effectively "promoting" the new prototype CP. At first, I did not understand her suggestion, but after 'coming down" from days of... (1 Reply)
Discussion started by: Neo
1 Replies

6. What is on Your Mind?

My Charts in the Prototype Vue.js UserCP

Yea.... something I thought would take me an hour ended up taking most of the day. Well, it's not like those YT video tutorials where it take a week or more to make a video and the guys (gals) make it look so easy. But having said that, I'm happy to share with forum members the first "My... (6 Replies)
Discussion started by: Neo
6 Replies

7. Web Development

New Discussion Timeline in Vue.js UserCP Mockup

Well, thanks to the amazing power of Vue.js, we now have a new timeline in version 0.23 of the UserCP Mockup: Wow! I'm really impressed with Vue.js. https://www.unix.com/cp/index.php#/pages/timeline In this version: Created database, and PHP model for the remote AJAX (Axios) call to... (1 Reply)
Discussion started by: Neo
1 Replies

8. Web Development

MySQL Query to Build Mockup Vue.js UserCP Timeline Page

Here is the query (and some sample results) I plan to use to build a new timeline page in the mockup vue.js usercp I am working on. When the postid is the same as lastpostid, this means the timeline entry will be - "{{Member}} Started Discussion {{Thread Title}} at {{date and time}}" and when... (4 Replies)
Discussion started by: Neo
4 Replies

9. Web Development

Vue.js UserCP Mockup Version 0.20 - Badge Notifications

Vue.js UserCP Mockup Version 0.20 - Badge Notifications https://www.unix.com/cp/index.php#/dashboardIn this mockup release: Badge Notifications are working with live data: Upper Right (see image) Added Axios to Vue and changed large table updates to axios (ajax) Note: Will reformat... (2 Replies)
Discussion started by: Neo
2 Replies
Login or Register to Ask a Question
STAP(1) 						      General Commands Manual							   STAP(1)

NAME
stapgraph - systemtap grapher SYNOPSIS
stapgraph [ OPTIONS ] FILENAME [ ARGUMENTS ] stapgraph [ OPTIONS ] - [ ARGUMENTS ] stapgraph [ OPTIONS ] -e SCRIPT [ ARGUMENTS ] DESCRIPTION
The stapgraph program is a simple frontend to stap that produces graphs from the output of stap scripts. This manual corresponds to version 1.7. OPTIONS
stapgraph accepts all options accepted by stap. They are passed through to the stap process running the script or probe points. USER INTERFACE
The script that produces results can be started from a dialog within the program, in addition to being launched using the program's command line arguments. This dialog allows arguments to be passed to stap and to the script. When running, a mouse left click on a graph pauses the display of data, even though it is still collected by the program. Dragging the mouse scrolls the graph backwards and forwards in time; clicking the displayed pause button restarts the display of new data. The scroll wheel can be used to zoom in and out on the graph. SCRIPT OUTPUT SYNTAX
Scripts can output Comma Separated Values (CSV) which will be interpreted by stapgraph. The first value is the X coordinate of the graph, usually a time value. stapgraph assumes that this value is constantly increasing. A different syntax allows the script to specify many details of the graph's appearance. %DataSet: DATA-SET-NAME SCALE COLOR GRAPHSTYLE The data set name identifies a data set that will be emitted by the script. "SCALE" is the overall vertical scale of the graph for this data set. "COLOR" is a red-green-blue hex color. "GRAPHSTYLE" is one of bar - a traditional bar graph dot - plotted points discreet - An event style timeline that records that an event happened at a certain time. %Title: TITLE A title for the whole graph. %XAxisTitle: TITLE The legend for the X axis %YAxisTitle: TITLE The legend for the Y axis. %YMax: MAX VALUE The maximum value displayed on the graph. GRAPH DATA
DATA SET TIME VALUE Each data point that is to be plotted is tagged with the data set name, followed by the time and value of the point. SEE ALSO
stap(3stap), staprun(3stap), BUGS
Use the Bugzilla link off of the project web page or our mailing list. http://sourceware.org/systemtap/,<systemtap@sourceware.org>. Red Hat 2013-05-14 STAP(1)