Widget: DataExporter: Difference between revisions

From LINKS Community Center
Jump to: navigation, search
Eschmidt (talk | contribs)
No edit summary
Eschmidt (talk | contribs)
No edit summary
 
(17 intermediate revisions by the same user not shown)
Line 4: Line 4:


     <head>
     <head>
        <style>
            #form_wrapper {
                display: flex;
                flex-flow: row wrap;
                justify-content: flex-start;
                align-items: flex-start;
            }
        </style>
         <script>
         <script>
             'use strict';
             'use strict';
            const usr = '/api.php?action=query&meta=userinfo&format=json';
            const dat = '/index.php?title=Category:Disaster_Community_Technology&action=raw';


             const permittedUsers = ['Eschmidt'];
             const permittedUsers = ['Eschmidt'];
Line 15: Line 21:
                 const output = document.getElementById('output');
                 const output = document.getElementById('output');


                 const usrData = await fetch(usr).then(rsp => rsp.json());
                // Check user.
                 const usrData = await fetch(
                    '/api.php?action=query&meta=userinfo&format=json'
                ).then(rsp => rsp.json());
                 if (!permittedUsers.includes(usrData?.query?.userinfo?.name)) {
                 if (!permittedUsers.includes(usrData?.query?.userinfo?.name)) {
                     output.innerHTML = '<span style="color:red; font-size:large">Access Denied</span>';
                     output.innerHTML = '<span style="color:red; font-size:large">Access Denied</span>';
Line 21: Line 30:
                 }
                 }


                 const schema = await fetch(dat).then(rsp => rsp.text());
                 const formData = new FormData(document.getElementById('export_form'));
                const doc = (new DOMParser).parseFromString(schema, 'text/xml');


                 for (const field of doc.querySelectorAll('Field')) {
                // Fetch schema and parse it into an export query.
                     const prop = field.querySelector('semanticmediawiki_Property')?.getAttribute('name') || field.getAttribute('name');
                const schemaXml = await fetch(
                    '/index.php?&action=raw&title=Category:' + formData.get('library')
                ).then(rsp => rsp.text());
                const schema = (new DOMParser).parseFromString(schemaXml, 'text/xml');
 
                let exportUrl = encodeURIComponent(
                    '[[Category:' + formData.get('library').replaceAll('_', ' ') + ']]'
                ).replaceAll('%', '-');
 
                 for (const field of schema.querySelectorAll('Field')) {
                     const prop = field.querySelector('semanticmediawiki_Property')?.getAttribute('name')
                        || field.getAttribute('name');
                     const label = field.querySelector('Label')?.textContent;
                     const label = field.querySelector('Label')?.textContent;
                     output.innerHTML += prop + ' | ' + label + '<br>';
                     exportUrl += '/' + encodeURIComponent('?' + prop).replaceAll('%', '-');
                    if (!!label) exportUrl += '%3D' + encodeURIComponent(label).replaceAll('%', '-');
                 }
                 }


                 // output.innerText = schema;
                 exportUrl += '/format%3Dspreadsheet/fileformat%3D' + formData.get('fileformat');
                output.innerHTML = exportUrl;
 
                // const exportParams = new URLSearchParams();
                // exportParams.set('action', 'ask');
                // exportParams.set('format', 'spreadsheet');
                // exportParams.set('fileformat', formData.get('fileformat'));
                // exportParams.set('query', encodeURIComponent(exportUrl));
 
                // fetch('/api.php?' + exportParams.toString());
 
                // const dl = document.createElement('a');
                // dl.href = 'https://links.communitycenter.eu/index.php/Special:Ask/' + exportUrl;
                // dl.download = 'export.' + formData.get('fileformat');
                // document.body.appendChild(dl);
                // dl.click();
                // document.body.removeChild(dl);
 
                fetch('https://links.communitycenter.eu/index.php/Special:Ask/' + exportUrl)
                    .then(res => res.blob())
                    .then(blob => {
                        const file = window.URL.createObjectURL(blob);
                        window.location.assign(file);
                    })
 
                // exportUrl = '/api.php?action=ask&format=spreadsheet&query=[[Category:Disaster Community Technology]]';
                // exportUrl = '/api.php?action=ask&format=spreadsheet&query=[[Category:Use Cases]]';
                // exportUrl = '/api.php?action=ask&format=spreadsheet&query=[[Category:Guideline]]';
 
                // exportUrl += ''; // &fileformat=csv  &fileformat=ods  &fileformat=xlsx
                // exportUrl += ''; // &filename=MyFilename <- LIB+DATE
             }
             }
         </script>
         </script>
Line 37: Line 87:
     <body>
     <body>
         <button type="button" onclick="exportData()">Export Data</button>
         <button type="button" onclick="exportData()">Export Data</button>
        <form id="export_form">
            <div id="form_wrapper">
                <fieldset>
                    <legend>Library</legend>
                    <input type="radio" id="lib_TL" name="library" value="Disaster_Community_Technology" checked>
                    <label for="lib_TL">Technologies</label><br>
                    <input type="radio" id="lib_UCL" name="library" value="Use_Cases">
                    <label for="lib_UCL">Use Cases</label><br>
                    <input type="radio" id="lib_GL" name="library" value="Guideline">
                    <label for="lib_GL">Guidelines</label>
                </fieldset>
                <fieldset>
                    <legend>Format</legend>
                    <input type="radio" id="file_XLSX" name="fileformat" value="xlsx" checked>
                    <label for="file_XLSX">Excel (.xlsx)</label><br>
                    <input type="radio" id="file_ODS" name="fileformat" value="ods">
                    <label for="file_ODS">OpenOffice (.ods)</label><br>
                    <input type="radio" id="file_CSV" name="fileformat" value="csv">
                    <label for="file_CSV">CSV (.csv)</label>
                </fieldset>
            </div>
        </form>
         <div id="output"></div>
         <div id="output"></div>
     </body>
     </body>

Latest revision as of 13:34, 17 August 2023