Neustrashimy/archiveloader.html

## archiveloader.html
<!DOCTYPE html>
<html lang="en">
    <!--
    Copyright (c) 2022 Neustrashimy
        https://github.com/Neustrashimy
        https://nagoyadon.jp/@kumasun

    Released under the MIT license
    http://opensource.org/licenses/mit-license.php
    -->
<head>
    <title>ActivityPub Archive Loader</title>
    <meta charset="utf-8">
</head>
<body>

    <ul>
        <li>Limit: <input type="number" id="limit" name="limit" min="1" value="1000"></li>
        <li><input type="checkbox" id="Invert_check" name="Invert_check" checked><label for="Invert_check">Invert Order</label></li>
        <li>File：<input type="file" id="file" name="file" accept="application/json"/>（Please select outbox.json）</li>
        <li><input type="checkbox" id="Debug" name="Debug_check"><label for="Debug_check">Debug</label></li>
    </ul>
    <hr />

    <table id="statuses" width="100%" border=1>
        <thead>
            <tr>
                <td width="200px">published</td>
                <td>content</td>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
</body>


<script language="javascript">

    // --- Global variables
    var file   = undefined; // File object
    var debug  = false;
    var tbody  = document.querySelector('#statuses tbody');

    // --- initializations
    if (window.File && window.FileReader && window.FileList && window.Blob) {
        // Great success! All the File APIs are supported.
    } else {
        alert('This script may not work properly on your browser.');
    }
    tbody.textContent = null;

    // --- Global functions
    function isValidUrl(str){
        var url;
        try{
            url = new URL(str);
        } catch(e){
            return false;
        }
        return true;
    }

    function toggleVisibility(elem){
        if(elem.style.display === 'none'){
            elem.style.display = 'block';
        } else {
            elem.style.display = 'none';
        }
    }

    function renderFile(file, start = 0, limit = Number.MAX_SAFE_INTEGER, inverted = false) {
        debug = document.getElementsByName("Debug_check")[0].checked;
        console.log("renderFile: start=" + start + ", limit=" + limit + ", inverted=" + inverted + ", debug=" + debug);

        var reader = new FileReader();

        reader.onload = function(e) {
            var data = JSON.parse(e.target.result);
            var statuses = data.orderedItems;

            if(inverted){
                statuses = statuses.reverse();
            }

            var count = 0;
            for(var i = start; i < statuses.length; i++){
                var status = statuses[i];

                if(debug) { console.log(JSON.stringify(status, null, 4)); }

                var row_tr = document.createElement('tr');
                var date_td = document.createElement('td');
                var content_td = document.createElement('td');
                date_td.innerHTML = status.published;


                // is status has summary?
                if(status.object.summary){
                    var summary_p = document.createElement('p');
                    summary_p.innerHTML = status.object.summary + " [SHOW MORE]";
                    summary_p.addEventListener('click', function(){
                        toggleVisibility(this.nextElementSibling);
                    });
                    content_td.appendChild(summary_p);
                }

                // build main content
                var content_div = document.createElement('div');
                if(status.object.content !== undefined){
                    content_div.innerHTML = status.object.content;
                    if(status.object.summary){
                        content_div.style.display = 'none';
                    }
                } else {
                    var boosted_a = document.createElement('a');
                    boosted_a.href = status.object;
                    boosted_a.innerHTML = "Boosted Content: " + status.object;
                    content_div.appendChild(boosted_a);
                }
                content_td.appendChild(content_div);

                // is status has Attachment(s)?
                if(status.object.attachment !== undefined && status.object.attachment.length > 0){
                    // build attachment list
                    var attach_ul = document.createElement('ul');
                    for(var k = 0; k < status.object.attachment.length; k++){
                        var attach_li = document.createElement('li');
                        attach_li.innerHTML = 'Attach ' + (k+1) + ': ' + status.object.attachment[k].url;
                        attach_ul.appendChild(attach_li);
                    }
                    // insert into content
                    content_td.appendChild(attach_ul);
                }

                row_tr.appendChild(date_td);
                row_tr.appendChild(content_td);
                tbody.appendChild(row_tr);
                count++;
                if(count >= limit){
                    break;
                }
            }
            console.log("renderFile: rendered " + count + " statuses");
        };
        reader.readAsText(file);
    }


    // --- Event listeners
    function handleFileSelect(evt) {
        var limit = parseInt(document.getElementById('limit').value, 10);
        var invert = document.getElementsByName("Invert_check")[0].checked;

        tbody.textContent = null;
        file = evt.target.files[0]; // File object
        renderFile(file, 0, limit, invert);
    }

    function handleParameterChanged(evt){
        var limit = parseInt(document.getElementById('limit').value, 10);
        var invert = document.getElementsByName("Invert_check")[0].checked;
        if(file){
            tbody.textContent = null;
            renderFile(file, 0, limit, invert);
        }
    }

    function handleReloadClicked(evt){
        var limit = parseInt(document.getElementById('limit').value, 10);
        var invert = document.getElementsByName("Invert_check")[0].checked;
        if(file){
            tbody.textContent = null;
            renderFile(file, 0, limit, invert);
        }
    }

    // --- Event listener Registers
    document.getElementById('file').addEventListener('change', handleFileSelect, false);
    document.getElementById('Invert_check').addEventListener('change', handleParameterChanged, false);
    document.getElementById('limit').addEventListener('change', handleParameterChanged, false);

    console.log("initialize done.");
</script>

</html>
	<!DOCTYPE html>
	<html lang="en">
	<!--
	Copyright (c) 2022 Neustrashimy
	https://github.com/Neustrashimy
	https://nagoyadon.jp/@kumasun

	Released under the MIT license
	http://opensource.org/licenses/mit-license.php
	-->
	<head>
	<title>ActivityPub Archive Loader</title>
	<meta charset="utf-8">
	</head>
	<body>

	<ul>
	<li>Limit: <input type="number" id="limit" name="limit" min="1" value="1000"></li>
	<li><input type="checkbox" id="Invert_check" name="Invert_check" checked><label for="Invert_check">Invert Order</label></li>
	<li>File：<input type="file" id="file" name="file" accept="application/json"/>（Please select outbox.json）</li>
	<li><input type="checkbox" id="Debug" name="Debug_check"><label for="Debug_check">Debug</label></li>
	</ul>
	<hr />

	<table id="statuses" width="100%" border=1>
	<thead>
	<tr>
	<td width="200px">published</td>
	<td>content</td>
	</tr>
	</thead>
	<tbody>

	</tbody>
	</table>
	</body>


	<script language="javascript">

	// --- Global variables
	var file = undefined; // File object
	var debug = false;
	var tbody = document.querySelector('#statuses tbody');

	// --- initializations
	if (window.File && window.FileReader && window.FileList && window.Blob) {
	// Great success! All the File APIs are supported.
	} else {
	alert('This script may not work properly on your browser.');
	}
	tbody.textContent = null;

	// --- Global functions
	function isValidUrl(str){
	var url;
	try{
	url = new URL(str);
	} catch(e){
	return false;
	}
	return true;
	}

	function toggleVisibility(elem){
	if(elem.style.display === 'none'){
	elem.style.display = 'block';
	} else {
	elem.style.display = 'none';
	}
	}

	function renderFile(file, start = 0, limit = Number.MAX_SAFE_INTEGER, inverted = false) {
	debug = document.getElementsByName("Debug_check")[0].checked;
	console.log("renderFile: start=" + start + ", limit=" + limit + ", inverted=" + inverted + ", debug=" + debug);

	var reader = new FileReader();

	reader.onload = function(e) {
	var data = JSON.parse(e.target.result);
	var statuses = data.orderedItems;

	if(inverted){
	statuses = statuses.reverse();
	}

	var count = 0;
	for(var i = start; i < statuses.length; i++){
	var status = statuses[i];

	if(debug) { console.log(JSON.stringify(status, null, 4)); }

	var row_tr = document.createElement('tr');
	var date_td = document.createElement('td');
	var content_td = document.createElement('td');
	date_td.innerHTML = status.published;


	// is status has summary?
	if(status.object.summary){
	var summary_p = document.createElement('p');
	summary_p.innerHTML = status.object.summary + " [SHOW MORE]";
	summary_p.addEventListener('click', function(){
	toggleVisibility(this.nextElementSibling);
	});
	content_td.appendChild(summary_p);
	}

	// build main content
	var content_div = document.createElement('div');
	if(status.object.content !== undefined){
	content_div.innerHTML = status.object.content;
	if(status.object.summary){
	content_div.style.display = 'none';
	}
	} else {
	var boosted_a = document.createElement('a');
	boosted_a.href = status.object;
	boosted_a.innerHTML = "Boosted Content: " + status.object;
	content_div.appendChild(boosted_a);
	}
	content_td.appendChild(content_div);

	// is status has Attachment(s)?
	if(status.object.attachment !== undefined && status.object.attachment.length > 0){
	// build attachment list
	var attach_ul = document.createElement('ul');
	for(var k = 0; k < status.object.attachment.length; k++){
	var attach_li = document.createElement('li');
	attach_li.innerHTML = 'Attach ' + (k+1) + ': ' + status.object.attachment[k].url;
	attach_ul.appendChild(attach_li);
	}
	// insert into content
	content_td.appendChild(attach_ul);
	}

	row_tr.appendChild(date_td);
	row_tr.appendChild(content_td);
	tbody.appendChild(row_tr);
	count++;
	if(count >= limit){
	break;
	}
	}
	console.log("renderFile: rendered " + count + " statuses");
	};
	reader.readAsText(file);
	}


	// --- Event listeners
	function handleFileSelect(evt) {
	var limit = parseInt(document.getElementById('limit').value, 10);
	var invert = document.getElementsByName("Invert_check")[0].checked;

	tbody.textContent = null;
	file = evt.target.files[0]; // File object
	renderFile(file, 0, limit, invert);
	}

	function handleParameterChanged(evt){
	var limit = parseInt(document.getElementById('limit').value, 10);
	var invert = document.getElementsByName("Invert_check")[0].checked;
	if(file){
	tbody.textContent = null;
	renderFile(file, 0, limit, invert);
	}
	}

	function handleReloadClicked(evt){
	var limit = parseInt(document.getElementById('limit').value, 10);
	var invert = document.getElementsByName("Invert_check")[0].checked;
	if(file){
	tbody.textContent = null;
	renderFile(file, 0, limit, invert);
	}
	}

	// --- Event listener Registers
	document.getElementById('file').addEventListener('change', handleFileSelect, false);
	document.getElementById('Invert_check').addEventListener('change', handleParameterChanged, false);
	document.getElementById('limit').addEventListener('change', handleParameterChanged, false);

	console.log("initialize done.");
	</script>

	</html>