add get info and save it

이재호
Commit 5d32c9d47bee178719eb8ef66af7484be02c0fd8 5d32c9d4 1 parent 69d4b4a8
Showing 1 changed file with 58 additions and 4 deletions
views/index.ejs
--- a/views/index.ejs
View file @5d32c9d
+++ b/views/index.ejs
View file @5d32c9d
@@ -3,6 +3,58 @@
   <head>
     <title><%= title %></title>
     <link rel='stylesheet' href='/stylesheets/style.css' />
+        <!-- Jquery를 불러온다 -->
+        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
+        <script>
+            var place = prompt("위치를 입력해 주세요. ex) 전자정보대학", ""); //위치 정보를 입력 받는다.
+            alert(place + '(으)로 설정되었습니다.');
+            var fileName = place + '.txt'; // 위치를 파일 이름으로 쓰기 위함.
+    
+            var nameArr = []; // 이름을 저장할 배열
+            var numArr = []; // 전화번호를 저장할 배열
+            var idArr = []; // 신분을 저장할 배열
+            var dayTimeArr = []; // 날짜와 시간을 저장할 배열
+    
+            function getDayTime() // 날짜와 시간을 구해주는 함수
+            {
+                var today = new Date();
+                var day = today.toLocaleDateString(); //년도.월.날짜
+                var time = today.toLocaleTimeString(); //시:분:초
+                return (day + ' ' + time);
+            };
+    
+            function getInfo() // 입력받은 데이터를 배열에 저장한다.
+            {
+                var temp_name = document.getElementById('name').value; 
+                var temp_num = document.getElementById('number').value;
+                var id_index = document.getElementById('identity');
+                var temp_id = id_index.options[id_index.selectedIndex].value;
+                var dateTime = getDayTime();
+                nameArr.push(temp_name);
+                console.log(nameArr);
+                numArr.push(temp_num);
+                console.log(numArr);
+                idArr.push(temp_id);
+                console.log(idArr);
+                dayTimeArr.push(dateTime);
+                console.log(dayTimeArr);
+    
+            };
+    
+            function save() // 배열에 저장한 데이터를 가공해 json파일의 형태로 만들고, 다운로드 링크를 생성한다.
+            {
+                var obj = new Object();
+                for (var i = 0; i< nameArr.length; i++)
+                {
+                    obj[nameArr[i]] = {"전화번호": numArr[i], "신분": idArr[i], "일시": dayTimeArr[i]};
+                }
+                var obj_s = JSON.stringify(obj, null, "\t"); //json text화 시키기.
+                var dataUri = "data:application/json;charset=utf-8,"+ encodeURIComponent(obj_s);// 파일 링크 생성
+                var link = $("#link").attr("href", dataUri); 
+                console.log('Save Complete');
+                document.getElementById('link').setAttribute('download', fileName); // 다운로드 전 파일 이름을 변경해준다.
+            };
+        </script>
   </head>
   <body>
     <h1><%= title %></h1>
@@ -25,20 +77,22 @@
         <fieldset style = "width:600px">
             <legend>방문자 인적 사항</legend>
             이름:
-            <input type='text' name='name' style="width:70px" required/>&nbsp;
+            <input type='text' id='name' style="width:70px" required/>&nbsp;
             전화번호:
-            <input type='text' name='number' style="width:250px" placeholder="XXX-XXXX-XXXX 형식으로 입력하세요." required/>&nbsp;
+            <input type='text' id='number' style="width:250px" placeholder="XXX-XXXX-XXXX 형식으로 입력하세요." required/>&nbsp;
             <div style="display:inline">신분:</div>
-            <select name = "id" style="width: 50;">
+            <select id = "identity" style="width: 50;">
                 <option value = "재학생">재학생</option>
                 <option value = "휴학생">휴학생</option>
                 <option value = "직원">직원</option>
                 <option value = "외부인">외부인</option>
             </select><br><br>
-            <input type = "submit" value = "제출"/>&nbsp;
+            <button type="button" onclick="getInfo();">제출</button> 
             <input  type = "reset" value = "다시입력"/>
         </fieldset> 
     </form>
+    <button type="button" onclick="save();">저장</button>
+    <a href="#" id="link" download="name">다운로드</a>
     <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@0.8/dist/teachablemachine-image.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>