MWD / 2020-02-OSS-TermProject

Go to a project
Toggle navigation Toggle navigation pinning
이재호
915eacfc 2 parents 153ce7a3 5d32c9d4

Merge branch 'feature/save_info' into 'master' 

Feature/save info

Implementing the ability to enter and store user's personal information

See merge request !3
Inline Side-by-side
Showing 1 changed file with 72 additions and 0 deletions
...@@ -3,6 +3,58 @@ ...@@ -3,6 +3,58 @@
3 <head> 3 <head>
4 <title><%= title %></title> 4 <title><%= title %></title>
5 <link rel='stylesheet' href='/stylesheets/style.css' /> 5 <link rel='stylesheet' href='/stylesheets/style.css' />
6 + <!-- Jquery를 불러온다 -->
7 + <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
8 + <script>
9 + var place = prompt("위치를 입력해 주세요. ex) 전자정보대학", ""); //위치 정보를 입력 받는다.
10 + alert(place + '(으)로 설정되었습니다.');
11 + var fileName = place + '.txt'; // 위치를 파일 이름으로 쓰기 위함.
12 +
13 + var nameArr = []; // 이름을 저장할 배열
14 + var numArr = []; // 전화번호를 저장할 배열
15 + var idArr = []; // 신분을 저장할 배열
16 + var dayTimeArr = []; // 날짜와 시간을 저장할 배열
17 +
18 + function getDayTime() // 날짜와 시간을 구해주는 함수
19 + {
20 + var today = new Date();
21 + var day = today.toLocaleDateString(); //년도.월.날짜
22 + var time = today.toLocaleTimeString(); //시:분:초
23 + return (day + ' ' + time);
24 + };
25 +
26 + function getInfo() // 입력받은 데이터를 배열에 저장한다.
27 + {
28 + var temp_name = document.getElementById('name').value;
29 + var temp_num = document.getElementById('number').value;
30 + var id_index = document.getElementById('identity');
31 + var temp_id = id_index.options[id_index.selectedIndex].value;
32 + var dateTime = getDayTime();
33 + nameArr.push(temp_name);
34 + console.log(nameArr);
35 + numArr.push(temp_num);
36 + console.log(numArr);
37 + idArr.push(temp_id);
38 + console.log(idArr);
39 + dayTimeArr.push(dateTime);
40 + console.log(dayTimeArr);
41 +
42 + };
43 +
44 + function save() // 배열에 저장한 데이터를 가공해 json파일의 형태로 만들고, 다운로드 링크를 생성한다.
45 + {
46 + var obj = new Object();
47 + for (var i = 0; i< nameArr.length; i++)
48 + {
49 + obj[nameArr[i]] = {"전화번호": numArr[i], "신분": idArr[i], "일시": dayTimeArr[i]};
50 + }
51 + var obj_s = JSON.stringify(obj, null, "\t"); //json text화 시키기.
52 + var dataUri = "data:application/json;charset=utf-8,"+ encodeURIComponent(obj_s);// 파일 링크 생성
53 + var link = $("#link").attr("href", dataUri);
54 + console.log('Save Complete');
55 + document.getElementById('link').setAttribute('download', fileName); // 다운로드 전 파일 이름을 변경해준다.
56 + };
57 + </script>
6 </head> 58 </head>
7 <body> 59 <body>
8 <h1><%= title %></h1> 60 <h1><%= title %></h1>
...@@ -21,6 +73,26 @@ ...@@ -21,6 +73,26 @@
21 <!--auto play 기능을 위해 iframe 사용 --> 73 <!--auto play 기능을 위해 iframe 사용 -->
22 <iframe src="/audios/4.mp3" allow="autoplay" id="audio" style="display:none"></iframe> 74 <iframe src="/audios/4.mp3" allow="autoplay" id="audio" style="display:none"></iframe>
23 </div> 75 </div>
76 + <form>
77 + <fieldset style = "width:600px">
78 + <legend>방문자 인적 사항</legend>
79 + 이름:
80 + <input type='text' id='name' style="width:70px" required/>&nbsp;
81 + 전화번호:
82 + <input type='text' id='number' style="width:250px" placeholder="XXX-XXXX-XXXX 형식으로 입력하세요." required/>&nbsp;
83 + <div style="display:inline">신분:</div>
84 + <select id = "identity" style="width: 50;">
85 + <option value = "재학생">재학생</option>
86 + <option value = "휴학생">휴학생</option>
87 + <option value = "직원">직원</option>
88 + <option value = "외부인">외부인</option>
89 + </select><br><br>
90 + <button type="button" onclick="getInfo();">제출</button>
91 + <input type = "reset" value = "다시입력"/>
92 + </fieldset>
93 + </form>
94 + <button type="button" onclick="save();">저장</button>
95 + <a href="#" id="link" download="name">다운로드</a>
24 <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js"></script> 96 <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js"></script>
25 <script src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@0.8/dist/teachablemachine-image.min.js"></script> 97 <script src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@0.8/dist/teachablemachine-image.min.js"></script>
26 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 98 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
......