MatthiasQuintern/imgsort2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: MatthiasQuintern:ad2e45176af673ba0295a2370859f1eff24222c6
Branches Tags
MatthiasQuintern:main
..
compare: MatthiasQuintern:47f349d751e735d2b43937769406c2dee11d7176
Branches Tags
MatthiasQuintern:main

3 Commits
ad2e45176a ... 47f349d751

Author SHA1 Message Date
matth@ultra
47f349d751 add image 2024-09-01 18:36:52 +02:00
matth@ultra
787c4fc42d improve server error display 2024-09-01 18:36:37 +02:00
matth@ultra
885fb3fa5f fix script path 2024-09-01 18:36:16 +02:00
4 changed files with 43 additions and 42 deletions
Show Stats Expand all files Collapse all files

2
README.md
View File

@ -14,6 +14,8 @@ Each directory has a keybind and a button which, when either is pressed, moves t
The web interface has mobile optimizations, letting you sort images/files on the go. The web interface has mobile optimizations, letting you sort images/files on the go.
<img style="display:block; margin: auto; width=100%; max-height: 300px" src="resources/configuration.png" alt="Configuration interface"></img>
## Installation ## Installation
You need a *php* enabled web server, for example *nginx* with *php-fpm*. You need a *php* enabled web server, for example *nginx* with *php-fpm*.

BIN
resources/configuration.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 53 KiB

25
src/index.html
View File

@ -5,32 +5,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Imgsort 2</title> <title>Imgsort 2</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<!-- <style> -->
<!-- body { -->
<!-- font-family: Arial, sans-serif; -->
<!-- text-align: center; -->
<!-- margin: 50px; -->
<!-- } -->
<!-- img { -->
<!-- max-width: 90%; -->
<!-- height: auto; -->
<!-- margin-bottom: 20px; -->
<!-- } -->
<!-- .button-group { -->
<!-- margin-top: 20px; -->
<!-- } -->
<!-- button { -->
<!-- padding: 10px 20px; -->
<!-- margin: 5px; -->
<!-- font-size: 16px; -->
<!-- } -->
<!-- .progress { -->
<!-- /* float: left; */ -->
<!-- } -->
<!-- </style> -->
</head> </head>
<body> <body>
<script src="/src/index.js" async></script> <script src="index.js" async></script>
<div id="preload-file" style="display: none; visibility: hidden"></div> <div id="preload-file" style="display: none; visibility: hidden"></div>
<main> <main>

58
src/index.js
View File

@ -1,19 +1,36 @@
// Handle keyboard input
const imageExtensions = ['gif','jpg','jpeg','png', 'webp']; const imageExtensions = ['gif','jpg','jpeg','png', 'webp'];
const videoExtensions =['mpg', 'mp2', 'mpeg', 'mpe', 'mpv', 'mp4']; const videoExtensions =['mpg', 'mp2', 'mpeg', 'mpe', 'mpv', 'mp4'];
const audioExtensions =['mp3', 'ogg', 'wav', 'flac']; const audioExtensions =['mp3', 'ogg', 'wav', 'flac'];
let statusLine = document.getElementById('status');
const mappings = new Map(JSON.parse(localStorage.getItem('mappings')) || []); const mappings = new Map(JSON.parse(localStorage.getItem('mappings')) || []);
let statusLine = document.getElementById('status');
// store for when done with sorting TODO display
let initialContent = document.getElementById('current-file').innerHTML; let initialContent = document.getElementById('current-file').innerHTML;
let history = []; let history = [];
// get the path in which the images are located and can be loaded from, by appending to them to the stagingPath //
// SERVER COMMUNICATION
//
/**
* Only show the server response text if its a 500 internal
*/
function showServerError(fname, status, text) {
if (status == 500) {
message = `in ${fname}: server returned ${status}: '${text}'`;
else {
message = `in ${fname}: server returned ${status}`;
}
statusLine.innerHTML = message
console.error(message);
}
/**
* get the path in which the images are located and can be loaded from, by appending to them to the stagingPath
*/
let stagingPath = ""; let stagingPath = "";
async function setStagingPath() { async function setStagingPath() {
const response = await fetch("imgsort.php?action=getStagingPath"); const response = await fetch("imgsort.php?action=getStagingPath");
@ -21,13 +38,13 @@ async function setStagingPath() {
stagingPath = await response.text(); stagingPath = await response.text();
} }
else { else {
statusLine.innerHTML = `getStagingPath: server returned ${response.status}`; showServerError("setStagingPath", response.status, text);
console.error("Could not get stagingPath from server");
console.error(response);
} }
} }
// list of files to be processed /**
* list of files to be processed
*/
let fileList = []; let fileList = [];
async function setFileList() { async function setFileList() {
const response = await fetch("imgsort.php?action=getFileList"); const response = await fetch("imgsort.php?action=getFileList");
@ -38,12 +55,15 @@ async function setFileList() {
// fileList.sort(); // fileList.sort();
} }
else { else {
statusLine.innerHTML = `getFileList: server returned ${response.status}: '${text}'`;
console.error("Could not get fileList from server");
console.error(response);
} }
} }
//
// RENDERING
//
/* /*
* Create button for each mapping * Create button for each mapping
*/ */
@ -142,6 +162,10 @@ function preloadNextFile() {
} }
//
// LOGIC
//
// set the currentFile variable according to currentFileIdx // set the currentFile variable according to currentFileIdx
function setCurrentFile() { function setCurrentFile() {
// if none set and // if none set and
@ -185,8 +209,7 @@ async function moveFile(directory) {
preloadNextFile(); preloadNextFile();
} }
else { else {
statusLine.innerHTML = `moveFile: server returned ${response.status}: '${text}'`; showServerError("moveFile", response.status, text);
console.error(`moveFile: server returned ${response.status}: '${text}'`);
} }
} }
@ -206,8 +229,7 @@ async function undo() {
setCurrentFile(); setCurrentFile();
} }
else { else {
statusLine.innerHTML = `undo: server returned ${response.status}: '${text}'`; showServerError("undo", response.status, text);
console.error(`undo: server returned ${response.status}: '${text}'`);
} }
} }