[vchess.git] / public / javascripts / components / problemSummary.js

// Show a problem summary on variant page
Vue.component('my-problem-summary', {
	props: ['prob'],
	template: `
		<div class="problem col-sm-12" @click="showProblem()">
			<div class="diagram" v-html="getDiagram(prob.fen)"></div>
			<div class="problem-instructions" v-html="prob.instructions.substr(0,32)"></div>
			<div class="problem-time">{{ timestamp2date(prob.added) }}</div>
		</div>
	`,
	methods: {
		getDiagram: function(fen) {
			const fenParts = fen.split(" ");
			return getDiagram({
				position: fenParts[0],
				// No need for flags here
				turn: fenParts[2],
			});
		},
		timestamp2date(ts) {
			return getDate(new Date(ts));
		},
		// Propagate "show problem" event to parent component (my-problems)
		showProblem: function() {
			this.$emit('show-problem');
		},
	},
})
Commit	Line	Data
da06a6eb BA	1	// Show a problem summary on variant page
	2	Vue.component('my-problem-summary', {
	3	props: ['prob'],
	4	template: `
7931e479 BA	5	<div class="problem col-sm-12" @click="showProblem()">
	6	<div class="diagram" v-html="getDiagram(prob.fen)"></div>
	7	<div class="problem-instructions" v-html="prob.instructions.substr(0,32)"></div>
c794dbb8	8	<div class="problem-time">{{ timestamp2date(prob.added) }}</div>
da06a6eb BA	9	</div>
da06a6eb BA	10	`,
7931e479 BA	11	methods: {
	12	getDiagram: function(fen) {
	13	const fenParts = fen.split(" ");
	14	return getDiagram({
	15	position: fenParts[0],
	16	// No need for flags here
	17	turn: fenParts[2],
	18	});
	19	},
c794dbb8 BA	20	timestamp2date(ts) {
c794dbb8 BA	21	return getDate(new Date(ts));
7931e479	22	},
c794dbb8	23	// Propagate "show problem" event to parent component (my-problems)
7931e479	24	showProblem: function() {
c794dbb8	25	this.$emit('show-problem');
7931e479 BA	26	},
7931e479 BA	27	},
da06a6eb	28	})