index.htmlを以下のようにする 、 これだとhttp-serverでlocalhostでは
/?id=...をうけつけるがfc2 homepageではうけつかんようだ listup,addはOKだった
firebase hostingではどげんかな。。。。
<html><head>
<script src="https://www.gstatic.com/firebasejs/4.1.3/firebase.js"></script>
<script> // Import the functions you need from the SDKs you need
const firebaseConfig = {
apiKey: "AIzaSyCcIW92ehZDJSAAJylBZGeeviyYtCPqous",
authDomain: "my-nodejs-e9414.firebaseapp.com",
databaseURL: "https://my-nodejs-e9414-default-rtdb.firebaseio.com",
projectId: "my-nodejs-e9414",
storageBucket: "my-nodejs-e9414.firebasestorage.app",
messagingSenderId: "64417285110",
appId: "1:64417285110:web:41cac867f805aec2c07dd7",
measurementId: "G-K0E78VTKBB"
};
firebase.initializeApp(firebaseConfig);
var database = firebase.database();
var people = database.ref('people/');
var params = new URLSearchParams(window.location.search);
var id_value = params.get('id');
getPeople(); // prototype
getById(id_value); // prototype
console.log(id_value);
function onloaded(){
getPeople();
}
function getPeople(){
people.on('value', (snapshot) => {
let data = snapshot.val();
let result = "";
for(let i in data){
let person = data[i];
result += '<tr><td>' + person.name + '</td><td>[' +
person.mail + ',' + person.age + 'yo]</td><td> id='
+ i + '</td></tr></br>';
}
document.querySelector('#list').innerHTML = result;
});
}
function getById(id){
people.child(id).on('value', (snapshot) => {
let data = snapshot.val();
console.log(data);
document.querySelector('#name').value = data.name;
document.querySelector('#mail').value = data.mail;
document.querySelector('#age').value = data.age;
}); // id部分のみの更新となる
}
function doAction(){
let nm = document.querySelector('#name').value;
let ml = document.querySelector('#mail').value;
let ag = document.querySelector('#age').value;
console.log(nm);
console.log(ml);
console.log(ag);
let val = {
'name':nm,
'mail':ml,
'age':ag
};
var person = people.child(id_value);
person.set(val);
}
</script>
</head>
<body>
<h1>Sample Page</h1>
<h2 id="msg"></h2>
<table>
<tr>
<th>Name</th>
<td><input type="text" id="name"></td>
</tr>
<tr>
<th>Mail</th>
<td><input type="text" id="mail"></td>
</tr>
<tr>
<th>Age</th>
<td><input type="text" id="age"></td>
</tr>
<tr>
<th></th>
<td><button onClick="doAction()">Updatte</button></td>
</tr>
</table>
<hr>
<h1>latest datas</h1>
<ol id="list">wait...</ol>
</body>
</html>
