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 @@
				@@ -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 @@
				@@ -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="js/app.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/izitoast/1.4.0/js/iziToast.min.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 @@
				@@ -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()
    }
 })