# #javascript #html #firebase
Вопрос:
Итак, у меня есть этот веб-сайт, подключенный к базе данных Firebase в реальном времени, и я пытаюсь сделать так, чтобы вы могли редактировать информацию, вводя информацию о каждой конкретной карте во входные данные, но сейчас, поскольку все карты имеют одинаковые идентификаторы, так как они находятся в каждой из моей базы данных, я не уверен, как этого добиться.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>News Admin System</title>
<link rel="manifest" href="manifest.json">
<link rel="stylesheet" href="css/style.css">
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="images/hello-icon-152.png">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384- 0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7 AMvyTG2x" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="white"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Hello World">
<meta name="msapplication-TileImage" content="images/hello-icon-144.png">
<meta name="msapplication-TileColor" content="#FFFFFF">
</head>
<body class="fullscreen">
<nav class="container-fluid-nav text-center bg-dark">
<h1 style="color: white; padding: 0.5em;">News Admin</h1>
</nav>
<div class="container">
<label for="titleInput" class="form-label">Title</label>
<input id="titleInput" class="form-control mb-2" type="text"/>
<label for="dateInput" class="form-label">Date</label>
<input id="dateInput" class="form-control mb-2" type="text"/>
<label for="catInput" class="form-label">Catagory</label>
<input id="catInput" class="form-control mb-2" type="text"/>
<label for="bodyInput" class="form-label">Body</label>
<textarea id="bodyInput" class="form-control mb-2" type="text" rows="5"></textarea>
<label for="photo" class="form-label">Image</label>
<input type="file" class="form-control mb-2" id="photo" onchange="preview()"/>
<img id="image" src="" class="rounded mx-auto d-block mb-2" width="350"/>
<div class="d-grid gap-2">
<button type="button" class="btn btn-primary mb-2" onclick="uploadImage();">Upload Image</button>
<input id="imageurll" class="mb-2" disabled>
<button type="button" class="btn btn-primary mb-2" id="addBtn">Add News</button>
<button type="button" class="btn btn-primary mb-2" onclick="getInfo();">Get News</button>
</div>
</div>
<div id="card"></div>
<script src="js/main.js"></script>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-storage.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.6.1/firebase-analytics.js"></script>
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
function preview() {
image.src=URL.createObjectURL(event.target.files[0]);
}
function uploadImage(){
const ref = firebase.storage().ref()
const file = document.querySelector("#photo").files[0]
const name = new Date() '/' file.name
const metadata = {
contentType:file.type
}
const task = ref.child(name).put(file, metadata)
task
.then(snapshot => snapshot.ref.getDownloadURL())
.then(url =>{
alert("Image Upload Successful")
document.getElementById("imageurll").value = url;
})
}
const id = Math.floor(Math.random() * Date.now())
const title = document.getElementById('titleInput');
const date = document.getElementById('dateInput');
const cat = document.getElementById('catInput');
const body = document.getElementById('bodyInput');
const addBtn = document.getElementById('addBtn');
const updateBtn = document.getElementById('updateBtn');
const removeBtn = document.getElementById('removeBtn');
const imageurltxt = document.getElementById("imageurll");
const database = firebase.database();
addBtn.addEventListener('click', (e) => {
e.preventDefault();
database.ref('/News/' id).set({
Title: title.value,
Catagory: cat.value,
Body: body.value,
Date: date.value,
ImageURL: imageurltxt.value
});
});
//*****************************Retrieve Data and Display*******************************************//
function getInfo(){
firebase.database().ref('News').once('value', function(snapshot){
snapshot.forEach(
function(ChildSnapShot){
let Title = ChildSnapShot.val().Title;
let Catagory = ChildSnapShot.val().Catagory;
let Body = ChildSnapShot.val().Body;
let Date = ChildSnapShot.val().Date;
let ImageURL = ChildSnapShot.val().ImageURL;
console.log(title, Catagory, Body, Date, ImageURL);
const containerr = document.getElementById('card');
const card = document.createElement('div');
card.classList = 'card-body';
const content = `
<div class="card center" style="width: 18rem;">
<img id="imagecardtxt" src="${ImageURL}" class="card-img-top" height="200">
<div class="card-body text-center">
<h5 id="titlecardtxt" class="card-title">${Title}</h5>
<div class="row">
<h6 id="datecardtxt" class="card-subtitle mb-2 text-muted col">${Date}</h6>
<h6 id="catcardtxt" class="card-subtitle mb-2 text-muted col">${Catagory}</h6>
</div>
<p id="bodycardtxt" class="card-text">${Body}</p>
<button class="btn btn-secondary" onclick="editInfo();">Edit</button>
<button class="btn btn-danger" onclick="deleteInfo();">Delete</button>
</div>
</div>
`;
containerr.innerHTML = content;
}
);
});
}
function editInfo(){
document.getElementById('titleInput').value = document.getElementById('titlecardtxt').innerText;
document.getElementById('dateInput').value = document.getElementById('titlecardtxt').innerText;
document.getElementById('catInput').value = document.getElementById('catcardtxt').innerText;
document.getElementById('bodyInput').value = document.getElementById('bodycardtxt').innerText;
document.getElementById('imageurll').value = document.getElementById('imagecardtxt').innerText;
}
function deleteInfo(){
}
</script>
</body>
</html>