scheduled-plugin-pretalx-br.../tile.js

107 lines
3.5 KiB
JavaScript

var config = {
props: ['config'],
template: `
<div>
<h4>Frab Plugin</h4>
<div class='row'>
<div class='col-xs-3'>
<select class='btn btn-default' v-model="mode">
<option value="all_talks">All Talks</option>
<option value="next_talk">Next Talk</option>
<option value="room">Room Name</option>
<option value="day">Day</option>
</select>
</div>
<div class='col-xs-3'>
<input
type="color"
v-model="color"
class='form-control'/>
</div>
<div class='col-xs-3'>
<select class='btn btn-default' v-model="font_size">
<option value="40">40px</option>
<option value="50">50px</option>
<option value="60">60px</option>
<option value="70">70px</option>
<option value="80">80px</option>
<option value="90">90px</option>
<option value="100">100px</option>
<option value="110">110px</option>
<option value="150">150px</option>
<option value="200">200px</option>
</select>
</div>
</div>
<template v-if='mode == "all_talks"'>
<h4>All Talks options</h4>
<div class='row'>
<div class='col-xs-3'>
<input
type="checkbox"
v-model="all_speakers"
class='form-check-input'/>
Show speaker names
</div>
</div>
</template>
<template v-if='mode == "next_talk"'>
<h4>Next Talk options</h4>
<div class='row'>
<div class='col-xs-3'>
<input
type="checkbox"
v-model="next_abstract"
class='form-check-input'/>
Show abstract
</div>
</div>
</template>
<template v-if='mode == "room"'>
<h4>room options</h4>
<div class='row'>
<div class='col-xs-3'>
<select class='btn btn-default' v-model="room_align">
<option value="left">Align left</option>
<option value="center">Align centered</option>
<option value="right">Align right</option>
</select>
</div>
</div>
</template>
<template v-if='mode == "day"'>
<h4>Day options</h4>
<div class='row'>
<div class='col-xs-3'>
<select class='btn btn-default' v-model="day_align">
<option value="left">Align left</option>
<option value="center">Align centered</option>
<option value="right">Align right</option>
</select>
</div>
<div class='col-xs-3'>
<input
type="text"
v-model="day_template"
placeholder="Template: 'Day %s'"
class='form-control'/>
</div>
</div>
</template>
</div>
`,
computed: {
mode: ChildTile.config_value('mode', 'all_talks'),
color: ChildTile.config_value('color', '#ffffff'),
font_size: ChildTile.config_value('font_size', 70, parseInt),
all_speakers: ChildTile.config_value('all_speakers', true),
next_abstract: ChildTile.config_value('next_abstract', false),
room_align: ChildTile.config_value('room_align', 'left'),
day_align: ChildTile.config_value('day_align', 'left'),
day_template: ChildTile.config_value('day_template', 'Day %d'),
}
}
ChildTile.register({
config: config,
});