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
BTI(1)									bti								    BTI(1)

NAME
bti - send a tweet to twitter.com or identi.ca from the command line SYNOPSIS
bti [--account account] [--password password] [--action action] [--user screenname] [--host HOST_NAME] [--proxy PROXY:PORT] [--logfile LOGFILE] [--config CONFIGFILE] [--replyto ID] [--retweet ID] [--page PAGENUMBER] [--bash] [--shrink-urls] [--debug] [--dry-run] [--verbose] [--version] [--help] DESCRIPTION
bti sends a tweet message to twitter.com or identi.ca. OPTIONS
--account account Specify the twitter.com or identi.ca account name. --password password Specify the password of your twitter.com or identi.ca account. --action action Specify the action which you want to perform. Valid options are "update" to send a message, "friends" to see your friends timeline, "public" to track public timeline, "replies" to see replies to your messages and "user" to see a specific user's timeline. Default is "update". --user screenname Specify the user whose messages you want to see when the action is "user". --host HOST_NAME Specify the host which you want to send your message to. Valid options are "twitter" to send to twitter.com and "identica" to send to identi.ca. If you want to send the message to a custom StatusNet installation, you should specify the API URI. For example identi.ca's URI is: https://identi.ca/api/statuses If no host is specified, the default is to send to twitter.com. --proxy PROXY:PORT Specify a http proxy value. This is not a required option, and only needed by systems that are behind a http proxy. If --proxy is not specified but the environment variable 'http_proxy' is set the latter will be used. --logfile LOGFILE Specify a logfile for bti to write status messages to. LOGFILE is in relation to the user's home directory, not an absolute path to a file. --config CONFIGFILE Specify a config file for bti to read from. By default, bti looks in the ~/.bti file for config values. This default location can be overridden by setting a specific file with this option. --replyto ID Status ID of a single post to which you want to create a threaded reply to. For twitter, this is ignored unless the message starts with the @name of the owner of the post with the status ID. For status.net, this can link any two messages into context with each other. Status.net will also link a message that contains an @name without this without regard to context. --retweet ID Status ID of a single post which you want to retweet. --shrink-urls Scans the tweet text for valid URL patterns and passes each through the supplied bti-shrink-urls script. The script will pass the URL to a web service that shrinks the URLs, making it more suitable for micro-blogging. The following URL shrinking services are available: http://2tu.us/ (default) and http://bit.ly / http://j.mp See the documentation for bti-shrink-urls for the configuration options. --debug Print a whole bunch of debugging messages to stdout. --page PAGENUMBER When the action is to retrieve updates, it usually retrieves only one page. If this option is used, the page number can be specified. --dry-run Performs all steps that would normally be done for a given action, but will not connect to the service to post or retrieve data. --verbose Verbose mode. Print status IDs and timestamps. --bash Add the working directory and a '$' in the tweet message to help specify it is coming from a command line. Don't put the working directory and the '$' in the tweet message. This option implies --background. --background Do not report back any errors that might have happened when sending the message, and send it in the background, returning immediately, allowing the user to continue on. --version Print version number. --help Print help text. DESCRIPTION
bti provides an easy way to send tweet messages direct from the command line or any script. It reads the message on standard input and uses the account and password settings either from the command line options, or from a config file, to send the message out. Its primary focus is to allow you to log everything that you type into a bash shell, in a crazy, "this is what I'm doing right now!" type of way, letting the world follow along with you constant moving between directories and refreshing your email queue to see if there's anything interesting going on. To hook bti up to your bash shell, export the following variable: PROMPT_COMMAND='history 1 | sed -e "s/^s*[0-9]*s*//" | bti --bash' This example assumes that you have the ~/.bti set up with your account and password information already in it, otherwise you can specify them as an option. CONFIGURATION
The account and password can be stored in a configuration file in the users home directory in a file named .bti. The structure of this file is as follows: account The twitter.com or identi.ca account name you wish to use to send this message with. password The twitter.com or identi.ca password for the account you wish to use to send this message with. --action action Specify the action which you want to perform. Valid options are "update" to send a message, "friends" to see your friends timeline, "public" to track public timeline, "replies" to see replies to your messages and "user" to see a specific user's timeline. --user screenname Specify the user you want to see his/her messages while the action is "user". host The host you want to use to send the message to. Valid options are either "twitter" or "identica" to send to twitter.com or identi.ca respectively. If you want to send the message to a custom StatusNet installation, you should specify the API URI. For example identi.ca's URI is: https://identi.ca/api/statuses. proxy The http proxy needed to send data out to the Internet. logfile The logfile name for bti to write what happened to. This file is relative to the user's home directory. If this file is not specified here or on the command line, no logging will be written to the disk. replyto The status ID to which all notices will be linked to. There is no sane reason for a need to have this set in a config file. One such reason is to have all your messages as children to a particular status. shrink-urls Setting this variable to 'true' or 'yes' will enable the URL shrinking feature. This is equivalent to using the --shrink-urls option. verbose Setting this variable to 'true' or 'yes' will enable the verbose mode. There is an example config file in /usr/share/doc/bti/examples/bti.example that shows the structure of the file. Configuration options have the following priority: command line option config file option environment variables For example, command line options always override any config file option, or any environment variables. Unless a config file is specified by the command line. At that point, the new config file is read, and any previous options set by a command line option, would be overridden. AUTHOR
Written by Greg Kroah-Hartman <greg@kroah.com> and Amir Mohammad Saied <amirsaied@gmail.com>. bti May 2008 BTI(1)
All times are GMT -4. The time now is 06:58 PM.
Unix & Linux Forums Content Copyright 1993-2022. All Rights Reserved.
Privacy Policy