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

Compare commits

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

No commits in common. "47f349d751e735d2b43937769406c2dee11d7176" and "ad2e45176af673ba0295a2370859f1eff24222c6" have entirely different histories.
47f349d751 ... ad2e45176a

4 changed files with 42 additions and 43 deletions
Show Stats Expand all files Collapse all files

2
README.md
View File

@ -14,8 +14,6 @@ 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
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 53 KiB

25
src/index.html
View File

@ -5,9 +5,32 @@
<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="index.js" async></script> <script src="/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,36 +1,19 @@
// 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'];
const mappings = new Map(JSON.parse(localStorage.getItem('mappings')) || []);
let statusLine = document.getElementById('status'); let statusLine = document.getElementById('status');
// store for when done with sorting TODO display
const mappings = new Map(JSON.parse(localStorage.getItem('mappings')) || []);
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");
@ -38,13 +21,13 @@ async function setStagingPath() {
stagingPath = await response.text(); stagingPath = await response.text();
} }
else { else {
showServerError("setStagingPath", response.status, text); statusLine.innerHTML = `getStagingPath: server returned ${response.status}`;
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");
@ -55,15 +38,12 @@ 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
*/ */
@ -162,10 +142,6 @@ 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
@ -209,7 +185,8 @@ async function moveFile(directory) {
preloadNextFile(); preloadNextFile();
} }
else { else {
showServerError("moveFile", response.status, text); statusLine.innerHTML = `moveFile: server returned ${response.status}: '${text}'`;
console.error(`moveFile: server returned ${response.status}: '${text}'`);
} }
} }
@ -229,7 +206,8 @@ async function undo() {
setCurrentFile(); setCurrentFile();
} }
else { else {
showServerError("undo", response.status, text); statusLine.innerHTML = `undo: server returned ${response.status}: '${text}'`;
console.error(`undo: server returned ${response.status}: '${text}'`);
} }
} }