First working version;

4 years ago · 8b487a0787
3 changed files with 142 additions and 5 deletions
--- a/css/app.css
+++ 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;
 }
--- a/index.html
+++ b/index.html
@ -3,16 +3,74 @@
 <head>
    <meta charset="UTF-8">
    <title>9Follow</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no"
          name="viewport">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/css/iziToast.min.css"/>
    <link rel="stylesheet" href="https://bootswatch.com/4/darkly/bootstrap.min.css">
    <link rel="stylesheet" href="css/app.css">
 </head>
 <body>
-    <div class="container" id="app">
+<div class="container" id="app">
    <div class="row">
        <div class="col-6">
            <h2>9Follow</h2>
        </div>
        <div class="col-6 text-right">
            <button id="follow-button" class="btn btn-light" data-bs-toggle="modal" data-bs-target="#addModal">
                <i class="fas fa-user-plus"></i>
            </button>
        </div>
        <div class="col-md-12">
            <hr color="white"/>
        </div>
        <div class="col-md-12">
            <ul class="list-group">
                <li class="list-group-item" v-for="account in followedAccounts">
                    <a href="javascript:" @click="visitAccount(account)">{{ account.name }}</a><br/>
                    <small class="muted">{{ getDiffForView(account.lastVisited) }}</small>
                </li>
            </ul>
        </div>
    </div>
    <div class="modal fade" id="addModal" tabindex="-1" aria-labelledby="addModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addModalLabel">Follow account</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">&times;</button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="name">
                            Username on 9gag
                        </label>
                        <input id="name" type="text" class="form-control" v-model="userNameToAdd"/>
                    </div>
                    <div class="form-group">
                        <label for="nameForList">
                            Name in list (optional)
                        </label>
                        <input id="nameForList" type="text" class="form-control" v-model="nameForList"/>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal" @click="followAccount()">Add to list</button>
                </div>
            </div>
        </div>
    </div>
 </div>
-    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/js/iziToast.min.js"></script>
-    <script src="js/app.js"></script>
+<script src="https://kit.fontawesome.com/b54a4cceff.js" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
 <script src="https://momentjs.com/downloads/moment-with-locales.min.js"></script>
 <!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
 <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
 <script src="js/app.js"></script>
 </body>
 </html>
--- 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()
    }
 })