team-intro/guest.html at main · gajicoding/team-intro · 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
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
<!-- 방명록 -->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap" rel="stylesheet" />

  <link rel="stylesheet" href="./css/root.css" />
  <link rel="stylesheet" href="./css/guest_layout.css" />
  <link rel="stylesheet" href="node_modules/sakura-js/dist/sakura.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />

  <title>E1 + I5 = 6T</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script type="module">
    import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";
    import { getFirestore, collection, addDoc, getDocs, query, orderBy } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";

    const firebaseConfig = {
      apiKey: "AIzaSyDRA5ozKwFy6EicdoQAQJBDT2vpO2KL9SA",
      authDomain: "sparta-dfa33.firebaseapp.com",
      projectId: "sparta-dfa33",
      storageBucket: "sparta-dfa33.appspot.com",
      messagingSenderId: "926072373954",
      appId: "1:926072373954:web:c4395201e9e2f996f5315b",
      measurementId: "G-EMEQ041V8M"
    };

    const app = initializeApp(firebaseConfig);
    const db = getFirestore(app);

    $("#saveBtn").click(async function () {
      let name = $('#name').val();
      let message = $('#message').val();

      if (!name || !message) {
        alert('이름과 메시지를 입력해주세요.');
        return;
      }

      let docData = {
        name: name,
        message: message,
        timestamp: new Date()
      };

      await addDoc(collection(db, "guestBox"), docData);
      alert('E1 + I5 = 6T 의 게시판에 오신 것을 환영합니다.');
      window.location.reload();
    });

    const q = query(collection(db, "guestBox"), orderBy("timestamp", "desc"));
    let docsSnapshot = await getDocs(q);
    docsSnapshot.forEach((doc) => {
      let row = doc.data();
      let name = row['name'];
      let message = row['message'];
      let timeStr = row.timestamp
        ? (() => {
          let timeObj = row.timestamp.toDate();
          let year = timeObj.getFullYear();
          let month = String(timeObj.getMonth() + 1).padStart(2, '0');
          let date = String(timeObj.getDate()).padStart(2, '0');
          let hours = String(timeObj.getHours()).padStart(2, '0');
          let minutes = String(timeObj.getMinutes()).padStart(2, '0');
          let seconds = String(timeObj.getSeconds()).padStart(2, '0');
          return `${year}.${month}.${date} ${hours}:${minutes}:${seconds}`;
        })()
        : "";

        let temp_html = `
<div class="guest-card d-flex justify-content-between align-items-center px-3 mb-3 rounded-4" style="background-color: #fff5f5;">
  <div class="d-flex align-items-center gap-3">
    <div class="avatar text-secondary" d-flex align-items-center style="font-size: 3rem;">
      <i class="bi bi-person-circle"></i>
    </div>
    <div class="d-flex flex-column justify-content-center" style="line-height: 1.2;">
      <div class="fw-bold" style="font-size: 1rem;">${name}</div>
      <div class="text-muted" style="font-size: 0.9rem;">${message}</div>
    </div>
  </div>
  <div class="text-muted text-end" style="font-size: 0.8rem;">${timeStr}</div>
</div>`;


      $('.append').append(temp_html);
    });
  </script>
</head>

<body>
  <div class="wrapper">
  <div class="guestBox shadow">
    <div class="message d-flex align-items-start gap-4" style="border: none" ;>
      <h1 style="color: #803744;">guestBox</h1>

      <a href="./index.html" class="go_home">
        <span class="material-symbols-outlined">
          home
        </span>
      </a>

      <div class="savet d-flex gap-3 guestInput">
        <div class="form-floating">
          <input type="text" class="form-control-sm" id="name" placeholder="이름">
          <label for="name">
        </div>
        <div class="form-floating flex-grow-1">
          <input type="text" class="form-control-sm" id="message" placeholder="메시지">
          <label for="message">
        </div>
        <button id="saveBtn" type="button" class="btn btn-warning btn-sm" style="flex: 0 0 auto; align-self: flex-end;">
          기록하기
        </button>
      </div>
    </div>
    <div class="append mt-5 px-3">
      <!-- 방명록 목록출력됨 -->
    </div>
  </div>
</div>
</body>

<script src="node_modules/sakura-js/dist/sakura.min.js"></script>
<script>var sakura = new Sakura('body');
</script>

</html>