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

134 lines
4 KiB
JavaScript
Raw Normal View History

var config = {
props: ['config'],
template: `
<div>
<h4>Frab Plugin</h4>
<div class='row'>
<div class='col-xs-3'>
2023-09-30 08:02:33 +00:00
Display Mode<br/>
<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'>
Text Colour<br/>
<input
type="color"
v-model="color"
class='form-control'/>
</div>
<div class='col-xs-3'>
2023-09-30 08:01:04 +00:00
Font Size<br/>
<input
type="number"
class='form-control'
v-model="font_size" />
</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 class='col-xs-3'>
<input
type="checkbox"
v-model="next_track_text"
class='form-check-input'/>
Show track name instead of coloured bar
</div>
</div>
</template>
2023-09-29 13:50:27 +00:00
<template v-if='mode == "room"'>
<h4>room options</h4>
<div class='row'>
<div class='col-xs-3'>
2023-09-30 08:02:33 +00:00
Alignment<br/>
2023-09-29 13:50:27 +00:00
<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 class='col-xs-3'>
<input
type="checkbox"
v-model="room_animate"
class='form-check-input'/>
Fade in and out
</div>
2023-09-29 13:50:27 +00:00
</div>
2023-09-29 13:52:00 +00:00
</template>
<template v-if='mode == "day"'>
2023-09-29 13:53:48 +00:00
<h4>Day options</h4>
<div class='row'>
<div class='col-xs-3'>
2023-09-30 08:02:33 +00:00
Alignment<br/>
<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'>
2023-09-30 08:01:04 +00:00
Format<br/>
<input
type="text"
v-model="day_template"
placeholder="Template: 'Day %s'"
class='form-control'/>
</div>
<div class='col-xs-3'>
<input
type="checkbox"
v-model="day_animate"
class='form-check-input'/>
Fade in and out
</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),
next_track_text: ChildTile.config_value('next_track_text', false),
2023-09-29 13:50:27 +00:00
room_align: ChildTile.config_value('room_align', 'left'),
room_animate: ChildTile.config_value('room_animate', true),
day_align: ChildTile.config_value('day_align', 'left'),
day_template: ChildTile.config_value('day_template', 'Day %d'),
day_animate: ChildTile.config_value('day_animate', false),
}
}
ChildTile.register({
config: config,
});