The Edit Elaboration Page - documenti-aperti/documenti_aperti GitHub Wiki
The Edit Elaboration page is intended for changing the way the API elaborate documents. It also lets to change elaborated pages.
How it works
The page, which is composed by the related CSS and JS file, is hosted with NGINX that's pointing to a local folder (/var/www/html/edit
) which contains all the files.
Getting all the data
For getting all the necessary information about the actual order and all the available file in raw_data
the page uses two hidden frames managed by JS.
.startFrom
file
The first frame and the The first frame points to the editor page of the hidden file .startFrom
which contains a JSON encoded structure that is a dictionary with 3 keys:
actualOrder
, which value is a list with the name of theraw_data
's file ordered in the same way they're in theimages
foldercustomOrder
, which value is a list that can be empty, if the user hasn't specified an order to be applied to the next elaboration, or filled, if the user has specified the order to be applieddeleteFile
, which value is a list that can be empty if the user hasn't specified any file to be deleted, or filled with the name of the file to be deleted both from elaborated images and fromraw_data
The second frame
The second frame points to the list of the files contained in the raw_data
folder. Also this one is managed by JS for displaying images that haven't been elaborated yet inside list.
List sorting
The images inside the list, which are the one inside the raw_data
folder, are sorted using the actual elaboration, while the unordered images are inserted in the list using the natural sort implemented by gitea's files page.
List management
Images inside the list, both elaborated and unelaborated, can be sorted and deleted by the user. These functions are implemented with JS and a library called sortable.js.
Image sorting
This function is carried out mainly by the sortable.js library, which makes the divs, containing information about images, draggable and droppable. This gave us the ability to offer a simple way to sort the items.
Image deleting
The page is composed by two containers. One contains the images to be elaborated, while the other one contains the images to be deleted that are added via a button that moves them from a container to another one. This is done only with JS.
Saving changes
All the changes applied by the user are submitted by extracting the modified order and putting it as a JSON in the field customOrder
of .startFrom
file. The same action is done for deleted images. The way the page saves the new JSON string in the file is by getting the first frame, pointing to the editor of .startFrom
file, and with JS extracting the CodeMirror object it sets the text to it. After this the page submits the changes to gitea.