//Access the server services by importing all the facilities that are in the //server module in the schema foler of our library import * as server from "../../../schema/v/code/server.js"; // //Access the library needed for saving data to a database (from Javascript) import * as quest from "../../../schema/v/code/questionnaire.js"; // //Declare the elements of interests // //The image element in in the panel one var first_page: HTMLElement; // //This is the panel that represents the other pages of the document var other_pages: HTMLElement; // //The couner for documents being displayed var counter: number = 0; // //Declare the trsnscrption elements var input_Elements: HTMLInputElement; // //Get the documents to drive our page. A document has the following structure:- type doc = { doc_page: number; document: string; pages: string; title_no: string; category: string; area: number; owner: string; regno: string; }; //A page comprises of just a number and teh url of the image type page = { num: string; url: string; name: string }; // //Save the results of interrogating the database to an array of documnets var docs: Array; // //Loading multipe titles that can move from one title to ythe other export async function load_mutiples_titles() { // //Initialize the variabls that represent html elemens in ou page, including settinup the event listeners await initialize(); // //Load the current title load_title(); } // //Initializing the element will async function initialize() { // //intialize the page one panel first_page = document.getElementById("first_page")!; // //intialize the other pages panel other_pages = document.getElementById("other_pages")!; // // Attach an event listener for moving to the document document.getElementById("next_button")!.onclick = () => move_next(); // // Attach an event listener for moving to the document document.getElementById("previous_button")!.onclick = () => move_previous(); // // Attach an event listener for moving to the document document.getElementById("save_data_btn")!.onclick = () => save_data(); // //Initialize the transcription elements input_Elements = document.getElementById("type"); // //Read the data from the masjambe database and save it ith the documents //array docs = await server.exec( "database", ["mutall_mashamba", false], "get_sql_data", ["/mashamba/v/code/mashamba.sql", "file"] ); } // // Load the current document to the home page depending async function load_title() { // // Clear all the 3 panels, viz., first_page, other_pages and transcription clear_panels(); // // Get the pages of the given current document number const pages: Array = JSON.parse(docs[counter].pages); // // Create the first page, including its image create_first_page(pages[0]); // // Fill the transcription panel for (const key of [ "doc_page", "document", "title_no", "category", "area", "owner", "regno", ]) fill_transcriptions(key); // // Create and show the other_pages panel for (let i = 1; i < pages.length; i++) create_other_page(pages[i]); } function create_other_page(page: page) { // // Create an image element for this page const image = document.createElement("img"); // // Set the source of the image to the URL of the page image.src = `http://localhost${page.url}`; // // Attach the image element to the other-pages div element other_pages.appendChild(image); } //clear all the 3 panels function clear_panels() { // // Clear the first page first_page.innerHTML = ""; // // Clear the other_pages panels other_pages.innerHTML = ""; // // Clear all the inputs of the transcription panel, by looping over all // the keys of a document, except the pages key /* document:string, pages:string, title_no:string, category:string, area:number, owner:string, regno:string */ for (const key of [ "doc_page", "document", "title_no", "category", "area", "owner", "regno", ]) { // // Skip the pages key (because it is a special key) if (key === "pages") continue; // // Get the named element const element = document.getElementById(key); // // Se its value to empty element.value = ""; } } // // Set the url of the first image of the pages function create_first_page(page: page) { // // Get url of of the first page const url: string = page.url; // // Create the first page image const image1 = document.createElement("img"); // // Attach the image to page1 first_page.appendChild(image1); // // Set the url of the page image1.src = `http://localhost${url}`; } // // this will help in moving to next document function move_next() { // // Increate the counter by 1 counter++; // Load tthe titles using the new counter load_title(); } // // this will help in moving to next document function move_previous() { // // Increate the counter by 1 counter--; // Load tthe titles using the new counter load_title(); } // Fill the transcriptions, by transferring the values from from the global // array, data array to // the transciption panel function fill_transcriptions(key: keyof doc) { // //Skip the pages key (because it is a special key) if (key === "pages") return; // //Get the named element const element = document.getElementById(key); // //Get the value that maches the key const value = docs[counter][key]; // //Set the element vale only if the value is not null if (value!==null)element.value = String(value); } type keys = "doc_page"|"document"|"title_no"|"category"|"area"|"owner"|"regno"; // // Get the data from the input elements and send and save them to various // tables in the mutall_mashamba database async function save_data() { // //Collect the data to save, as layouts // //Get the ids of the html elements that hp;d the data const ids:{[key in keys]:[string, string]} = { doc_page:['document','document'], document:['document', 'id'], title_no:['title', 'id'], category:['category','name'], area:['document','area'], owner:['document','person'], regno:['document','regno'] } // //The elements will now bw mapped with layouts const layouts:Array = Object.keys(ids).map(k=>{ // //Coerce k into of of the document keys const key = k; // //Get the values of the elements const value = (document.getElementById(key)).value; // //Show the entity name where the data will be saved in the database const ename:string = ids[key][0]; // //Show which column in the database the value will be saved const cname:string = ids[key][1]; // //Get the values ready for saving return [value, ename, cname]; }); // //Use questionnaire to save the data and get the results const result:'Ok'|string = await server.exec( // //The name of the PHP class to use is questionnaire "questionnaire", // //The constructor parameter of questionnare is one: database name ['mutall_mashamba'], // //The name of the questionnare method to use is the common lodig system 'load_common', // //The mandory parameter of the load commom method is one: layput [layouts] ); // //Report the result alert(result); }