ccorrada
/
CarDieAleCa
Watch 2
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Show only one article in home feed

Carlos Hernandez 2 years ago
parent
fc757db86f
commit
bccff18fe1
3 changed files with 113 additions and 61 deletions
Split View Show Diff Stats
  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>