pfSense Todo Widget

[matyi.szabolcs]

Hi everyone,
I created a Todo widget and would like to share it in case you are interested. To ensure it remains after updates, it needs to be set up with the Filer plugin. It’s very simple; it only requires a PHP file and writes to a TXT file (/conf/todo_list.txt).

So the steps are:

System / Package Manager / Available Packages / Install "Filer"
Diagnostics / Filer / Files / "Add"

File: /usr/local/www/widgets/widgets/todo.widget.php
Description: Todo Widget
File Contents:

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    file_put_contents('/conf/todo_list.txt', $_POST['todo_list']);
    exit;
}
?>

<div>
    <form id="todo_form">
        <textarea name="todo_list" id="todo_list" rows="10" style="width:100%;"><?=htmlspecialchars(file_get_contents('/conf/todo_list.txt'))?></textarea>
        <button type="button" class="btn btn-primary btn-sm" id="save_todo">Save</button>
    </form>
    <div id="save_status"></div>
</div>

<script>
document.getElementById('save_todo').addEventListener('click', function() {
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/widgets/widgets/todo.widget.php', true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            document.getElementById('save_status').innerHTML = 'Saved!';
            setTimeout(function() {
                document.getElementById('save_status').innerHTML = '';
            }, 2000);
        }
    };
    var data = 'todo_list=' + encodeURIComponent(document.getElementById('todo_list').value);
    xhr.send(data);
});
</script>

Save

Then you can add the Todo widget on the Status page.
Enjoy!