Browse Source

Show only one article in home feed

Carlos Hernandez 2 years ago
parent
commit
bccff18fe1
3 changed files with 113 additions and 61 deletions
  1. 3
    0
      app_template/www/articles.html
  2. 87
    43
      app_template/www/fetch_articles.js
  3. 23
    18
      app_template/www/home.html

+ 3
- 0
app_template/www/articles.html View File

@@ -54,6 +54,9 @@
54 54
 
55 55
 		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
56 56
 		<script src="fetch_articles.js"></script>
57
+		<script>
58
+			get_articles();
59
+		</script>
57 60
 	</head>
58 61
 	<body>
59 62
 	<header role="banner" id="fh5co-header">

+ 87
- 43
app_template/www/fetch_articles.js View File

@@ -1,46 +1,90 @@
1
-var articles;
2
-axios.get("http://136.145.231.32:8080/")
3
-    .then(response => {
4
-        articles = response.data;
5
-        for (let i = 0; i < articles.length; i++) {
6
-            let element = articles[i];
7
-            axios.get(`http://136.145.231.32:8080/${element}`)
8
-                .then(response => {
9
-                    let articlesHeading = document.querySelector("#articles-heading").parentElement;
10
-                    let articleButton = document.createElement("button");
11
-                    articleButton.textContent = response.data;
1
+function get_articles(single = false) {
2
+    var articles;
3
+    axios.get("http://136.145.231.32:8080/")
4
+        .then(response => {
5
+            articles = response.data;
6
+            if (single) {
7
+                let artName = articles[articles.length - 1];
8
+                axios.get(`http://136.145.231.32:8080/${artName}`)
9
+                    .then(response => {
10
+                        let homeArticleParent = document.querySelector("#home-article")
11
+                        let articleButton = document.createElement("button");
12
+                        articleButton.textContent = response.data;
12 13
 
13
-                    articleButton.classList.add("m-5", "article-content");
14
-                    articleButton.setAttribute("data-toggle", "modal");
15
-                    articleButton.setAttribute("data-target", `#articleModal${i}`);
14
+                        articleButton.classList.add("m-5", "article-content");
15
+                        articleButton.setAttribute("data-toggle", "modal");
16
+                        articleButton.setAttribute("data-target", "#homeArticleModal");
16 17
 
17
-                    let modal = document.createElement("div");
18
-                    modal.classList.add("modal", "fade");
19
-                    modal.setAttribute("id", `articleModal${i}`);
20
-                    modal.setAttribute("tabindex", "-1");
21
-                    modal.setAttribute("aria-labelledby", `articleModalLabel${i}`);
22
-                    modal.setAttribute("aria-hidden", "true");
23
-                    modal.innerHTML = `
24
-                        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
25
-                            <div class="modal-content">
26
-                                <div class="modal-header">
27
-                                    <h5 class="modal-title" id="articleModalLabel${i}">${element}</h5>
28
-                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
29
-                                        <span aria-hidden="true">&times;</span>
30
-                                    </button>
18
+                        let modal = document.createElement("div");
19
+                        modal.classList.add("modal", "fade");
20
+                        modal.setAttribute("id", "homeArticleModal");
21
+                        modal.setAttribute("tabindex", "-1");
22
+                        modal.setAttribute("aria-labelledby", "homeArticleModalLabel");
23
+                        modal.setAttribute("aria-hidden", "true");
24
+                        modal.innerHTML = `
25
+                            <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
26
+                                <div class="modal-content">
27
+                                    <div class="modal-header">
28
+                                        <h5 class="modal-title" id="homeArticleModal">${artName}</h5>
29
+                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
30
+                                            <span aria-hidden="true">&times;</span>
31
+                                        </button>
32
+                                    </div>
33
+                                    <div class="modal-body">
34
+                                        ${response.data}
35
+                                    </div>
36
+                                    <div class="modal-footer">
37
+                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
38
+                                    </div>
31 39
                                 </div>
32
-                                <div class="modal-body">
33
-                                    ${response.data}
34
-                                </div>
35
-                                <div class="modal-footer">
36
-                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
37
-                                </div>
38
-                            </div>
39
-                        </div>`;
40
-                    document.body.appendChild(modal);
41
-                    articlesHeading.appendChild(articleButton);
42
-                })
43
-                .catch(error => console.error(error));
44
-        }
45
-    })
46
-    .catch(error => console.error(error));
40
+                            </div>`;
41
+                        document.body.appendChild(modal);
42
+                        homeArticleParent.appendChild(articleButton);
43
+                    })
44
+                    .catch(error => console.log(error));
45
+            }
46
+            else {
47
+                for (let i = 0; i < articles.length; i++) {
48
+                    let element = articles[i];
49
+                    axios.get(`http://136.145.231.32:8080/${element}`)
50
+                        .then(response => {
51
+                            let articlesHeading = document.querySelector("#articles-heading").parentElement;
52
+                            let articleButton = document.createElement("button");
53
+                            articleButton.textContent = response.data;
54
+
55
+                            articleButton.classList.add("m-5", "article-content");
56
+                            articleButton.setAttribute("data-toggle", "modal");
57
+                            articleButton.setAttribute("data-target", `#articleModal${i}`);
58
+
59
+                            let modal = document.createElement("div");
60
+                            modal.classList.add("modal", "fade");
61
+                            modal.setAttribute("id", `articleModal${i}`);
62
+                            modal.setAttribute("tabindex", "-1");
63
+                            modal.setAttribute("aria-labelledby", `articleModalLabel${i}`);
64
+                            modal.setAttribute("aria-hidden", "true");
65
+                            modal.innerHTML = `
66
+                                <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
67
+                                    <div class="modal-content">
68
+                                        <div class="modal-header">
69
+                                            <h5 class="modal-title" id="articleModalLabel${i}">${element}</h5>
70
+                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
71
+                                                <span aria-hidden="true">&times;</span>
72
+                                            </button>
73
+                                        </div>
74
+                                        <div class="modal-body">
75
+                                            ${response.data}
76
+                                        </div>
77
+                                        <div class="modal-footer">
78
+                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
79
+                                        </div>
80
+                                    </div>
81
+                                </div>`;
82
+                            document.body.appendChild(modal);
83
+                            articlesHeading.appendChild(articleButton);
84
+                        })
85
+                        .catch(error => console.error(error));
86
+                }
87
+            }
88
+        })
89
+        .catch(error => console.error(error));
90
+}

+ 23
- 18
app_template/www/home.html View File

@@ -1,22 +1,23 @@
1
-
2 1
 <!DOCTYPE html>
3 2
 <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
4 3
 <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
5 4
 <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
6
-<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
7
-	<head>
5
+<!--[if gt IE 8]><!-->
6
+<html class="no-js">
7
+<!--<![endif]-->
8
+<head>
8 9
 	<meta charset="utf-8">
9 10
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
10 11
 	<title>dato.pr</title>
11 12
 	<meta name="viewport" content="width=device-width, initial-scale=1">
12 13
 	<meta name="description" content="No" />
13 14
 
14
-  	<!-- Facebook and Twitter integration -->
15
-	<meta property="og:title" content=""/>
16
-	<meta property="og:image" content=""/>
17
-	<meta property="og:url" content=""/>
18
-	<meta property="og:site_name" content=""/>
19
-	<meta property="og:description" content=""/>
15
+	<!-- Facebook and Twitter integration -->
16
+	<meta property="og:title" content="" />
17
+	<meta property="og:image" content="" />
18
+	<meta property="og:url" content="" />
19
+	<meta property="og:site_name" content="" />
20
+	<meta property="og:description" content="" />
20 21
 	<meta name="twitter:title" content="" />
21 22
 	<meta name="twitter:image" content="" />
22 23
 	<meta name="twitter:url" content="" />
@@ -48,9 +49,14 @@
48 49
 	<!--[if lt IE 9]>
49 50
 	<script src="js/respond.min.js"></script>
50 51
 	<![endif]-->
52
+	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
51 53
 	<script src="sortposts.js"></script>
52
-	</head>
53
-	<body>
54
+	<script src="fetch_articles.js"></script>
55
+	<script>
56
+		get_articles(true);
57
+	</script>
58
+</head>
59
+<body>
54 60
 	<header role="banner" id="fh5co-header">
55 61
 		<div class="fluid-container">
56 62
 			<nav class="navbar navbar-default navbar-fixed-top js-fullheight">
@@ -61,7 +67,7 @@
61 67
 					</ul>
62 68
 				</div>
63 69
 			</nav>
64
-	  </div>
70
+		</div>
65 71
 	</header>
66 72
 
67 73
 	<section id="fh5co-home" data-section="home" style="background-image: url(images/project-5.jpg);">
@@ -130,8 +136,8 @@
130 136
 													var userFeed = new Instafeed({
131 137
 														get: 'user',
132 138
 														target: "instafeed-container",
133
-															resolution: 'low_resolution',
134
-															limit: 3,
139
+														resolution: 'low_resolution',
140
+														limit: 3,
135 141
 														accessToken: 'IGQVJVV0t4b2ZAIdkJPNTl1ZAnZAsWm90TzIzRE5LMGQtR25aRklwYlQ5eVEtcjZAmRmpEbDlNWC1RNjZAhaFJLdXBaLUJlaEM4WkRaamJNcWZACNWx1VThSYUNRLVJHcFNHWHlnWl9FTjBjcl9Vd1pPcFZAHbAZDZD'
136 142
 													});
137 143
 													userFeed.run();
@@ -144,9 +150,8 @@
144 150
 									<div class="col-md-12">
145 151
 										<div class="core">
146 152
 											<i class="icon-columns to-animate-2"></i>
147
-											<div class="fh5co-post to-animate">
153
+											<div id="home-article" class="fh5co-post to-animate">
148 154
 												<h3>Articles</h3>
149
-												<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta totam reiciendis sapiente modi alias nulla quae libero, mollitia dolores ullam hic nesciunt in molestiae architecto.</p>
150 155
 											</div>
151 156
 										</div>
152 157
 									</div>
@@ -199,5 +204,5 @@
199 204
 	<!-- Main JS (Do not remove) -->
200 205
 	<script src="js/main.js"></script>
201 206
 
202
-	</body>
203
-</html>
207
+</body>
208
+</html>