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.

The first frame and the .startFrom file

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 the raw_data's file ordered in the same way they're in the images folder
• customOrder, 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 applied
• deleteFile, 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 from raw_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.