Page MenuHome

vue-components.html
No OneTemporary

File Metadata

Created
Tue, Nov 12, 11:09 PM

vue-components.html

<!-- Templates for the Vue.js components -->
<!-- template for the 'status' Vue.js component -->
<script type='text/x-template' id='template_status'>
<div id='status'>
<p v-if='errormsg' class='error'>{{ errormsg }}</p>
<dl v-else class="row">
<dt class='col-md-5'>Nr. of workers</dt>
<dd class='col-md-7'>{{ serverinfo.nr_of_workers }}</dd>
<dt class='col-md-5' title="Number of tasks in database. Probably not all queued.">Nr. of tasks</dt>
<dd class='col-md-7'>{{ serverinfo.nr_of_tasks }}</dd>
<dt class='col-md-5' title="Number of task updates queued for sending to Flamenco Server.">Upstream Queue</dt>
<dd class='col-md-7'>{{ serverinfo.upstream_queue_size }}</dd>
<dt class='col-md-5'>Server</dt>
<dd class='col-md-7'><a :href="serverinfo.server.url">{{ serverinfo.server.name }}</a></dd>
<dt class='col-md-5' title="Workers not seen in a long time.">Old workers</dt>
<dd class='col-md-7'>
<idle-worker
v-for="worker in idle_workers"
:key="worker._id"
:worker="worker"
@forget-worker="forgetWorker(worker)">
</idle-worker>
</dd>
</dl>
</div>
</script>
<!-- template for the 'idle-worker' Vue.js component -->
<script type='text/x-template' id='template_idle_worker'>
<span>
<span class="idle-worker-name" :title="worker._id">{{ worker.nickname }}</span>
<span @click="$emit('forget-worker', worker)" class="forget-worker worker-action" title="click to forget worker">x</span>
</span>
</script>
<!-- template for the 'action-button' Vue.js component -->
<script type='text/x-template' id='template_action_button'>
<a class='worker-action'
@click="$emit('worker-action', worker_id, action_key)"
>{{action.icon}}</a>
</script>
<!-- template for the 'worker-table' Vue.js component -->
<script type='text/x-template' id='template_worker_table'>
<div>
<action-bar
:workers="workers"
:selected_worker_ids="selected_worker_ids"
:show_schedule="show_schedule"
@toggle-schedule='show_schedule = !show_schedule'
></action-bar>
<table class="table table-condensed table-striped">
<thead>
<tr>
<th></th>
<th>Nickname</th>
<th>Status</th>
<th>Scheduled</th>
<template v-if="show_schedule">
<th>Sleep Days</th>
<th>Sleep Start</th>
<th>Sleep End</th>
<th></th>
</template>
<template v-else>
<th>Cur/last Task</th>
<th>Last Seen</th>
<th>ID</th>
<th>Address</th>
<th>Software</th>
</template>
</tr>
</thead>
<tbody id='workers'>
<tr is="worker-row"
v-for="worker in workers"
:key="worker._id"
:worker="worker"
:selected_worker_ids="selected_worker_ids"
:show_schedule="show_schedule"
@worker-selected="$emit('worker-selected', $event, worker._id)"
@copy-schedule="copySchedule($event)"
></tr>
</tbody>
</table>
</div>
</script>
<!-- template for the 'worker-row' Vue.js component -->
<script type='text/x-template' id='template_worker_row'>
<tr :id="worker._id" :class="'worker-row status-' + worker.status">
<td class='col-narrow'><label><input
type="checkbox"
:id="checkbox_id"
:value="worker._id"
:checked="is_checked"
@input="$emit('worker-selected', $event.target.checked)"
></label>
<action-button v-for="action_key in actions_for_worker"
:key="action_key"
:action_key="action_key"
:worker_id="worker._id"
@worker-action="performWorkerAction"
></action-button>
</td>
<td class='col-narrow'><label :for="checkbox_id">{{ worker.nickname }}</label></td>
<td class='col-narrow'>{{ worker.status || '-none-' }}
<span v-if="worker.status_requested"> {{ worker.status_requested}}</span>
</td>
<template v-if="mode != 'edit_schedule'">
<td class='col-sched-edit-active'>
<button v-if="worker.sleep_schedule.schedule_active" class='btn btn-sm btn-schedule-active' @click="scheduleSetActive(false)"></button>
<button v-else class='btn btn-sm btn-schedule-inactive' @click="scheduleSetActive(true)"></button>
</td>
</template>
<template v-if="mode == 'show_schedule'">
<!-- Worker Schedule viewing template -->
<td :class="worker.sleep_schedule.days_of_week ? '' : 'implied'">{{ worker.sleep_schedule.days_of_week || 'every day'}}</td>
<td :class="worker.sleep_schedule.time_start ? '' : 'implied'">{{ worker.sleep_schedule.time_start || '00:00'}}</td>
<td :class="worker.sleep_schedule.time_end ? '' : 'implied'">{{ worker.sleep_schedule.time_end || '24:00'}}</td>
<td class='col-sched-edit-actions'>
<button class='btn btn-sm' @click="scheduleEditMode()" title='Edit'></button>
<button class='btn btn-sm' @click="$emit('copy-schedule', worker.sleep_schedule)"
:disabled="selected_worker_ids.length == 0 || is_checked"
title='Copy this schedule to all selected workers.'></button>
</td>
</template>
<template v-else-if="mode == 'edit_schedule'">
<!-- Worker Schedule editing template -->
<td class='col-sched-edit-active'><input class='form-check-input' type='checkbox' v-model="edit_schedule.schedule_active"></td>
<td><input class='form-control form-control-sm' type='text' @keyup.enter="scheduleSave()" v-model="edit_schedule.days_of_week"
title="Space-separated list of day names. The first two letters of each day are enough."></td>
<td><input class='form-control form-control-sm' type='text' @keyup.enter="scheduleSave()" v-model="edit_schedule.time_start"></td>
<td><input class='form-control form-control-sm' type='text' @keyup.enter="scheduleSave()" v-model="edit_schedule.time_end"></td>
<td class='col-sched-edit-actions'>
<button class='btn btn-sm' @click="scheduleSave()" title='Save Schedule'>💾</button>
<button class='btn btn-sm' @click="scheduleEditCancel()" title='Cancel Editing'></button>
</td>
</template>
<template v-else>
<!-- Worker Info template -->
<td>
<template v-if="worker.current_task">
<a :href="task_server_url">{{ task_id_text }}</a>
<template v-if="worker.current_task_status">
({{ worker.current_task_status }}
<template v-if="worker.current_task_updated">
{{ current_task_updated() }}
</template>
)
</template>
<a v-if="worker.current_task && worker.current_job"
:href="task_log_url" target="_blank">(log)</a>
</template>
<template v-else>-none-</template>
</td>
<td :title="last_activity_abs">{{ last_activity_rel() }}</td>
<td class="click-to-copy worker-id" :data-clipboard-text="worker._id">
{{ worker._id.substr(-6)}}
</td>
<td class="click-to-copy worker-address" :data-clipboard-text="worker.address">
{{ worker.address }}
</td>
<td>{{ worker_software }}</td>
</template>
</tr>
</script>
<!-- template for the 'action-bar' Vue.js component -->
<script type='text/x-template' id='template_action_bar'>
<form class='container'>
<div class="action-bar row">
<select
class="form-control form-control-sm col-md-3"
:disabled="selected_worker_ids.length == 0"
v-model="selected_action"
>
<option value="" selected><template v-if="selected_worker_ids.length == 0">select workers and </template>choose an action</option>
<option v-for="(action, key) in actions" :value="key">{{ action.label }}</option>
</select>
<button
type="button"
:disabled="selected_worker_ids.length == 0 || !selected_action"
class="btn btn-primary btn-sm"
@click.prevent="performWorkerAction"
>Apply to {{ selected_worker_ids.length }} worker<template v-if="selected_worker_ids.length != 1">s</template></button>
<button
class='btn btn-primary btn-sm ml-auto'
@click.prevent="$emit('toggle-schedule')">Show <template v-if="show_schedule">Status</template><template v-else>Schedule</template></button>
</div>
</form>
</script>

Event Timeline