PicsSorter/index.php

324 lines
10 KiB
PHP

<?php
if(isset($_GET['add_new_category'])) {
$new_category = $_GET["new_category"];
shell_exec("python3 picsSorter.py add_new_category $new_category");
}
if(isset($_GET['categorize'])) {
$category = $_GET["category"];
$file = $_GET["file"];
shell_exec("python3 picsSorter.py categorize $file $category");
}
if(isset($_GET['uncategorize'])) {
$category = $_GET["category"];
$file = $_GET["file"];
shell_exec("python3 picsSorter.py uncategorize $file $category");
}
if(isset($_GET['delete_file'])) {
$file = $_GET["file"];
shell_exec("python3 picsSorter.py delete_file $file");
}
if(isset($_GET['sorted_file'])) {
$file = $_GET["file"];
shell_exec("python3 picsSorter.py sorted_file $file");
}
if(isset($_GET['invalid_picture'])) {
$file = $_GET["file"];
shell_exec("python3 picsSorter.py invalid_picture $file");
}
if(isset($_GET['list_files_to_sort'])) {
shell_exec("python3 picsSorter.py list_files_to_sort");
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Pics Sorter</title>
<style>
/* override browser default */
html,
body {
margin: 0;
padding: 0;
}
/* use viewport-relative units to cover page fully */
body {
height: 100vh;
width: 100vw;
}
/* include border and padding in element width and height */
* {
box-sizing: border-box;
}
img, video {
width: 100%;
max-height: 100%;
object-fit: contain;
margin: auto;
}
.page {
display: flex;
text-align: center;
height: 100%;
}
.buttons_column {
width: 15%;
background-color: grey;
border-style: ridge;
border-color: goldenrod;
}
.next_buttons_column {
width: 15%;
background-color: grey;
border-style: ridge;
border-color: goldenrod;
}
.category_button {
margin-bottom: 5%;
width: 60%;
}
.sorted_button, .delete_button, .invalid_picture_button, .list_button, .box_resolution {
margin-bottom: 40%;
margin-top: 10%;
width: 50%;
}
.uncategory_button {
margin-left: 20%;
}
#display_column {
width: 100%;
background-color: black;
}
#categories_buttons_column {
padding-top: 10%;
}
</style>
<!-- <script src="../malekith.fr_/Resources/jquery-3.5.1.min.js"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
function loadFile(filePath) {
var result = null;
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", filePath, false);
xmlhttp.send();
if (xmlhttp.status==200) {
result = xmlhttp.responseText;
}
return result;
}
function init_display_column() {
const allowed_picture_filtypes = ["png", "jpg", "gif", "webp"];
const allowed_video_filtypes = ["webm", "mp4"];
var to_sort_file = loadFile("/DataBase/ToSort.database");
var to_sort = to_sort_file.split(/\r\n|\r|\n/).slice(0,-1).sort();
var randomElement = to_sort.length > 0 ? to_sort[Math.floor(Math.random() * to_sort.length)] : "empty.jpg";
var randomElement_filetype = randomElement.split('.').pop();
if(allowed_picture_filtypes.includes(randomElement_filetype)) {
var new_img = document.createElement("img");
new_img.onload = function() {
document.getElementById("box_resolution").value = this.width + ' x ' + this.height;
}
new_img.setAttribute("src", randomElement);
new_img.setAttribute("id", "media_to_sort");
document.getElementById("display_column").appendChild(new_img);
}
if(allowed_video_filtypes.includes(randomElement_filetype)) {
var new_video = document.createElement("video");
new_video.setAttribute("src", randomElement);
new_video.setAttribute("id", "media_to_sort");
new_video.setAttribute("controls", true);
document.getElementById("display_column").appendChild(new_video);
}
}
function init_buttons() {
init_display_column();
var categories_file = loadFile("/DataBase/Categories.database");
var categories = categories_file.split(/\r\n|\r|\n/).slice(0,-1).sort();
var categories_buttons_column = document.getElementById("categories_buttons_column");
var media_path = document.getElementById("media_to_sort").getAttribute('src');
document.getElementById("sorted_button").setAttribute("onclick", "sorted_file('" + media_path + "')");
document.getElementById("delete_button").setAttribute("onclick", "delete_file('" + media_path + "')");
document.getElementById("invalid_picture_button").setAttribute("onclick", "invalid_picture('" + media_path + "')");
document.getElementById("list_button").setAttribute("onclick", "list_files()");
categories_buttons_column.innerHTML = "";
for (category of categories) {
var new_button = document.createElement("input");
new_button.setAttribute("type", "button");
new_button.setAttribute("id", category);
new_button.setAttribute("class", "category_button");
new_button.setAttribute("onclick", "categorize('" + media_path + "', '" + category + "')");
new_button.setAttribute("value", category);
var new_unbutton = document.createElement("input");
new_unbutton.setAttribute("type", "button");
new_unbutton.setAttribute("id", "un" + category);
new_unbutton.setAttribute("class", "uncategory_button");
new_unbutton.setAttribute("onclick", "uncategorize('" + media_path + "', '" + category + "')");
new_unbutton.setAttribute("value", "X");
var new_div = document.createElement("div");
new_div.setAttribute("id", category + "_row");
new_div.appendChild(new_button);
new_div.appendChild(new_unbutton);
categories_buttons_column.appendChild(new_div);
}
}
function new_category() {
$.get("index.php?add_new_category&new_category=" + document.getElementById("new_category_name").value, function(data) {done = true;});
setTimeout(function() {
var categories_file = loadFile("/DataBase/Categories.database");
var categories = categories_file.split(/\r\n|\r|\n/).slice(0,-1).sort();
var categories_buttons_column = document.getElementById("categories_buttons_column");
var media_path = document.getElementById("media_to_sort").getAttribute('src');
categories_buttons_column.innerHTML = "";
for (category of categories) {
var new_button = document.createElement("input");
new_button.setAttribute("type", "button");
new_button.setAttribute("id", category);
new_button.setAttribute("class", "category_button");
new_button.setAttribute("onclick", "categorize('" + media_path + "', '" + category + "')");
new_button.setAttribute("value", category);
var new_unbutton = document.createElement("input");
new_unbutton.setAttribute("type", "button");
new_unbutton.setAttribute("id", "un" + category);
new_unbutton.setAttribute("class", "uncategory_button");
new_unbutton.setAttribute("onclick", "uncategorize('" + media_path + "', '" + category + "')");
new_unbutton.setAttribute("value", "X");
var new_div = document.createElement("div");
new_div.setAttribute("id", category + "_row");
new_div.appendChild(new_button);
new_div.appendChild(new_unbutton);
categories_buttons_column.appendChild(new_div);
}
}, 1000);
}
function categorize(file_path, category) {
var filename = file_path.substring(file_path.lastIndexOf('/')+1);
document.getElementById(category).style.backgroundColor = "darkOrange";
document.getElementById(category).style.borderStyle = "inset";
document.getElementById(category).style.borderColor = "black";
document.getElementById(category).style.borderWidth = "medium";
$.get("index.php?categorize&file=" + filename + "&category=" + category, function(data) {done = true;});
}
function uncategorize(file_path, category) {
var filename = file_path.substring(file_path.lastIndexOf('/')+1);
document.getElementById(category).style.border = "none";
$.get("index.php?uncategorize&file=" + filename + "&category=" + category, function(data) {done = true;});
}
function list_files() {
if(confirm("Delete File ?")) {
$.get("index.php?list_files_to_sort", function(data) {done = true;});
}
}
function delete_file(file_path) {
if(confirm("Delete File ?")) {
$.get("index.php?delete_file&file=" + filename, function(data) {done = true;});
}
}
function sorted_file(file_path) {
if(confirm("Sort ?")){
var filename = file_path.substring(file_path.lastIndexOf('/')+1);
$.get("index.php?sorted_file&file=" + filename, function(data) {done = true;});
}
}
function invalid_picture(file_path) {
if(confirm("Invalid Picture ?")){
var filename = file_path.substring(file_path.lastIndexOf('/')+1);
$.get("index.php?invalid_picture&file=" + filename, function(data) {
done = true;
$.get("index.php?list_files_to_sort", function(data) {
done = true;
location.reload(true);
});
});
}
}
</script>
</head>
<body onload="init_buttons()">
<div class="page">
<div class="buttons_column">
<div class= "input">
<input type="text" id="new_category_name" value="">
<input type="button" id="create_new_category" value="New" onclick="new_category()">
<div id="categories_buttons_column"></div>
</div>
</div>
<div id="display_column" ></div>
<div class="next_buttons_column">
<div class= "next">
<input type="button" id="sorted_button" class="sorted_button" value="Sorted">
</div>
<div class= "delete">
<input type="button" id="delete_button" class="delete_button" value="Delete">
</div>
<div class= "invalid_picture">
<input type="button" id="invalid_picture_button" class="invalid_picture_button" value="Invalid Picture">
</div>
<div class= "list">
<input type="button" id="list_button" class="list_button" value="List New Files">
</div>
<div class= "resolution">
<input type="textarea" id="box_resolution" class="box_resolution">
</div>
</div>
</div>
</body>
</html>