[#29] 서버에서 받은 미세먼지 데이터 가공 후 렌더링

codesquad-member-2020 · Apr 3, 2020 · 91945b3 · 91945b3
1 parent 3d7e3cb
commit 91945b3
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 4 deletions.
diff --git a/FE/js/dust/dust.js b/FE/js/dust/dust.js
@@ -27,8 +27,91 @@ async function getDustData(stationName) {
 
 function render(stationName, dustData) {
     renderStation(stationName);
+    renderGraph(dustData);
 }
 
 function renderStation(stationName) {
     TARGET.location.innerText = stationName;
+}
+
+function renderGraph(dustData) {
+    dustData.forEach(dustData => {
+        if (dustData.pm10Grade === "") return;
+        console.log(dustData);
+        const widthValue = calculateValue(parseInt(dustData.pm10Value));
+        const li = document.createElement("li");
+        const div = document.createElement("div");
+        const color = ['#017AFF', '#37E030', '#E0AA31', '#CE1817'];
+        const dustColor = parseInt(dustData.pm10Grade) - 1;
+        div.style.background = "linear-gradient(to right, " + color[dustColor] + " " + widthValue + "%, #FFFFFF " + widthValue + "%)";
+        const text = document.createTextNode(dustData.pm10Value);
+        div.appendChild(text);
+        li.appendChild(div);
+        document.querySelector('.dust-graph-ul').appendChild(li);
+    });
+    rendurDust(dustData);
+}
+
+function calculateValue(pm10Value) {
+    if (pm10Value < 201) return pm10Value / 2;
+    else if (pm10Value > 200) return 100;
+}
+
+function rendurDust(data) {
+    const emoji = document.querySelector(".dust-level-emoji");
+    const gradeText = document.querySelector(".dust-level-text");
+    const dustValue = document.querySelector(".dust-level-value");
+    const time = document.querySelector(".dust-level-time");
+    const dustTop = document.querySelector(".dust-top");
+
+    // 오늘 날짜
+    let today = new Date();
+    let year = today.getFullYear();
+    let month = today.getMonth();
+    let date = today.getDate();
+
+    month = (month + 1);
+
+    if(month < 10) {
+        month = '0' + month;
+    }
+
+    if(date<10) {
+        date = '0' + date;
+    }
+
+    today = year + '-' + month + '-' + date;
+
+        if(data[0].dataTime.indexOf(today)) {
+            let nowTime = data[0].dataTime.substring(10, 16);
+            time.innerHTML = '오늘' + nowTime;
+        }else {
+            time.innerHTML = data[0].dataTime;
+        }
+
+        switch (data[0].pm10Grade) {
+            case '1' :
+                emoji.innerHTML = '😀';
+                dustTop.style.background = 'linear-gradient(to top, white, #6096D8)';
+                break;
+            case '2' :
+                emoji.innerHTML = '🙂';
+                dustTop.style.background = 'linear-gradient(to top, white, #088A68)';
+                break;
+            case '3' :
+                emoji.innerHTML = '😷';
+                dustTop.style.background = 'linear-gradient(to top, white, #FAAC58)';
+                break;
+            case '4' :
+                emoji.innerHTML = '😱';
+                dustTop.style.background = 'linear-gradient(to top, white, #FA5858)';
+                break;
+            default :
+                emoji.innerHTML = '';
+                break;
+        }
+
+        gradeText.innerHTML = data[0].pmMessage;
+        dustValue.innerHTML = data[0].pm10Value;
+
 }
diff --git a/FE/js/dust/dustUtil.js b/FE/js/dust/dustUtil.js
@@ -1,5 +1,6 @@
 import { $ } from "../common/util.js";
 
 export const TARGET = {
-    location: $('.dust-location')
+    location: $('.dust-location'),
+    graphUl: $('.dust-graph-ul')
 }
diff --git a/FE/style/dust.css b/FE/style/dust.css
@@ -43,7 +43,7 @@ html::-webkit-scrollbar {
 }
 
 /* Phone Device */
-@media all and (min-width:375px) {
+@media (min-width:375px) and (max-width: 575px) {
 
     body {
         text-align: center;
@@ -63,5 +63,13 @@ html::-webkit-scrollbar {
         align-items: center;
         font-size: 1rem;
     }
+
+    .dust-graph-ul {
+        list-style: none;
+    }
+
+    .dust-graph-ul > li > div {
+        text-align: right;
+    }
 
 }
diff --git a/FE/view/index.html b/FE/view/index.html
@@ -27,7 +27,7 @@ <h1>미세먼지 앱</h1>
                             <div class="dust-level-concentration">
                                 <span class="dust-level-value"></span><span> ㎍/m³</span>
                             </div>
-                            <div class="dust-time"></div>
+                            <div class="dust-level-time"></div>
                         </div>
                     </div>
                     <div class="dust-station">
@@ -36,7 +36,8 @@ <h1>미세먼지 앱</h1>
                     </div>
                 </div>
                 <div class="dust-graph">
-
+                    <ul class="dust-graph-ul">
+                    </ul>
                 </div>
             </div>
             <div class="dust-forecast">