Photowall_WebApp/approve.php
Kováts Levente 402f21e5c6 Hibajavítások
escapeHtml, color parsing, képnéző betöltés/megjelenítés
2021-01-24 10:16:18 +01:00

388 lines
14 KiB
PHP

<?php
include_once "utils.php";
// Globális SQL-kapcsolat
$dbconn = open_sql_connection();
// jelszó hash generálás: echo password_hash('P@ssw0rd', PASSWORD_DEFAULT);
// képek betöltése
function get_images($last_No = -1, $n = 10)
{
global $dbconn;
// felhasználótól jött paraméterek ellenőrzése
$last_No = intval($last_No);
$n = intval($n);
$query = "SELECT * FROM publish_table";
$query .= " WHERE Confirmed=0";
$query .= " AND No>$last_No";
$query .= " ORDER BY No";
$query .= " LIMIT $n";
$result = $dbconn->query($query);
$data = [];
while ($row = $result->fetch_assoc()) {
$data[] = $row;
}
return $data;
}
// kép engedélyezése
function set_approval($Image_FileName, $approved)
{
global $dbconn;
// felhasználótól jött paraméterek ellenőrzése
$approved = $approved === 'true' ? 1 : 0;
$Image_FileName = $dbconn->real_escape_string($Image_FileName);
// jóváhagyás mező beállítása és ellenőrzöttnek jelölés
$query = "UPDATE publish_table SET Approved=$approved, Confirmed=1 WHERE Image_FileName='$Image_FileName';";
$res = $dbconn->query($query);
return $res; // true ha sikeres, false ha valami hiba történt
}
// adatok frissítése
function update_details($Image_FileName, $details)
{
global $dbconn;
// felhasználótól jött paraméterek ellenőrzése
$Image_FileName = $dbconn->real_escape_string($Image_FileName);
$author = $dbconn->real_escape_string($details["author"]);
$group = validate_group($details["group"]);
$title = $dbconn->real_escape_string($details["title"]);
$desc = $dbconn->real_escape_string($details["desc"]);
// csoport ellenőrzése
if ($group === false) {
return "Ervenytelen csoport!";
}
// képhez megadott adatok frissítése
$query = "UPDATE publish_table SET Author='$author', AuthorGroup='$group', Title='$title', Description='$desc' WHERE Image_FileName='$Image_FileName';";
$res = $dbconn->query($query);
return ($res === true) ? true : $dbconn->error; // true ha sikeres, egyébként a hiba
}
// --------------------------------
// munkamenet bekapcsolása, ez minden előtt kell legyen
session_start();
// bejelentkezést jelző flag
$logged_in = false;
// ha nincs ilyen változó, akkor létrehozzuk
if (isset($_SESSION['logged_in'])) {
$logged_in = $_SESSION['logged_in'];
} else {
$_SESSION['logged_in'] = false;
}
// belépés ellenőrzése
if (isset($_POST['password']) && password_verify($_POST['password'], HASHED_REVIS_PASSWORD) === true) {
$_SESSION['logged_in'] = true;
$logged_in = true;
}
// kiléptetés
if (isset($_POST['logout'])) {
$_SESSION['logged_in'] = false;
// remove all session variables
session_unset();
// destroy the session
session_destroy();
// nem vagyunk bejelentkezve
$logged_in = false;
}
// ha be vagyunk jelentkezve
if ($logged_in) {
if (isset($_POST["action"])) {
$action = only_alpha_numeric($_POST["action"]);
// parancs kiválasztása
switch ($action) {
case "get_images": // képadatok lekérése
if (isset($_POST["last_No"]) && isset($_POST["n"])) {
echo json_encode(get_images($_POST["last_No"], $_POST["n"]));
}
break;
case "set_approval": // jóváhagyás beállítása
if (isset($_POST["Image_FileName"]) && isset($_POST["approved"])) {
echo json_encode(set_approval($_POST["Image_FileName"], $_POST["approved"]));
}
break;
case "update_details":
if (isset($_POST["Image_FileName"]) && isset($_POST["details"])) {
echo json_encode(update_details($_POST["Image_FileName"], json_decode($_POST["details"], true)));
}
}
exit(0);
}
}
?>
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="utf-8"/>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'>
<title>Fotófal :: admin</title>
<script src="js/o.js"></script>
<script src="js/socket.js"></script>
<script src="js/slider.js"></script>
<script src="js/phw.js"></script>
<script src="js/color.js"></script>
<?php if ($logged_in) { ?>
<script>
// ezeket lehetne külön tenni
function l(msg) {
console.log(msg);
}
function request(url, method, data) {
return new Promise((resolve, reject) => {
var formData;
if (data) {
formData = new FormData();
for (var k in data) {
formData.append(k, data[k]);
}
}
fetch(url, {
method: method,
body: formData,
})
.then(response => response.text())
.then(data => resolve(data))
.catch((error) => {
console.error('Error: ', error);
reject(error);
});
});
}
// html-be biztonságosan beilleszthető string gyártása
// https://stackoverflow.com/a/6234804
function escapeHtml(unsafe) {
return unsafe
.replace(/&/g, "&amp;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;")
.replace(/'/g, "&#039;");
}
</script>
<script>
const MAX_TABLE_ROWS = 10;
var table_container; // a sorokat tartalmazó tag
document.addEventListener("DOMContentLoaded", () => {
// elemek megkeresése az oldalon
table_container = o('table_container');
// sorok betöltése
fill_table();
});
function fill_table() {
var max_new_rows = MAX_TABLE_ROWS - table_container.children.length;
var last_No = table_container.children.length ? table_container.children[table_container.children.length - 1].details.No : -1;
request(
'approve.php',
'POST',
{
action: 'get_images',
last_No: last_No,
n: max_new_rows,
}
)
.then(data => {
data = JSON.parse(data);
if (data.length) {
data.forEach(image_data => {
table_container.appendChild(render_row(image_data));
});
} else if (table_container.innerHTML === '') {
table_container.innerHTML = '<h3>Jelenleg nincs jóváhagyásra váró elem :)</h3>'
}
});
}
//
function render_row(image_data) {
var row_container = document.createElement('section');
row_container.style.paddingLeft = "0.5em";
row_container.innerHTML = `
<hr style="height: 0.5em; border: 0; background-color: lightgray;"/>
<img src="ARTWORKS/thumbnails/${image_data["Image_FileName"]}" style="vertical-align: top" />
<section style="display: inline-block; margin-left: 1em;">
<section style="display: block">
<span class="label">Alkotó:</span><span class="fill-in-content" style="margin-right: 0.5em;"><input type="text" class="f-author-c" name="f_author" value="${escapeHtml(image_data["Author"])}">,</span>
<span class="label">Csoport:</span><input type="text" class="f-author-group-c" name="f_author_group" value="${escapeHtml(image_data["AuthorGroup"])}"></span><br />
<span class="label">Cím:</span><span class="fill-in-content"><input type="text" class="f-title-c" name="f_title" value="${escapeHtml(image_data["Title"])}"></span><br />
<span class="label">Leírás:</span><span class="fill-in-content"><textarea placeholder="(nincs)" class="f-desc-c" style="vertical-align: baseline;" name="f_details">${escapeHtml(image_data["Description"])}</textarea></span><br />
<span class="label">Feltöltés ideje:</span><span class="fill-in-content">${image_data["TS"]}</span><br />
</section>
<section style="display: block; margin-top: 1em;">
<section class="btn" id="button_update_details" onclick="update_details(event);" >Frissítés</section>
<section class="btn" id="button_approve" onclick="set_approval(event);" >Engedélyez</section>
<section class="btn" id="button_hide" onclick="set_approval(event);" >Elutasít</section>
</section>
</section>
`;
row_container.details = image_data;
return row_container;
}
function set_approval(event) {
var approved = event.target.id === 'button_approve';
var row_container = event.target.parentElement.parentElement.parentElement;
var image_data = row_container.details;
request(
'approve.php',
'POST',
{
action: 'set_approval',
Image_FileName: image_data['Image_FileName'],
approved: approved,
}
)
.then(data => {
if (data === 'true') {
// ha sikeres a kérés, a sor eltüntetése
row_container.parentElement.removeChild(row_container);
} else {
alert('Valami nem stimmel, kérlek próbáld újra.');
}
// újabb elem betöltése, ha van
fill_table();
});
}
function update_details(event) {
var row_container = event.target.parentElement.parentElement.parentElement;
var image_data = row_container.details;
var artwork_details = {
author: row_container.getElementsByClassName("f-author-c")[0].value,
group: row_container.getElementsByClassName("f-author-group-c")[0].value,
title: row_container.getElementsByClassName("f-title-c")[0].value,
desc: row_container.getElementsByClassName("f-desc-c")[0].value
}
console.log(artwork_details);
request(
'approve.php',
'POST',
{
action: 'update_details',
Image_FileName: image_data['Image_FileName'],
details: JSON.stringify(artwork_details)
}
)
.then(data => {
if (data !== 'true') {
alert(`Valami nem stimmel ;( \n\n ${data}`);
}
// táblázat újratöltése
table_container.innerHTML = '';
fill_table();
});
}
</script>
<style>
section.settings_container {
padding: 10px;
text-align: right;
border: 1px dashed var(--PUP-BORDERCOLOR);
}
section#table_container {
display: block;
position: absolute;
left: 4px;
right: 4px;
top: 80px;
bottom: 0;
overflow: scroll;
border: 1px dashed var(--PUP-BORDERCOLOR);
}
span.label {
color: var(--LABEL-TCOLOR);
text-transform: uppercase;
/*margin-right: 0.5em;*/
}
</style>
<?php } else { ?>
<style>
section.login {
display: flex;
top: 0.5em;
left: 0.5em;
right: 0.5em;
bottom: 0.5em;
position: fixed;
justify-content: center;
align-items: center;
}
</style>
<?php } ?>
<link href="phw.css" rel="stylesheet">
</head>
<body>
<!-- BEJELENTKEZVE -->
<?php if ($logged_in) { ?>
<section class="settings_container">
<!-- TODO: valahogy be lehessen állítani,
hogy ne csak az jelenjen meg, amit már egyszer leellenőriztek -->
<form method="POST" id="logoutform">
<section class="btn" onclick="o('logoutform').submit()">Kilépés</section>
<input type="hidden" name="logout">
</form>
</section>
<section id="table_container"></section>
<!-- KIJELENTKEZVE -->
<?php } else { ?>
<section class="login">
<form method="POST" id="loginform" style="text-align: center; font-weight: bold;">
<span style="font-size: 20px; color: var(--LABEL-TCOLOR);">Photowall admin-felület</span><br>
<input type="password" name="password" placeholder="Jelszó" style="margin-left: 0"/><br
style="margin: 0.8em;">
<section class="btn" onclick="o('loginform').submit()">Belépés</section>
</form>
</section>
<?php } ?>
<!-- TESZTVERZIÓ -->
<section class="testversion-sign">TESZTVERZIÓ</section>
</body>
</html>