Notes-Making-Application/index.html at main · 2ybaryl/Notes-Making-Application · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="./styles.css" rel="stylesheet">
    <title>View</title>
    <script>
        if(!localStorage.getItem('uid')){
            window.location.href='./login.html';
        }
    </script>
</head>
<body>
    <div class="add">
        <a href="./send.html"><img src="./assets/logos/plus-circle-white.svg" width="30rem"></a>
        <button type="button" id="logout-btn" style="margin-top: 25rem; outline: none; background: none; border: 1px solid white; color: white; font-size: 1rem; padding: 3%;">Logout</button>
    </div>
    <div class="line"></div>
    <div class="container" id="notes-container">
        <img src="./assets/loader/loader.svg">
    </div>
</body>
<script src="https://www.gstatic.com/firebasejs/9.12.1/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.12.1/firebase-database-compat.js"></script>

<script>
    const firebaseConfig = {
    databaseURL: "https://test-9e2b7-default-rtdb.asia-southeast1.firebasedatabase.app/"
}
firebase.initializeApp(firebaseConfig)
const database = firebase.database()
const dataContainer = document.getElementById('notes-container')
function remove(id){
        console.log("Removed", id);
        database.ref('messages/' + id).remove()
}

function updateNow(id, count){
    const date = new Date();
    var obj = {
        'uid' : localStorage.getItem('uid'),
        'name': document.getElementById(`title-${count}`).value,
        'email': date.toISOString(),
        'message': document.getElementById(`message-${count}`).value
    }
    var listRef = database.ref('messages/' + id)
    listRef.update(obj);
}
var fetchedData = database.ref('messages/')
fetchedData.on('value', (snapshot) => {
    var data = snapshot.val();
    var htmlData = '';
    let count=0;
    for(var key in data){
        if(data[key].uid===localStorage.getItem('uid')){
            var value = data[key];
            const date=value.email.substring(0,10) + " / " + value.email.substring(11, 19);
            htmlData += `
            <div class="card">
                <div class="head">
                    <input type="text" placeholder="Note name" id="title-${count}" value='${value.name}''>
                </div>
                <hr>
                <div class="body">
                    <textarea rows='6' id="message-${count}">${value.message}</textarea>
                </div>
                <div class="foot">
                    <span class="time">
                        ${date}
                    </span>
                    <div class="del-button">
                        <button onclick = "updateNow('${key}', ${count})">Update</button>
                        <button onclick = "remove('${key}')">Delete</button>
                    </div>
                </div>
            </div>`;
            count++;
        }
        // <tr>
        //             <td>${value.name}</td>
        //             <td>${value.email}</td>
        //             <td>${value.message}</td>
        //             <td>
        //                 <button onclick = "update('${key}', this)">Update</button>
        //                 <button onclick = "remove('${key}')">Delete</button>
        //             </td>
        // </tr>`;
    }
    document.getElementById('logout-btn').addEventListener('click', ()=>{
        localStorage.clear();
        window.location.href='./login.html';
    })

    setTimeout(()=>{
        dataContainer.style='';
        dataContainer.style=`font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;padding: 3%;gap: 5%;width: 100%;display: grid;flex-direction: column;grid-template-columns:max-content max-content max-content max-content`
        dataContainer.innerHTML = htmlData;
    },1000)


})


</script>
</html>