settings.html

{% extends 'templates/base.html' %}

{% set title = "ftools" %}

{% block content %}
{% raw %}
<section class="container mt-3">
    <div id="app">
        <div class="alert alert-success my-3" role="alert" v-show="showMessage">
            Settings saved!
        </div>
        <div class="row">
            <div class="col-md-6 mx-auto">
                <div class="card">
                    <div class="card-header">
                        <h2>Settings</h2>
                    </div>
                    <div class="card-body">
                        <form>
                            <div class="form-group">
                                <label for="targetWikiField">Default Target Wiki</label>
                                <input class="form-control" type="text" id="targetWikiField" placeholder="ex: en.wikipedia.org" v-bind:class="{ 'is-invalid': targetWikiInvalid }" v-model.trim="targetWiki">
                                <div class="invalid-feedback">
                                    Not a supported Wiki
                                </div>
                            </div>
                            <input type="button" value="Save Settings" class="btn btn-primary" v-on:click.prevent="save">
                            <input type="button" value="Restore Defaults" class="btn btn-secondary ml-2" v-on:click.prevent="restoreDefaults">
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{% endraw %}
{% endblock%}

{% block scripts %}
{% include 'templates/lib-axios.html' %}

{% raw %}
<script type="module">
    import JSWiki from "/jswiki.js";
    import { defaultTargetWiki } from "/utils.js";

    Vue.createApp({
        data() {
            return {
                targetWiki: "",
                allWikis: null,
                targetWikiInvalid: false,
                settingsUnsupported: false,
                showMessage: false
            }
        },
        created() {

            try {
                const ts = "__test__";
                window.localStorage.setItem(ts, ts);
                window.localStorage.removeItem(ts);

                new JSWiki().siteMatrix().then(result => this.allWikis = result);
                this.targetWiki = defaultTargetWiki();
            }
            catch (e) {
                console.log(e);
                this.settingsUnsupported = true;
            }
        },
        methods: {
            save() {
                if (!this.targetWiki)
                    return;

                this.targetWikiInvalid = false;
                this.showMessage = false;

                this.targetWiki = this.targetWiki.toLowerCase();

                if (this.allWikis.has(this.targetWiki)) {
                    window.localStorage.setItem("targetWiki", this.targetWiki);
                    this.showMessage = true;
                }
                else
                    this.targetWikiInvalid = true;
            },
            restoreDefaults() {
                window.localStorage.clear();
                this.targetWiki = defaultTargetWiki();
            }
        }
    }).mount("#app");
</script>
{% endraw %}
{% endblock %}