const HomeRouter = {
    template: `
<div id="om-msg-cards">
    <MsgCard
        v-for="id in messagelist"
        :key="id"
        :msg="messages[id] || {}"
    ></MsgCard>
</div>`,
    data: function () {
        return {
            messagelist: _messagelist,
            messages: _messages,
        };
    },
    methods: {
        /*refresh_messages: function () {
            _messages.push({ //////// alt
                id: 42,
                subject: "xxx",
                message: "warum habt ihr auch so viel",
                user: "nobody",
                tags: "foo"
            });
        },*/
		list_messages: function () {
			console.log("egal");
			$.get('api/ids/').done(function (jd) {
        		// _messagelist = jd;
        		_messagelist.splice(0, _messagelist.length);
        		_messagelist.push.apply(_messagelist, jd);
        		console.log("egal2");
        		//$('#xxx').text(jd[0]);
        		for (var e in jd) {
            		if (!_messages[jd[e]]) {
                		get_insert_message(jd[e]);
            		}
        		}
    		}).fail(function (e, f, g) {
        		console.log("egal3: " + e + f + g);
    		});
		}
    },

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

function get_insert_message(msg_id) {
    $.get(api/msg/{msg_id}).done(function (msg) {
        // _messages[id] = msg;
        Vue.set(_messages, id, msg);
    }).fail(function (e, f, g) {
        console.log("cannot load " + id + ".json: " + e + f + g);
    })
}
/*$(document).ready(function () {
    console.log("egal");
    $.get('list.json').done(function (jd) {
        // _messagelist = jd;
        _messagelist.splice(0, _messagelist.length);
        _messagelist.push.apply(_messagelist, jd);
        console.log("egal2");
        //$('#xxx').text(jd[0]);
        for (var e in jd) {
            if (!_messages[jd[e]]) {
                get_insert_message(jd[e]);
            }
        }
    }).fail(function (e, f, g) {
        console.log("egal3: " + e + f + g);
    });
});*/