<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Watchmen Web Panel</title>
<style>
.dialog {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body class="bg-dark">
<div v-scope id="app" class="container" @vue:mounted="getTasks">
<div :class="`dialog text-bg-${theme.main}`" v-show="loading">
<div :class="`card text-bg-${theme.main} border-${theme.second}`">
<div class="card-header" style="display: flex; justify-content: space-between;">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px"
height="30px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
<path opacity="0.2" fill="#FF6700"
d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"></path>
<path fill="#FF6700" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
C22.32,8.481,24.301,9.057,26.013,10.047z" transform="rotate(42.1171 20 20)">
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20"
to="360 20 20" dur="0.5s" repeatCount="indefinite"></animateTransform>
</path>
</svg>
</div>
</div>
</div>
<div :class="`dialog text-bg-${theme.main}`" v-show="modal">
<div :class="`card text-bg-${theme.main} border-${theme.second}`" style="min-width: 600px">
<div class="card-header" style="display: flex; justify-content: space-between;">
<span>Task Info</span>
<button type="button" class="btn btn-sm btn-dark" @click="modal = false">x</button>
</div>
<div class="card-body">
<textarea rows="28" v-model="info"
:class="`form-control text-bg-${theme.main} border-${theme.second}`" id="info"
placeholder="Task Info">
</textarea>
</div>
</div>
</div>
<div :class="`dialog text-bg-${theme.main}`" v-show="dialog">
<div :class="`card text-bg-${theme.main} border-${theme.second}`" style="min-width: 600px">
<div class="card-header">Add Task</div>
<div class="card-body">
<div class="row mb-3">
<label for="name" class="col-sm-3 col-form-label text-end">Name</label>
<div class="col-sm-8">
<input v-model="task.name" type="text"
:class="`form-control text-bg-${theme.main} border-${theme.second}`" id="name"
placeholder="Name (unique)">
</div>
</div>
<div class="row mb-3">
<label for="command" class="col-sm-3 col-form-label text-end">Command</label>
<div class="col-sm-8">
<input v-model="task.command" type="text"
:class="`form-control text-bg-${theme.main} border-${theme.second}`" id="command"
placeholder="Command">
</div>
</div>
<div class="row mb-3">
<label for="args" class="col-sm-3 col-form-label text-end">Args</label>
<div class="col-sm-8">
<input v-model="task.args" type="text"
:class="`form-control text-bg-${theme.main} border-${theme.second}`" id="args"
placeholder="Args (split by ,)">
</div>
</div>
<div class="row mb-3">
<label class="col-sm-3 col-form-label text-end" for="stdin">Stdin</label>
<div class="col-sm-8 mt-2">
<input v-model="task.stdin" type="checkbox" class="form-check-input" id="stdin">
</div>
</div>
<div class="row mb-3">
<label for="inputEmail" class="col-sm-3 col-form-label text-end">Stdout</label>
<div class="col-sm-8">
<input v-model="task.stdout" type="text"
:class="`form-control text-bg-${theme.main} border-${theme.second}`" id="inputEmail"
placeholder="Command">
</div>
</div>
<div class="row mb-3">
<label for="inputEmail" class="col-sm-3 col-form-label text-end">Stderr</label>
<div class="col-sm-8">
<input v-model="task.stderr" type="text"
:class="`form-control text-bg-${theme.main} border-${theme.second}`" id="inputEmail"
placeholder="Command">
</div>
</div>
<div class="row mb-3">
<label class="col-sm-3 col-form-label text-end">Task Type</label>
<div class="col-sm-9 row mt-2">
<div class="form-check col-sm-3">
<input v-model="task.task_type" value="async" class="form-check-input" type="radio"
name="gender" id="async" value="female">
<label class="form-check-label" for="async">
Async
</label>
</div>
<div class="form-check col-sm-4">
<input v-model="task.task_type" value="scheduled" class="form-check-input" type="radio"
name="gender" id="scheduled" value="male">
<label class="form-check-label" for="scheduled">
Scheduled
</label>
</div>
<div class="form-check col-sm-4">
<input v-model="task.task_type" value="periodic" class="form-check-input" type="radio"
name="gender" id="periodic" value="male">
<label class="form-check-label" for="periodic">
Periodic
</label>
</div>
</div>
</div>
<div class="row mb-3">
<div class="col-sm-9 offset-sm-3">
<button class="btn btn-primary" @click="addTask">Add Task</button>
<button class="btn btn-secondary" @click="dialog = false">Cancel</button>
</div>
</div>
</div>
</div>
</div>
<div :class="`card text-bg-${theme.main} border-${theme.second}`">
<div class="card-header">Watchmen</div>
<div class="card-body">
Watchmen is a daemon process manager that for you manage and keep your application online 24/7
</div>
</div>
<table :class="`table table-${theme.main} table-bordered border-${theme.second}`">
<thead>
<tr>
<th scope="col" style="width: 60px">#</th>
<th scope="col" style="width: 60px">ID</th>
<th scope="col" style="width: 80px">Group</th>
<th scope="col">Name</th>
<th scope="col">Status</th>
<th scope="col" style="min-width: 100px">Command</th>
<th scope="col">Pid</th>
<th scope="col" style="min-width: 94px">Exit Code</th>
<th scope="col">Type</th>
<th scope="col" style="width: 200px">
<div class="row text-center">
<div class="col">
<button type="button" class="btn btn-sm btn-primary" @click="dialog = true">+</button>
</div>
</div>
</th>
</tr>
</thead>
<tbody>
<tr v-for="(i, index) in tasks.filter(task => task.name.includes(filter))">
<th scope="row">{{index}}</th>
<td class="">{{i.id}}</td>
<td class="">{{i.group}}</td>
<td class="">{{i.name}}</td>
<td>{{i.status}}</td>
<td>{{i.command}}</td>
<td>{{i.pid}}</td>
<td>{{i.code}}</td>
<td>{{Object.keys(i.task_type).length > 0 ?Object.keys(i.task_type)[0] : ''}}</td>
<td>
<div class="row text-center">
<div class="col" v-if="['running', 'executing', 'interval'].includes(i.status)">
<button type="button" class="btn btn-sm btn-outline-danger"
@click="stopTask(i)">▢</button>
</div>
<div class="col" v-else>
<button type="button" class="btn btn-sm btn-outline-success"
@click="startTask(i)">▷</button>
</div>
<div class="col">
<button type="button" class="btn btn-sm btn-outline-secondary"
@click="removeTask(i)">✗</button>
</div>
<div class="col">
<button type="button" class="btn btn-sm btn-outline-primary"
@click="infoTask(i)"> ! </button>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<script type="module" src="/main.js"></script>
</body>
</html>
