const HomeRouter = {
    template: `
<div>
<div id="om-msg-cards" class="is-hidden-desktop">
    <MsgCard
        v-for="id in messagelist.slice().reverse()"
        :key="id"
        :msg="messages[id] || {}"
    ></MsgCard>
</div>

<div id="om-msg-cards" class="column is-three-quarters is-pulled-right is-hidden-touch content-desktop">
    <MsgCard
        v-for="id in messagelist.slice().reverse()"
        :key="id"
        :msg="messages[id] || {}"
    ></MsgCard>
</div>
</div>`,
    data: function () {
        return {
            messagelist: _messagelist,
            messages: _messages,
        };
    },
    methods: {
        list_messages: function() {
            messages();
        }
    },

    mounted: function () {
        this.list_messages();
        //this.refresh_messages();
    }
};

function get_insert_message(id) {
    $.ajax({ url: "api/msg/id/"+id, method: "GET" }).done(function (msg) {
        Vue.set(_messages, id, msg);
    }).fail(function (e, f, g) {
        console.log("cannot load " + id + ".json: " + e + f + g);
    })
}