Merge branch 'master' into 'master'

데이터 전송 안되는것 수정, 그래프 추가 데이터 전송 안되는것 수정, 그래프 추가 See merge request !8

Merge branch 'master' into 'master'
데이터 전송 안되는것 수정, 그래프 추가 데이터 전송 안되는것 수정, 그래프 추가 See merge request !8
김윤지
Commit 7e537c4526e8bb13d333076ac364f655c9675870 7e537c45 2 parents ea17df59 b8042ec6
Showing 8 changed files with 193 additions and 133 deletions
.gitignore
keys/api_option.js
keys/api_option_traffic.js
keys/db_option_total.js
lib/socketio.js
routes/index.js
views/index.ejs
views/main.ejs
--- a/.gitignore
View file @7e537c4
+++ b/.gitignore
View file @7e537c4
@@ -39,6 +39,7 @@ build/Release
 # Dependency directories
 node_modules/
 jspm_packages/
+keys/
 # TypeScript v1 declaration files
 typings/
--- a/keys/api_option.js deleted 100644 → 0
View file @ea17df5
+++ b/keys/api_option.js deleted 100644 → 0
View file @ea17df5
-module.exports = {
-    key: "aaaa"
-}
-//개인 Server Key 받아서 사용해야함, Browser key 안됨
\ No newline at end of file
--- a/keys/api_option_traffic.js deleted 100644 → 0
View file @ea17df5
+++ b/keys/api_option_traffic.js deleted 100644 → 0
View file @ea17df5
-module.exports = {
-    key: "aaaa"
-}
--- a/keys/db_option_total.js deleted 100644 → 0
View file @ea17df5
+++ b/keys/db_option_total.js deleted 100644 → 0
View file @ea17df5
-module.exports = {
-    host: 'localhost',
-    user: 'root',
-    password: 'Serrmica0!',
-    database: 'db_option_total'
-}
\ No newline at end of file
--- a/lib/socketio.js
View file @7e537c4
+++ b/lib/socketio.js
View file @7e537c4
@@ -4,8 +4,8 @@ const secret_key_traffic = require('../keys/api_option_traffic').key;
 const requesting = require('request');
-const lat = "37.54922931758";//"37.239795"; //weather 위도
+const lat = "37.54922931758"; //weather 위도
-const lon = "126.913415969472";//"127.083240"; //weather 경도
+const lon = "126.913415969472"; //weather 경도
 const sido_num = "11"; //traffic 법정동 시도 코드
 const gugun_num = "440"; //traffic 법정동 시군구 코드 - 합정동 일대
 const search_year = "2018074"; //traffic 검색을 원하는 연도
@@ -42,17 +42,18 @@ module.exports = (server, app) => {
                 json: true
             },
                 //api에게 응답 받았을때 실행되는 callback function
-                function (err, api_res, api_body) {
+                function (err1, api_res1, api_body1) {
                     //err 존재시 promise reject 호출
-                    if (err) reject(err);
+                    if (err1) reject(err1);
                     // api의 response이 있을경우 promise resolve 호출
-                    if (api_res) {
+                    if (api_res1) {
                         console.log("calling weather api");
-                        resolve(api_body);
+                        resolve(api_body1);
                     }
                 });
-        })
+
+        }) //Promise
     }
@@ -63,12 +64,6 @@ module.exports = (server, app) => {
             requesting.get({
                 // api를 요청할 주소 -- 시크릿키,위도,경도 입력
                 url: `http://apis.data.go.kr/B552061/${cate1}/${cate2}?ServiceKey=${secret_key_traffic}&searchYearCd=${search_year}&siDo=${sido_num}&guGun=${gugun_num}&type=json&numOfRows=1&pageNo=1`,
-                //나중에 삭제 http://apis.data.go.kr/B552061/frequentzoneLg/getRestFrequentzoneLg?ServiceKey=XOLqI9tY4gVCdk1i2BoOM3EYmSUYqt8WlXUfIDSfD4RnNBrFwwthbNAtGOxoskP540JbUAzcnuABsydoE2U2dA%3D%3D&searchYearCd=2017&siDo=11&guGun=200&type=json&numOfRows=10&pageNo=1
-                //나중에 삭제 http://apis.data.go.kr/B552061/frequentzoneLg/getRestFrequentzoneLg?ServiceKey=XOLqI9tY4gVCdk1i2BoOM3EYmSUYqt8WlXUfIDSfD4RnNBrFwwthbNAtGOxoskP540JbUAzcnuABsydoE2U2dA%3D%3D&searchYearCd=2018074&siDo=11&guGun=440&type=json&numOfRows=10&pageNo=1
-                //sido = 11 gugun = 440 (마포구 합정동, 도화동, 도화동)
-                //cate1 = frequentzoneLg
-                //cate2 = getRestFrequentzoneLg
-                //xml: true
                 json: true
             },
                 //api에게 응답 받았을때 실행되는 callback function
@@ -82,20 +77,26 @@ module.exports = (server, app) => {
                         resolve(api_body);
                     }
                 });
-        })
+        }) //Promise
     }
     const API_bundle = async () => {
-
         try {
+            var order = 0;
+            while (order < 2) {
+                switch (order) {
+                    case 0:
+                        console.log("APIWait - WAITING FOR ALL API");
                         Current_Weather = await req_API("current", "minutely"); //현재날씨 (분별) //when, what
                         Sensible_T = await req_API("index", "wct"); //체감온도
                         Heat_index = await req_API("index", "heat"); //열지수
                         Discomport_index = await req_API("index", "th"); //불쾌지수
                         Ultra_Violet_index = await req_API("index", "uv"); //자외선지수
-
                         Current_TrafficAcc = await req_API_traffic("frequentzoneLg", "getRestFrequentzoneLg"); //cate1, cate2                               
-
+                        order = 1;
+                        break;
+                    case 1:
+                        console.log("APIDataProcess - CALLING INFO");
                         info = {
                             heat: Heat_index.weather.wIndex.heatIndex[0].current.index, //열지수
                             sensible_temperature: Sensible_T.weather.wIndex.wctIndex[0].current.index, //체감온도
@@ -180,6 +181,13 @@ module.exports = (server, app) => {
                         db_total.query(sql, [client_send.time, client_send.wind, client_send.temperature, client_send.rain, client_send.death, client_send.trafficdeath, client_send.mhurt, client_send.lhurt, client_send.occurence], (err, result) => {
                             if (err) console.log(err);
                         })
+                        order = 2;
+                        break;
+                    default:
+                        order = 3;
+                        break;
+                }//switch
+            }; //while
         } catch (err) {  //promise err or try err catch
             console.log("================Error Occured !!================\n", err);
--- a/routes/index.js
View file @7e537c4
+++ b/routes/index.js
View file @7e537c4
@@ -4,7 +4,7 @@ var db = require('../lib/db_total');
 /* GET home page. */
-router.post('/starting' , (req,res) => {
+router.post('/starting', (req, res) => {
     res.redirect(`/name/${req.body.name}/birth/${req.body.birth}`);
 })
 router.get('/name/:name/birth/:birth', (req, res) => {
@@ -23,10 +23,10 @@ router.get('/name/:name/birth/:birth', (req, res) => {
     const birth = req.params.birth;
     //const address = req.params.address;
     ////////////////////////////////////////
-    var deathArr = new Array();
+    var tdeathArr = new Array(); //사망자수
-    var mhurtArr = new Array();
+    var mhurtArr = new Array(); //중상자수
-    var lhurtArr = new Array();
+    var lhurtArr = new Array(); //경상자수
-    var occurArr = new Array();
+    var occurArr = new Array(); //총 발생수
     ////////////////////////////////////////
@@ -48,7 +48,7 @@ router.get('/name/:name/birth/:birth', (req, res) => {
                     wsArr.unshift(rows[i].wind);
                     rainArr.unshift(rows[i].rain);
                     ////
-                    deathArr.unshift(rows[i].tdeath);
+                    tdeathArr.unshift(rows[i].tdeath);
                     mhurtArr.unshift(rows[i].mhurt);
                     lhurtArr.unshift(rows[i].lhurt);
                     occurArr.unshift(rows[i].occurence);
@@ -71,7 +71,7 @@ router.get('/name/:name/birth/:birth', (req, res) => {
                 dataLen,
                 name,
                 birth,
-                deathArr,
+                tdeathArr,
                 mhurtArr,
                 lhurtArr,
                 occurArr
--- a/views/index.ejs
View file @7e537c4
+++ b/views/index.ejs
View file @7e537c4
@@ -3,12 +3,10 @@
 <head>
   <!-- font -->
   <link href="https://fonts.googleapis.com/css?family=Nanum+Brush+Script&amp;subset=korean" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/css?family=Yeon+Sung&amp;subset=korean" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css?family=Do+Hyeon&display=swap" rel="stylesheet">
-
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>Highcharts Example</title>
-
   <style type="text/css">
   html {
   margin: 0;
@@ -17,10 +15,9 @@
     body {
       margin: 0;
       padding: 0;
-
       /* background: linear-gradient( to bottom, #65799B, rgb(38, 14, 41) ); */
       /* background-color:#65799B; */
-      /* background-image: url("2.jpg");
+      /* background-image: url("2.jpg"); */
       background-repeat: no-repeat;
       background-size: cover; */
     }
@@ -29,20 +26,15 @@
       top: 0;
       width: 100%;
     }
-
   </style>
 </head>
-
 <body>
   <script src="highcharts.js"></script>
   <script src="modules/exporting.js"></script>
   <script src="modules/export-data.js"></script>
-
   <img src="images/newbackground.png" alt="" style="z-index:-1; min-width: 100%; min-height: 100%">
-
   <div id="banner">
         <div id="container1" style="width:1260px; height: 400px; margin: 0 auto;"></div>
-
   <div style="width:1275px;  margin:0 auto;">
     <div style="display: inline-block;">
       <div id="container2" style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"></div>
@@ -50,12 +42,13 @@
     <div style="display: inline-block;">
       <div id="container3" style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"></div>
     </div>
-
     <div style="display: inline-block;">
       <div id="container4" style="width:400px; height: 300px; padding:0; margin-left:0px;"></div>
     </div>
+	<div style="display: inline-block;">
+      <div id="container5" style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"></div>
+    </div>
   </div>
-
   <script src="/socket.io/socket.io.js"></script>
   <script type="text/javascript">
       let client_data = {
@@ -63,7 +56,6 @@
       name: "<%=name%>"
     }
-
     var chart1 = Highcharts.chart("container1", {
       chart: {
         type: "spline",
@@ -75,25 +67,22 @@
         //     var series = this.series[0];
         //     setInterval(function () {
         //       var x = new Date().getTime(), // 현재 시간
-        //         y = Math.random(); //여기에 새로 넣을 값
+        //         y = Math.random(); //여기에 새로 넣을 값(실시간 사망률)
         //       series.addPoint({x:x,y:y,color:"#FFE08C"}, true, true);
         //     }, 1000); //1000=1초 -> 1분=60000
         //   }
         // },
-
         backgroundColor: "rgba(255, 255, 255, 0.0)"
       },
-
       time: {
         useUTC: false
       },
-
       title: {
         text: "<%=name%>님의 실시간 사망 확률",
         style: {
           color: "#FFFFFF",
-          fontWeight: "bold",
+          //fontWeight: "bold",
-          fontFamily: 'Yeon Sung',
+          fontFamily: 'Do Hyeon',
           fontSize:'32px'
         }
       },
@@ -113,7 +102,6 @@
             color: "white"
           }
         },
-
         plotLines: [
           {
             value: 0,
@@ -126,7 +114,6 @@
               color: "white"
             }
           }
-
       },
       tooltip: {
         headerFormat: "<b>{series.name}</b><br/>",
@@ -148,7 +135,6 @@
       exporting: {
         enabled: false
       },
-
 plotOptions: {
         series: {
             marker: {
@@ -156,7 +142,6 @@ plotOptions: {
             }
         }
     },
-
         series: [
           {
             name: "사망률",
@@ -173,11 +158,9 @@ plotOptions: {
                 })
                 i++;
               }
-
               <% probArr.forEach((probArr) => {%>
                 var temp;
                 temp = <%=probArr %>;
-
                 // for(;j<10;j++)
                 // {
                 //   deathArr.push({
@@ -186,25 +169,18 @@ plotOptions: {
                 // }) 
                 // i++;
                 // }
-
                 deathArr.push({
                   x: time + i * 60000,
                   y: temp
                 })
                 i++;
-
               <%}) %>
-
               return deathArr;
             })(),
-
             color: "#FFFFFF"
           }
         ]
-
     });
-
-
     var chart2 = Highcharts.chart("container2", {
       chart: {
         type: "spline",
@@ -221,23 +197,19 @@ plotOptions: {
         //     }, 3000); //1000=1초
         //   }
         // },
-
         backgroundColor: "rgba(255, 255, 255, 0.0)"
       },
-
       time: {
         useUTC: false
       },
-
       title: {
         text: "기온",
         style: {
           color: "#FFFFFF",
-          fontWeight: "bold",
+          //fontWeight: "bold",
-          fontFamily: 'Yeon Sung',
+          fontFamily: 'Do Hyeon',
           fontSize:'25px'
         }
-
       },
       xAxis: {
         type: "datetime",
@@ -267,7 +239,6 @@ plotOptions: {
               color: "white"
             }
           }
-
       },
       tooltip: {
         headerFormat: "<b>{series.name}</b><br/>",
@@ -305,11 +276,9 @@ plotOptions: {
                 })
                 i++;
               }
-
               <% ptArr.forEach((ptArr) => {%>
                 var temp;
                 temp = <%=ptArr %>;
-
                 // for(j;j<10;j++)
                 // {
                 //   tempArr.push({
@@ -318,23 +287,18 @@ plotOptions: {
                 // }) 
                 // i++;
                 // }
-
                 tempArr.push({
                   x: time + i * 60000,
                   y: temp
                 })
                 i++;
-
               <%}) %>
-
               return tempArr;
             })(),
-
             color: "#FFE08C"
           }
         ]
     });
-
     var chart3 = Highcharts.chart("container3", {
       chart: {
         type: "spline",
@@ -353,17 +317,15 @@ plotOptions: {
         // },
         backgroundColor: "rgba(255, 255, 255, 0.0)"
       },
-
       time: {
         useUTC: false
       },
-
       title: {
         text: "풍속",
         style: {
           color: "#FFFFFF",
-          fontWeight: "bold",
+          //fontWeight: "bold",
-          fontFamily: 'Yeon Sung',
+          fontFamily: 'Do Hyeon',
           fontSize:'25px'
         }
       },
@@ -395,7 +357,6 @@ plotOptions: {
               color: "white"
             }
           }
-
       },
       tooltip: {
         headerFormat: "<b>{series.name}</b><br/>",
@@ -433,11 +394,9 @@ plotOptions: {
                 })
                 i++;
               }
-
               <% wsArr.forEach((wsArr) => {%>
                 var temp;
                 temp = <%=wsArr %>;
-
                 // for(j;j<10;j++)
                 // {
                 //   windArr.push({
@@ -446,22 +405,17 @@ plotOptions: {
                 // }) 
                 // i++;
                 // }
-
                 windArr.push({
                   x: time + i * 60000,
                   y: temp
                 })
                 i++;
-
               <%}) %>
-
               return windArr;
             })(),
-
             color: "#FFE08C"
           }
         ]    });
-
     var chart4 = Highcharts.chart("container4", {
       chart: {
         type: "spline",
@@ -480,17 +434,15 @@ plotOptions: {
         // },
         backgroundColor: "rgba(255, 255, 255, 0.0)"
       },
-
       time: {
         useUTC: false
       },
-
       title: {
         text: "강수량",
         style: {
           color: "#FFFFFF",
-          fontWeight: "bold",
+          //fontWeight: "bold",
-          fontFamily: 'Yeon Sung',
+          fontFamily: 'Do Hyeon',
           fontSize:'25px'
         }
       },
@@ -522,7 +474,6 @@ plotOptions: {
               color: "white"
             }
           }
-
       },
       tooltip: {
         headerFormat: "<b>{series.name}</b><br/>",
@@ -560,11 +511,9 @@ plotOptions: {
                 })
                 i++;
               }
-
               <% rainArr.forEach((rainArr) => {%>
                 var temp;
                 temp = <%=rainArr %>;
-
                 // for(j;j<10;j++)
                 // {
                 //   rainArr.push({
@@ -573,32 +522,141 @@ plotOptions: {
                 // }) 
                 // i++;
                 // }
-
                 rainArr.push({
                   x: time + i * 60000,
                   y: temp
                 })
                 i++;
-
               <%}) %>
-
               return rainArr;
             })(),
             color: "#FFE08C"
-
           }
         ]
-
-
     });
+	var chart5 = Highcharts.chart("container5", {
+      chart: {
+        type: "spline",
+        animation: Highcharts.svg, // don't animate in old IE
+        marginRight: 10,
+        // events: {
+        //   load: function () {
+        //     // set up the updating of the chart each second
+        //     var series = this.series[0];
+        //     setInterval(function () {
+        //       var x = new Date().getTime(), // 현재 시간
+        //         y = Math.random(); //
+        //       series.addPoint([x, y], true, true);
+        //     }, 3000); //1000=1초
+        //   }
+        // },
+        backgroundColor: "rgba(255, 255, 255, 0.0)"
+      },
+      time: {
+        useUTC: false
+      },
+      title: {
+        text: "교통사고",
+        style: {
+          color: "#FFFFFF",
+          //fontWeight: "bold",
+          fontFamily: 'Do Hyeon',
+          fontSize:'25px'
+        }
+      },
+      xAxis: {
+        type: "datetime",
+        tickPixelInterval: 150,
+        labels: {
+          style: {
+            color: "white"
+          }
+        }
+      },
+      yAxis: {
+        title: {
+          text: "교통사고발생횟수(번)",
+          style: {
+            color: "white"
+          }
+        },
+        plotLines: [
+          {
+            value: 0,
+            width: 1,
+            color: "#808080"
+          }
+        ],
+        labels: {
+            style: {
+              color: "white"
+            }
+          }
+      },
+      tooltip: {
+        headerFormat: "<b>{series.name}</b><br/>",
+        pointFormat: "{point.x:%Y년%m월%d일 %H시%M분}<br/>의 교통사고 발생 수 : {point.y:.2f}m/s"
+      },
+      legend: {
+        //enabled: false
+        layout: "vertical",
+        align: "left",
+        verticalAlign: "top",
+        x: 100,
+        y: 50,
+        floating: true,
+        borderWidth: 1,
+        backgroundColor:
+          (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
+          "#FFFFFF"
+      },
+      exporting: {
+        enabled: false
+      },
+      series: [
+          {
+            name: "교통사고 발생수",
+            data: (function () {
+              var trafficArr = [], //windArr
+                time = new Date().getTime();
+              var length = <%=dataLen%>;
+              var i = -9;
+              var j = 0;
+              for (j; j < 10 - length; j++) {
+                trafficArr.push({
+                  x: time + i * 60000,
+                  y: 0
+                })
+                i++;
+              }
+              <% occurArr.forEach((occurArr) => {%>
+                var temp;
+                temp = <%=occurArr %>;
+                // for(j;j<10;j++)
+                // {
+                //   trafficArr.push({
+                //   x: time + i * 60000,
+                //   y: temp
+                // }) 
+                // i++;
+                // }
+                trafficArr.push({
+                  x: time + i * 60000,
+                  y: temp
+                })
+                i++;
+              <%}) %>
+              return trafficArr;
+            })(),
+            color: "#FFE08C"
+          }
+        ]    });
     var socket = io.connect('/', { transports: ['websocket'], upgrade: false });
     socket.emit("connection", client_data);
-    socket.on("weatherInfo_minutely_send_to_client", (info) => {  //서버에서 client에게 메세지 전송
+    socket.on("weather_and_traffic_Info_minutely_send_to_client", (info) => {  //서버에서 client에게 메세지 전송
       console.log(info);
-
         var date = new Date().getTime();
-
       chart1.series[0].addPoint({
         x: date,
         y: info.death,
@@ -609,24 +667,23 @@ plotOptions: {
         y: info.temperature*1,
         color:"#FFE08C"
       });
-
       chart3.series[0].addPoint({
         x: date,
         y: info.wind*1,
         color:"#FFE08C"
       });
-
       chart4.series[0].addPoint({
         x: date,
         y: info.rain*1,
         color:"#FFE08C"
       });
-
+	  chart5.series[0].addPoint({
+        x: date,
+        y: info.occurence*1,
+        color:"#FFE08C"
+      });
     });
-
   </script>
   </div>
-
 </body>
-
 </html>
\ No newline at end of file
--- a/views/main.ejs
View file @7e537c4
+++ b/views/main.ejs
View file @7e537c4
-<!DOCTYPE <!DOCTYPE html>
+<!DOCTYPE 
+
+<!DOCTYPE html>
 <html>
-<head>
+  <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <title>Page Title</title>
@@ -9,7 +11,7 @@
       <!-- font -->
       <link href="https://fonts.googleapis.com/css?family=Nanum+Brush+Script&amp;subset=korean" rel="stylesheet">
         <link href="https://fonts.googleapis.com/css?family=Yeon+Sung&amp;subset=korean" rel="stylesheet">
-
+          <link href="https://fonts.googleapis.com/css?family=Do+Hyeon&display=swap" rel="stylesheet">
             <meta name="viewport" content="width=device-width, initial-scale=1">
               <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
               <script src="main.js"></script>
@@ -42,13 +44,14 @@
                     h1 {
                     color: white;
-      font-family: 'Nanum Brush Script', cursive;
+                    font-family: 'Do Hyeon', sans-serif;
+                    //font-family: 'Nanum Brush Script', cursive;
                     }
                     label {
                     color: white;
                     font-size: 20px;
-      font-family: 'Yeon Sung', cursive;
+                    font-family: 'Do Hyeon', sans-serif;
                     }
                     #banner {
@@ -63,37 +66,41 @@
                     width: 100%;
                     height: 50px;
                     text-align: center;
-      font-family: 'Yeon Sung', cursive;
+                    font-family: 'Do Hyeon', sans-serif;
                     color: white;
                     }
                   </style>
-</head>
+                </head>
-<body>
+  <body>
-    <img src="images/background.jpg" alt="" style="z-index:-1; min-width: 100%; min-height: 100%">
+    <img src="images/newbackground.png" alt="" style="z-index:-1; min-width: 100%; min-height: 100%">
       <div id="banner">
         <div style="width:100%; text-align: center; padding-top:170px;">
           <h1 style="font-size:90px;">당신이 지금 죽을 확률은?</h1>
         </div>
-        <br><br><br>
+        <br>
+          <br>
+            <br>
               <div style="width:100%; text-align: center;">
                 <form action="/starting" method="post">
                   <div class="form-inline">
                     <label>이름</label>
-                    <input type="text" name="name" class="form-control" placeholder="김철수" style="width:200px;">
+                    <input type="text" name="name" class="form-control" placeholder="조인화" style="width:200px;">
                       &nbsp &nbsp&nbsp&nbsp
                       <label>생년월일</label>
-                    <input type="text" name="birth" class="form-control" placeholder="971009" style="width:200px;">
+                      <input type="text" name="birth" class="form-control" placeholder="991025" style="width:200px;">
-                    <br><br><br>
+                        <br>
-                    <input type="submit" value="시작하기" class="btn btn-default" style="font-family: 'Yeon Sung', cursive; width:100px;font-weight: bold; font-size: 18px; background-color: white;">
+                          <br>
+                            <br>
+                              <input type="submit" value="시작하기" class="btn btn-default" style="font-family: 'Do Hyeon', sans-serif; width:100px;font-weight: bold; font-size: 18px; background-color: white;">
                 </div>
                 </form>
               </div>
             </div>
-    <div id="footer">오픈소스SW개발 조민지 강환석 배희수</div>
+      <div id="footer">오픈소스SW개발 김주희 김윤지 조인화</div>
-</body>
+    </body>
 </html>
\ No newline at end of file