diff --git a/css/app.css b/css/app.css new file mode 100644 index 0000000..2943f39 --- /dev/null +++ b/css/app.css @@ -0,0 +1,22 @@ +@font-face { + font-family: 'BebasNeue'; + src: url("../fonts/BebasNeue-Regular.ttf"); +} + +h1, h2, h3, h4, h5, h6, button:not(.btn-close) { + font-family: BebasNeue, sans-serif; +} + +#app { + margin-top: 2em; +} + +#follow-button { + margin-top: 0.4em; +} + +.btn-close { + border: none; + background-color: transparent; + color: white; +} \ No newline at end of file diff --git a/index.html b/index.html index f80794f..a02d857 100644 --- a/index.html +++ b/index.html @@ -3,16 +3,74 @@ 9Follow + + + -
+
+
+
+

9Follow

+
+
+ +
+
+
+ +
+ +
+
+ +
- - + + + + + + + + \ No newline at end of file diff --git a/js/app.js b/js/app.js index 5d5ccb9..a44867f 100644 --- a/js/app.js +++ b/js/app.js @@ -1,12 +1,69 @@ let app = new Vue({ el: '#app', data: { - + userNameToAdd: '', + nameForList: '', + followedAccounts: [] }, methods: { + followAccount() { + let userName = this.userNameToAdd; + + if (userName.length <= 0) { + this.showToast('Username is needed.', 'red'); + return false; + } + + this.followedAccounts.push({ + name: (this.nameForList.length > 0) ? this.nameForList : this.userNameToAdd, + url: 'https://9gag.com/u/' + userName + '/', + lastVisited: null + }); + + + this.showToast("You're now following " + this.getDisplayName(), 'darkgreen'); + + this.userNameToAdd = ''; + this.nameForList = ''; + this.updateStorage(); + }, + visitAccount(account) { + account.lastVisited = moment().format(); + window.open(account.url,'_blank'); + + this.updateStorage(); + return true; + }, + showToast(message, color = '') { + iziToast.show({ + theme: 'dark', + color: color, + message: message, + position: 'topCenter', + }); + }, + getDiffForView(time) { + return time ? 'last visited ' + moment(time).fromNow() : 'not yet visited'; + }, + updateStorage() { + localStorage.setItem('followedAccounts', JSON.stringify(this.followedAccounts)); + }, + loadStorage() { + let savedFollowedAccounts = JSON.parse(localStorage.getItem('followedAccounts')); + this.followedAccounts = savedFollowedAccounts ? savedFollowedAccounts : []; + }, + getDisplayName(nameForToast = this.nameForList, userNameToAdd = this.userNameToAdd) { + return nameForToast = nameForList ? userNameToAdd + ' (' + userNameToAdd + ')' : userNameToAdd; + }, + refreshAccountsAndOrder() { + this.loadStorage(); + this.followedAccounts = this.followedAccounts.sort(function (a, b) { + return new Date(b.lastVisited) - new Date(a.lastVisited) + }); + } }, mounted() { - alert('Hi!'); + this.refreshAccountsAndOrder() } }) \ No newline at end of file