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
| // 索引
var nextkey = 0;
// 初始化 firebase
var config = {
apiKey: "",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: ""
};
firebase.initializeApp(config);
var database = firebase.database();
// 新增
database.ref('Users').on('child_added', function (data) {
add_data_table(data.val().username, data.val().profile_picture, data.val().email, data.key);
var lastkey = data.key;
nextkey = parseInt(lastkey) + 1;
});
// 修改
database.ref('Users').on('child_changed', function (data) {
update_data_table(data.val().username, data.val().profile_picture, data.val().email, data.key)
});
// 刪除
database.ref('Users').on('child_removed', function (data) {
remove_data_table(data.key)
});
function add_data_table(name, pic, email, key) {
$("#card-list").append('<div class="column is-3" id="' + key + '"><div class="card"><div class="card-image"><figure class="image is-4by3"><img src="' + pic + '"></figure></div><div class="card-content"><div class="media"><div class="media-content"><p class="title is-4">' + name + '</p><p class="subtitle is-6">@' + email + '</p></div></div></div><footer class="card-footer"><a href="#" data-key="' + key + '" class="card-footer-item btnEdit">Edit</a><a href="#" class="card-footer-item btnRemove" data-key="' + key + '">Remove</a></footer></div></div>');
}
function update_data_table(name, pic, email, key) {
$("#card-list #" + key).html('<div class="card"><div class="card-image"><figure class="image is-4by3"><img src="' + pic + '"></figure></div><div class="card-content"><div class="media"><div class="media-content"><p class="title is-4">' + name + '</p><p class="subtitle is-6">@' + email + '</p></div></div></div><footer class="card-footer"><a href="#" class="card-footer-item btnEdit" data-key="' + key + '">Edit</a><a data-key="' + key + '" href="#" class="card-footer-item btnRemove">Remove</a></footer></div>');
}
function remove_data_table(key) {
$("#card-list #" + key).remove();
}
function new_data(name, email, pic, key) {
database.ref('Users/' + key).set({
username: name,
email: email,
profile_picture: pic
});
}
function update_data(name, email, pic, key) {
database.ref('Users/' + key).update({
username: name,
email: email,
profile_picture: pic
});
}
$("#btnAdd").click(function () {
$("#txtName").val("");
$("#txtEmail").val("");
$("#txtPic").val("");
$("#txtType").val("N");
$("#txtKey").val("0");
$("#modal").addClass("is-active");
});
$("#btnSave").click(function () {
if ($("#txtType").val() == 'N') {
database.ref('Users').once("value").then(function (snapshot) {
if (snapshot.numChildren() == 0) {
nextkey = 1;
}
new_data($("#txtName").val(), $("#txtEmail").val(), $("#txtPic").val(), nextkey);
});
} else {
update_data($("#txtName").val(), $("#txtEmail").val(), $("#txtPic").val(), $("#txtKey").val());
}
$("#btnClose").click();
});
$(document).on("click", ".btnEdit", function (event) {
event.preventDefault();
key = $(this).attr("data-key");
database.ref('Users/' + key).once("value").then(function (snapshot) {
$("#txtName").val(snapshot.val().username);
$("#txtEmail").val(snapshot.val().email);
$("#txtPic").val(snapshot.val().profile_picture);
$("#txtType").val("E");
$("#txtKey").val(key);
});
$("#modal").addClass("is-active");
});
$(document).on("click", ".btnRemove", function (event) {
event.preventDefault();
key = $(this).attr("data-key");
database.ref('Users/' + key).remove();
})
$("#btnClose,.btnClose").click(function () {
$("#modal").removeClass("is-active");
});
|
