-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathJustDo.html
163 lines (150 loc) · 5.88 KB
/
JustDo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="
position: absolute;
top: 35%;
left: 40%;" id="Login">
<form>
<table>
<tr>
<td>
<h2>Login</h2>
</td>
<td><button id="Send" style="margin-left: 1%;" type="button">Send</button></td>
</tr>
<tr>
<td><label for="Email">Email</label></td>
<td><input type="email" id="Email"></td>
</tr>
<tr>
<td><label for="Password">Password</label></td>
<td><input onkeyup="SignIn()" type="password" id="Password"></td>
</tr>
</table>
</form>
</div>
<div style="display:none;" id="SetData">
<form>
<table>
<tr>
<td>
<h2>SetData</h2>
</td>
<td><button id="Set" style="margin-left: 1%;" type="button">Set</button></td>
</tr>
</table>
<textarea placeholder="請輸入 JSON 格式..." id="Data" rows="4" cols="20"></textarea>
</form>
<h2>實時數據</h2>
<p id="RealtimeData"></p>
</div>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-database.js"></script>
<!-- Add Firebase products that you want to use -->
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-firestore.js"></script>
<script src="/Environment.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script>
// 初始化 Firebase
var db = FireBaseBuilder()();
$("#Send").on("click", function() {
SignIn();
});
function SignIn() {
// https://codertw.com/%E5%89%8D%E7%AB%AF%E9%96%8B%E7%99%BC/288706/
// https://www.w3schools.com/howto/howto_js_trigger_button_enter.asp
console.log(event);
if (event.keyCode == 13 || event.type == "click") {
let email = $("#Email").val();
console.log(email);
let password = $("#Password").val();
console.log(password);
firebase.auth().signInWithEmailAndPassword(email, password)
.then(() => {
CheckSignedIn();
})
.catch((error) => {
// `在註冊時，記得一定要有 catch 來處理錯誤，因為 Firebase 會檢查 Email 是否符合格式、或是密碼長度是否足夠...等等。`
console.log(error.message);
alert(error.message);
});
}
}
// 確認登入狀態
function CheckSignedIn() {
console.log("CheckSignedIn");
var user = firebase.auth().currentUser
console.log(user);
if (user != null) {
// User is signed in.
console.log("success");
$("#Login").attr("style", "display:none");
$("#SetData").attr("style", "position: absolute;top: 35%;left: 40%;display:block");
} else {
// No user is signed in.
}
}
// 實時確認登入狀態
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// User is signed in.
$("#Login").attr("style", "display:none");
$("#SetData").attr("style", "position: absolute;top: 35%;left: 40%;display:block");
// 取得資料渲染
db.ref("data").on('value', function(snapshot) {
var data = snapshot.val();
console.log(data);
$("#RealtimeData").text(JSON.stringify(data));
});
} else {
// No user is signed in.
$("#Login").attr("style", "position: absolute;top: 35%;left: 40%;display:block");
$("#SetData").attr("style", "display:none");
}
});
// 儲存資料
$("#Set").on("click", function() {
SetData();
});
function SetData() {
var val = $("#Data").val();
console.log(val);
if (val != "") {
var data = JSON.parse(val);
db.ref("/data").set(data)
.then(function() {
alert("建立成功");
}).catch(function() {
alert("伺服器發生錯誤，請稍後再試");
});
}
}
//跳出視窗前詢問框(必須有對 window 做動作)
window.onbeforeunload = function(event) {
var event = event || window.event;
if (event) {
event.returnValue = '確定?';
}
SetData();
firebase.auth().signOut().then(function() {
var user = firebase.auth().currentUser;
if (user == null) {
alert(確認已登出);
}
})
return '確定?';
}
</script>
</body>
</html>