OGS-Main
/
ogs-site

<!DOCTYPE html>
<html>
    <meta charset="utf-8">
    <head>
        <style>
            table
            {
                border-collapse: collapse;
            }
            
            table, th, td
            {
                border: 1px solid #aaa;
                padding: 0.5em;
                margin-top: 0.5em;
                margin-bottom: 0.5em;
            }
            
            .error
            {
                color: red;
            }
            
            .section
            {
                text-align: center;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td colspan="2" class="section">
                    <a href="http://opengamestudio.org/lfsa">Local file system access</a>
                </td>
            </tr>
            <tr>
                <td>Path:</td>
                <td id="lfsaPath">Updating...</td>
            </tr>
            <tr>
                <td colspan="2" class="section">
                    Configuration
                    <button type="button" onclick="window.pskovTool.saveCfg()">Save</button>
                </td>
            </tr>
            <tr>
                <td>Input directory:</td>
                <td><input id="input"></input>
            </tr>
            <tr>
                <td>News item template:</td>
                <td><input id="item"></input>
            </tr>
            <tr>
                <td>News preview template:</td>
                <td><input id="preview"></input>
            </tr>
            <tr>
                <td>Index template:</td>
                <td><input id="index"></input>
            </tr>
            <tr>
                <td>Output directory:</td>
                <td><input id="output"></input>
            </tr>
            <tr>
                <td colspan="2" class="section">Log</td>
            </tr>
            <tr>
                <td id="log" colspan="2"></td>
            </tr>
        </table>
        <script type="text/javascript">
            <!-- LFSA.js -->
            // LFSA class to communicate with local-file-system-access instance.
            function LFSA()
            {
                this.host = "http://127.0.0.1";
                this.port = 8000;
            }
            LFSA.prototype.get = function(url, successCallback, failureCallback)
            {
                var req = new XMLHttpRequest();
                req.addEventListener(
                    "load",
                    function()
                    {
                        //console.log("get.successCallback.responseText: '" + this.responseText + "'");
                        successCallback(this.responseText);
                    }
                );
                req.addEventListener(
                    "error",
                    function()
                    {
                        failureCallback();
                    }
                );
                req.addEventListener(
                    "abort",
                    function()
                    {
                        failureCallback();
                    }
                );
            
                const prefix = this.host + ":" + this.port;
                const addr = prefix + url;
                //console.log("GET addr: '" + addr + "'");
                req.open("GET", addr);
                req.send();
            }
            LFSA.prototype.requestPath = function(successCallback, failureCallback)
            {
                this.get("/path", successCallback, failureCallback);
            }
            LFSA.prototype.post = function(url, data, successCallback, failureCallback)
            {
                var req = new XMLHttpRequest();
                req.addEventListener(
                    "load",
                    function()
                    {
                        console.log("POST.successCallback.responseText: '" + this.responseText + "'");
                        successCallback(this.responseText);
                    }
                );
                req.addEventListener(
                    "error",
                    function()
                    {
                        failureCallback();
                    }
                );
                req.addEventListener(
                    "abort",
                    function()
                    {
                        failureCallback();
                    }
                );
            
                const prefix = this.host + ":" + this.port;
                const addr = prefix + url;
                console.log("POST addr: '" + addr + "'");
                req.open("POST", addr);
                req.send(data);
            }
            LFSA.prototype.requestFileList = function(dir, successCallback, failureCallback)
            {
                this.post(
                    "/list",
                    dir,
                    function(response)
                    {
                        var json = JSON.parse(response);
                        successCallback(json);
                    },
                    failureCallback
                );
            }
            LFSA.prototype.requestFile = function(path, successCallback, failureCallback)
            {
                this.post(
                    "/read",
                    path,
                    successCallback,
                    failureCallback
                );
            }
            LFSA.prototype.saveFile = function(path, contents, successCallback, failureCallback)
            {
                var data = {};
                data["path"] = path;
                data["contents"] = btoa(contents);
                var datastr = JSON.stringify(data);
            
                this.post(
                    "/write",
                    datastr,
                    successCallback,
                    failureCallback
                );
            }

            <!-- Reusable -->
            function fileExists(fileName, fileList)
            {
                for (var id in fileList)
                {
                    var file = fileList[id];
                    if (file.path === fileName)
                    {
                        return true;
                    }
                }
                return false;
            }
            // Topic: Create GUID / UUID in JavaScript?
            // Source: https://stackoverflow.com/a/2117523
            function generateUUID()
            {
                return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(
                    /[xy]/g,
                    function(c)
                    {
                        var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
                        return v.toString(16);
                    }
                );
            }
            function LOG(message)
            {
                var log = document.getElementById("log");
                var now = new Date();
                log.innerHTML += now.toISOString() + " " + message + "<br>";
            }
            function parseINI(contents)
            {
                var cfg = { };
                var lines = contents.split(/\r\n|\r|\n/);
                for (var id in lines)
                {
                    var line = lines[id];
                    var keyAndValue = line.split(/=/);
                    if (keyAndValue.length == 2)
                    {
                        var key = keyAndValue[0].trim();
                        var value = keyAndValue[1].trim();
                        cfg[key] = value;
                    }
                }
            
                return cfg;
            }
            // ReporterSubscription class.
            
            function ReporterSubscription(id, callback, reporter)
            {
                this.id = id;
                this.callback = callback;
                this.reporter = reporter;
            }
            
            // Reporter class.
            
            function Reporter(name)
            {
                this.name =
                    (typeof name !== "undefined") ? 
                    name :
                    "";
                this.subscriptions = [];
            }
            
            Reporter.prototype.report = function()
            {
                for (var id in this.subscriptions)
                {
                    var subscription = this.subscriptions[id];
                    subscription.callback();
                }
            }
            
            Reporter.prototype.subscribe = function(callback)
            {
                var id = generateUUID();
                var subscription = new ReporterSubscription(id, callback, this);
                this.subscriptions.push(subscription);
                return subscription;
            }

            <!-- Tool.js -->
            // Tool class.
            function Tool()
            {
                this.lfsa = new LFSA();
                this.cfgExists = false;
                this.cfgExistsChanged = new Reporter();
                this.cfg = {};
                this.cfgChanged = new Reporter();
                this.cfgSaved = new Reporter();
            }
            // Tool's startup sequence.
            Tool.prototype.run = function()
            {
                var self = this;
                this.refreshLFSAPath();
                this.checkCfgExistence();
                this.cfgExistsChanged.subscribe(function(){
                    LOG("cfgExistsChanged. cfgExists: '" + self.cfgExists + "'");
                });
                this.cfgExistsChanged.subscribe(function(){
                    self.readCfg();
                });
                this.cfgChanged.subscribe(function(){
                    LOG("cfgChanged. cfg: '" + self.cfg + "'");
                });
                this.cfgChanged.subscribe(function(){
                    self.displayCfg();
                });
                this.cfgSaved.subscribe(function(){
                    self.readCfg();
                });
            }
            Tool.prototype.refreshLFSAPath = function()
            {
                var lfsaPath = document.getElementById("lfsaPath");
            
                var success = function(response)
                {
                    lfsaPath.innerHTML = response;
                }
                var failure = function()
                {
                    lfsaPath.innerHTML = "<span class='error'>Error</span>";
                }
            
                this.lfsa.requestPath(success, failure);
            }
            Tool.prototype.checkCfgExistence = function()
            {
                var self = this;
            
                var success = function(fileList)
                {
                    var cfgExists = fileExists("cfg", fileList);
                    if (!cfgExists)
                    {
                        LOG("ERROR `cfg` file does not exist");
                        return;
                    }
            
                    // Report.
                    self.cfgExists = true;
                    self.cfgExistsChanged.report();
                }
                var failure = function()
                {
                    LOG("ERROR Could not check if `cfg` exists");
                }
            
                this.lfsa.requestFileList("", success, failure);
            }
            Tool.prototype.readCfg = function()
            {
                var self = this;
            
                var success = function(contents)
                {
                    self.cfg = parseINI(contents);
                    self.cfgChanged.report();
                }
                var failure = function()
                {
                    LOG("ERROR Could not read `cfg` file");
                }
            
                this.lfsa.requestFile("cfg", success, failure);
            }
            Tool.prototype.displayCfg = function()
            {
                var input = document.getElementById("input");
                input.value = this.cfg["input"];
                var item = document.getElementById("item");
                item.value = this.cfg["item"];
                var preview = document.getElementById("preview");
                preview.value = this.cfg["preview"];
                var index = document.getElementById("index");
                index.value = this.cfg["index"];
                var output = document.getElementById("output");
                output.value = this.cfg["output"];
            }
            Tool.prototype.saveCfg = function()
            {
                // Compose cfg file to save.
                var cfgFile = "";
                var input = document.getElementById("input");
                cfgFile += "input = " + input.value + "\n";
                var item = document.getElementById("item");
                cfgFile += "item = " + item.value + "\n";
                var preview = document.getElementById("preview");
                cfgFile += "preview = " + preview.value + "\n";
                var index = document.getElementById("index");
                cfgFile += "index = " + index.value + "\n";
                var output = document.getElementById("output");
                cfgFile += "output = " + output.value + "\n";
            
                // Save file.
                var self = this;
            
                var success = function()
                {
                    self.cfgSaved.report();
                }
                var failure = function()
                {
                    LOG("ERROR Could not save `cfg` file");
                }
            
                this.lfsa.saveFile("cfg", cfgFile, success, failure);
            }

            <!-- Startup -->
            window.pskovTool = new Tool();
            window.pskovTool.run()
        </script>
    </body>
</html>