11<?php
22header ("Location: ./chat/chat.php " );
3-
4- require_once "pdo.php " ;
5- // date_default_timezone_set('UTC');
6- date_default_timezone_set ('Asia/Taipei ' );
7-
8- if (!isset ($ _SESSION ["email " ])) {
9- include 'head.php ' ;
10- echo "<p align='center'>PLEASE LOGIN</p> " ;
11- echo "<br /> " ;
12- echo "<p align='center'>Redirecting in 3 seconds</p> " ;
13- header ("refresh:3;url=login.php " );
14- die ();
15- }
16-
17- $ stmt = $ pdo ->query (
18- "SELECT * FROM chatlog "
19- );
20- $ rows = $ stmt ->fetchAll (PDO ::FETCH_ASSOC );
21-
22-
23- if (isset ($ _POST ['logout ' ])) {
24- header ("Location: logout.php " );
25- return ;
26- }
27-
28- if (isset ($ _SESSION ['user_id ' ])) {
29- if (isset ($ _POST ['message ' ])) {
30- $ stmta = $ pdo ->prepare (
31- 'INSERT INTO chatlog
32- (message, message_date, account, user_id)
33- VALUES (:msg, :msgd, :acc, :usrid) '
34- );
35-
36- $ stmta ->execute (
37- array (
38- ':msg ' => $ _POST ['message ' ],
39- ':msgd ' => date (DATE_RFC2822 ),
40- ':acc ' => $ _SESSION ['username ' ],
41- ':usrid ' => $ _SESSION ['user_id ' ]
42- )
43- );
44- $ stmt = $ pdo ->query (
45- "SELECT * FROM chatlog "
46- );
47- $ rows = $ stmt ->fetchAll (PDO ::FETCH_ASSOC );
48- } else {
49- foreach ($ _POST as $ edit_msg ) {
50- $ key = array_search ($ edit_msg , $ _POST );
51-
52-
53- $ sql = "UPDATE chatlog SET message = :msg
54- WHERE message_id = :message_id " ;
55- $ stmt = $ pdo ->prepare ($ sql );
56- $ stmt ->execute (array (
57- ':msg ' => $ edit_msg ,
58- ':message_id ' => $ key
59- ));
60-
61- break ;
62- }
63- }
64- }
65- ?>
66- <html>
67- <title>g4o2 chat</title>
68- <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
69- <link rel="stylesheet" href="./css/chat.css?v=<?php echo time (); ?> ">
70- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
71- </head>
72-
73- <body>
74- <section id="page-header">
75- <h1 id="index-page-link"><a href="./index.php">g4o2 chat</a></h1>
76- <section style="overflow: auto;" id="guide">
77- <p>Press <kbd>Enter</kbd> to submit message</p>
78- <p>Press <kbd>/</kbd> to select <kbd>Esc</kbd> to deselect</p>
79- </section>
80- </section>
81- <section>
82- <div class="progress" id="chatcontent">
83- <!-- <img class="spinner" src="spinner.gif" alt="Loading..." /> -->
84- <p style='text-align:center;color: #ffa500;'>This is the start of all messages</p>
85- <?php
86- require_once "messages.php " ;
87- ?>
88- </div>
89- <form id='form' autocomplete="off" method="post" action="chat.php">
90- <div>
91- <input id='message-input' type="text" name="message" size="60" style="width: 55vw;" placeholder="Enter message and submit" />
92- <input class='button not-allowed' id="submit" type="submit" value="Chat" />
93- <input class='button' id='logout' type="submit" name="logout" value="Logout" />
94- </div>
95- </form>
96- </section>
97- <script type="text/javascript">
98- function handleEdit(id) {
99- let parent_id = id + "parent";
100- let input_id = id + "input";
101- let message = document.getElementById(id).innerText;
102- document.getElementById(parent_id).innerHTML = `<form method='post'><input class='edit-input' id='${input_id}' type='text' style='width:90%' name=${id}> <input class='btn chat-btn' type='submit' value='Save'></form>`;
103- document.getElementById(input_id).value = message;
104- }
105-
106- let input = document.getElementById('message-input');
107- input.focus();
108- input.select();
109- let pageBody = document.getElementsByTagName('body')[0];
110-
111- $("#submit").prop("disabled", true);
112- $(input).keyup(function() {
113- if (!$(input).val().replace(/\s/g, '').length) {
114- $("#submit").prop("disabled", true);
115- $('#submit').addClass("not-allowed")
116- } else {
117- $("#submit").prop("disabled", false);
118- $('#submit').removeClass("not-allowed");
119- }
120- });
121- window.addEventListener("keydown", event => {
122- if ((event.keyCode == 191)) {
123- if (input === document.activeElement) {
124- return;
125- } else {
126- input.focus();
127- input.select();
128- event.preventDefault();
129- }
130- }
131- if ((event.keyCode == 27)) {
132- if (input === document.activeElement) {
133- document.activeElement.blur();
134- window.focus();
135- event.preventDefault();
136- }
137- }
138- });
139- $(document).ready(function() {
140- setTimeout(
141- function() {
142- $("#chatcontent").removeClass("progress");
143- }, 1000);
144- })
145-
146- function chatScroll() {
147- let chat = document.getElementById('chatcontent')
148- chat.scrollTop = chat.scrollHeight;
149- }
150- chatScroll()
151-
152- if (window.history.replaceState) {
153- window.history.replaceState(null, null, window.location.href);
154- }
155-
156- var timezone_offset_minutes = new Date().getTimezoneOffset();
157- timezone_offset_minutes = timezone_offset_minutes == 0 ? 0 : -timezone_offset_minutes;
158-
159- document.cookie = "timezone=" + timezone_offset_minutes;
160-
161- /*let inverval = window.setInterval(function() {
162- $.ajax({
163- url: "messages.php",
164- success: function(data) {
165- document.getElementById("chatcontent").innerHTML = data
166- }
167- });
168- let chat = document.getElementById("chatcontent")
169- if (chat.scrollTop >= (chat.scrollHeight - chat.offsetHeight) - 100) {
170- chatScroll()
171- }
172- }, 1000)*/
173- /*
174- let inverval = window.setInterval(function() {
175- $.ajax({
176- url: "msglength.php",
177- success: function(data) {
178- let chat = document.getElementById("chatcontent");
179- let chatLength = (chat.childElementCount - 1) / 2;
180-
181- if (data != chatLength) {
182- $.ajax({
183- url: "messages.php",
184- success: function(data) {
185- document.getElementById("chatcontent").innerHTML = data;
186- let chat = document.getElementById("chatcontent")
187- if (chat.scrollTop >= (chat.scrollHeight - chat.offsetHeight) - 100) {
188- chatScroll()
189- }
190- console.log('chat updated')
191- }
192- });
193- }
194- }
195- });
196- }, 1000)
197- */
198- </script>
199- </body>
3+ ?>
0 commit comments