Sponsored Content
Top Forums Web Development New Discussion Timeline in Vue.js UserCP Mockup Post 303031200 by Neo on Saturday 23rd of February 2019 11:26:01 AM
Old 02-23-2019
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.

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

In this version:
  • Created database, and PHP model for the remote AJAX (Axios) call to retrieve 100 more recent posts.
  • Identified the first post in a thread by comparing the firstpostid with the postid for each entry.
  • Positioned the timeline entries based on either "starting" or "replying" to a discussion.
  • Added links back to the post for each entry in the timeline.

It's working fine for me Smilie Hope it works a fine for you (in Chrome and Safari.. FF suxs, LOL)

ENJOY!

Image


Reference:

https://www.unix.com/web-programming...-new-post.html


Version 0.24:
  • Added link to each UIM / badge page to each timeline entry.
 

9 More Discussions You Might Find Interesting

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

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

3. Web Development

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: 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... (0 Replies)
Discussion started by: Neo
0 Replies

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

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

6. Web Development

Vue JS 2 Tutorial by The Net Ninja: A Recommended Vue.js Video Tutorial Series

A number of people have asked me how to get started with Vue.js and my reply before today was to Google "Vue.js". That has changed and my recommendation to anyone who wants to learn the fastest growing, easiest to learn and use Vue.js web dev framework is to watch this video tutorial series: ... (0 Replies)
Discussion started by: Neo
0 Replies

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

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

9. 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
ORLite::Migrate::Timeline(3pm)				User Contributed Perl Documentation			    ORLite::Migrate::Timeline(3pm)

NAME
ORLite::Migrate::Timeline - ORLite::Migrate timelines contained in a single class SYNOPSIS
package My::Timeline; use strict; use base 'ORLite::Migrate::Timeline'; sub upgrade1 { $_[0]->do(<<'END_SQL') } CREATE TABLE foo ( bar INTEGER NOT NULL PRIMARY KEY, ) END_SQL sub upgrade2 { my $self = shift; $self->do('TRUNCATE TABLE foo'); foreach ( 1 .. 10 ) { $self->do( 'INSERT INTO foo VALUES ( ? )', {}, $_ ); } } 1; DESCRIPTION
The default ORLite::Migrate timeline implementation makes use of separate Perl "patch" scripts to move the database schema timeline forwards. This solution is preferred because the separate scripts provide process isolation between your migration and run-time code. That is, the code that migrates the schema a single step forwards is guarenteed to never use the same variables or load the same modules or interact strangely with any other patch scripts, or with the main program. However, to execute a sub-script your program needs to reliably know where the Perl executable that launched it is and in some situations this is difficult or infeasible. ORLite::Migrate::Timeline provides an alternative mechanism for specifying the migration timeline which adds the ability to run migration timelines in strange Perl environments at the cost of losing process isolation for your patch code. When using this method, extra caution should be taken to avoid all use of global variables, and to strictly avoid loading large amounts of data into memory or using magic Perl modules such as Aspect or UNIVERSAL::isa which might have a global impact on your program. To use this method, create a new class which inherits from ORLite::Migrate::Timeline and create a "upgrade1" method. When encountering a new unversioned SQLite database, the migration planner will execute this "upgrade1" method and set the schema version to 1 once completed. To make further changes to the schema, you add additional "upgrade2", "upgrade3" and so on. METHODS
A series of convenience methods are provided for you by the base class to assist in making your schema patch code simpler and easier. new my $timeline = My::Class->new( dbh => $DBI_db_object, ); The "new" method is called internally by ORLite::Migrate on the timeline class you specify to construct the timeline object. The constructor takes a single parameter which should be a DBI::db database connection to your SQLite database. Returns an instance of your timeline class, or throws an exception (dies) if not passed a DBI connection object, or the database handle is not "AutoCommit". upgrade $timeline->upgrade(10); The "update" method is called on the timeline object by ORLite::Migrate to trigger the sequential execution of the individual "upgradeN" methods. The first method to be called will be the method one greater than the current value of the "user_revision" pragma, and the last method to be called will be the target revision, the first parameter to the method. As all upgrade methods are contained in a single class, a high level of control is assumed and so the execution plan will not be calculated in advance. The "upgrade" method will simply start rolling forwards and keep going until it reaches the target version (or die's trying). Returns true if all (zero or more) upgrade methods executed without throwing an exception. Throws an exception (dies) if any "upgradeN" method throws an exception, or if the migration process expects to find a particular numeric "upgradeN" method and cannot do so. do The "do" method is a convenience which provides a direct wrapper over the DBI method "do". It takes the same parameters and returns the same results. selectall_arrayref The "selectall_arrayref" method is a convenience which provides a direct wrapper over the DBI method "selectall_arrayref". It takes the same parameters and returns the same results. selectall_hashref The "selectall_hashref" method is a convenience which provides a direct wrapper over the DBI method "selectall_hashref". It takes the same parameters and returns the same results. selectcol_arrayref The "selectcol_arrayref" method is a convenience which provides a direct wrapper over the DBI method "selectcol_arrayref". It takes the same parameters and returns the same results. selectrow_array The "selectrow_array" method is a convenience which provides a direct wrapper over the DBI method "selectrow_array". It takes the same parameters and returns the same results. selectrow_arrayref The "selectrow_arrayref" method is a convenience which provides a direct wrapper over the DBI method "selectrow_arrayref". It takes the same parameters and returns the same results. selectrow_hashref The "selectrow_hashref" method is a convenience which provides a direct wrapper over the DBI method "selectrow_hashref". It takes the same parameters and returns the same results. pragma # Get a pragma value my $locking = $self->pragma('locking_mode'); # Set a pragma value $self->pragma( synchronous => 0 ); The "pragma" method provides a convenience over the top of the "PRAGMA" SQL statement, and allows the convenience query and change of SQLite pragmas. For example, if your application wanted to switch SQLite auto vacuuming off and instead control vacuuming of the database manually, you could do something like the following. # Disable auto-vacuuming because we'll only fill this once. # Do a one-time vacuum so we start with a clean empty database. $dbh->pragma( auto_vacuum => 0 ); $dbh->do('VACUUM'); table_exists The "table_exists" method is a convenience to check for the existance of a table already. Most of the time this isn't going to be needed because the schema revisioning itself guarentees there is or is not an existing table of a particular name. However, occasionally you may encounter a situation where your ORLite module is sharing a SQLite database with other code, or you are taking over control of a table from a plugin, or similar. In these situations it provides a small amount of added safety to be able to say things like. sub upgrade25 { my $self = shift; if ( $self->table_exists('foo') ) { $self->do('DROP TABLE foo'); } } Returns true(1) if the table exists or false(0) if not. column_exists The "column_exists" method is a convenience to check for the existance of a column already. It has somewhat less uses than the similar "table_exists" and is mainly used when a column may exist on various miscellaneous developer versions of databases, or where the table structure may be variable across different groups of users. Returns true(1) if the table exists or false(0) if not. dbh If you need to do something to the database outside the scope of the methods described above, the "dbh" method can be used to get access to the database connection directly. This is discouraged as it can allow your migration code to create changes that might cause unexpected problems. However, in the 1% of cases where the methods above are not enough, using it with caution will allow you to make changes that would not otherwise be possible. SUPPORT
Bugs should be reported via the CPAN bug tracker at http://rt.cpan.org/NoAuth/ReportBug.html?Queue=ORLite-Migrate <http://rt.cpan.org/NoAuth/ReportBug.html?Queue=ORLite-Migrate> For other issues, contact the author. AUTHOR
Adam Kennedy <adamk@cpan.org> COPYRIGHT
Copyright 2009 - 2012 Adam Kennedy. This program is free software; you can redistribute it and/or modify it under the same terms as Perl itself. The full text of the license can be found in the LICENSE file included with this module. perl v5.14.2 2012-02-02 ORLite::Migrate::Timeline(3pm)
All times are GMT -4. The time now is 04:31 AM.
Unix & Linux Forums Content Copyright 1993-2022. All Rights Reserved.
Privacy Policy