152 lines
6.7 KiB
Vue
152 lines
6.7 KiB
Vue
<template>
|
|
<template v-if="age !== undefined">
|
|
<div v-if="age == Infinity" class="alert alert-danger">❌ update error</div>
|
|
<div v-else-if="age >= 90000" class="alert alert-warning">⚠ last updated <template v-if="age < 3600000">{{ts.toLocaleString()}}</template><template v-else>{{ts.toLocaleString()}}</template></div>
|
|
</template>
|
|
<div v-if="filter_array.length > 0"><span class="tag badge bg-primary" @click="filter = {}">CLEAR {{filter_array.length}} TAG{{filter_array.length > 1 ? 'S' : ''}}</span><span v-for="key in filter_array" class="tag badge" :style="{ backgroundColor: strHashHSL(key, '50%') }" @click="delete filter[key]">❌ {{key.toUpperCase()}}</span></div>
|
|
<datalist :id="'datalist-' + uid"><option v-for="item in practitioner_list" :value="item" /></datalist>
|
|
<table class="table" style="font-family: monospace;" v-if="appointments && appointments.length > 0">
|
|
<thead>
|
|
<tr><th style="width: 7rem;">Time</th><th>Clinic</th><th>Patient</th><th>Note</th><th style="width: 16rem;">Assignee</th></tr>
|
|
</thead>
|
|
<tbody class="striped">
|
|
<tr v-for="row in appointments" v-show="(filter_array.length < 1) || (filter_conj(gettags(row)))" :class="{ voided: (row.CANCELLED != '0') || (row.NOSHOW != '0') }" :style="{ backgroundColor: strHashHSL(row.RESOURCENAME, '90%') }">
|
|
<td v-if="row.CANCELLED != '0'" title="Cancelled"><div><span class="emoji">❌</span> {{row.START_TIME.match(/\d\d:\d\d/)[0]}}</div><div class="date">{{row.START_TIME.match(/\w{3} \d+, \d{4}/)[0]}}</div></td>
|
|
<td v-else-if="row.NOSHOW != '0'" title="No show"><div><span class="emoji">❓</span> {{row.START_TIME.match(/\d\d:\d\d/)[0]}}</div><div class="date">{{row.START_TIME.match(/\w{3} \d+, \d{4}/)[0]}}</div></td>
|
|
<td v-else-if="row.CHECKOUT" :title="'Checked out ' + row.CHECKOUT"><div><span class="emoji">✅</span> {{row.START_TIME.match(/\d\d:\d\d/)[0]}}</div><div class="date">{{row.START_TIME.match(/\w{3} \d+, \d{4}/)[0]}}</div></td>
|
|
<td v-else-if="row.CHECKIN" :title="'Checked in ' + row.CHECKIN"><div><span class="emoji">✔</span> {{row.START_TIME.match(/\d\d:\d\d/)[0]}}</div><div class="date">{{row.START_TIME.match(/\w{3} \d+, \d{4}/)[0]}}</div></td>
|
|
<td v-else title="Scheduled"><div><span class="emoji">⌛</span> {{row.START_TIME.match(/\d\d:\d\d/)[0]}}</div><div class="date">{{row.START_TIME.match(/\w{3} \d+, \d{4}/)[0]}}</div></td>
|
|
<td>{{row.RESOURCENAME}}</td>
|
|
<td><router-link :to="'/patient/' + row.PATIENTID">{{row.PATIENTNAME}} <span :title="row.HRN">{{row.HRN.slice(-4)}}</span></router-link></td>
|
|
<td>{{row.NOTE}}<span v-for="(value, key) in gettags(row)" class="tag badge" :style="{ backgroundColor: strHashHSL(key, '50%') }" @click="filter[key] = true">{{value}}</span></td>
|
|
<td><input class="form-control" :list="'datalist-' + uid" :value="practitioner[row.PATIENTNAME]" @input="e => practitioner[row.PATIENTNAME] = e.target.value" /></td>
|
|
</tr>
|
|
</tbody>
|
|
<caption style="text-align: center;">{{appointments.length || 'no'}} appointment{{appointments.length != 1 ? 's' : ''}} <template v-if="date_begin.toLocaleDateString('sv-SE') == date_end.toLocaleDateString('sv-SE')">on {{date_begin.toLocaleDateString('sv-SE')}}</template><template v-else>from {{date_begin.toLocaleDateString('sv-SE')}} to {{date_end.toLocaleDateString('sv-SE')}}</template></caption>
|
|
</table>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.striped {
|
|
background-image: repeating-linear-gradient(
|
|
-45deg,
|
|
rgba(255, 255, 255, 0.1),
|
|
rgba(255, 255, 255, 0.1) 10px,
|
|
rgba(0, 0, 0, 0.1) 10px,
|
|
rgba(0, 0, 0, 0.1) 20px
|
|
);
|
|
}
|
|
.voided {
|
|
opacity: 0.8;
|
|
}
|
|
.date {
|
|
font-size: 80%;
|
|
}
|
|
.emoji {
|
|
font-family:
|
|
"Twemoji Mozilla",
|
|
"Apple Color Emoji",
|
|
"Segoe UI Emoji",
|
|
"Segoe UI Symbol",
|
|
"Noto Color Emoji",
|
|
"EmojiOne Color",
|
|
"Android Emoji",
|
|
sans-serif;
|
|
}
|
|
.badge.tag {
|
|
cursor: pointer;
|
|
margin-right: 0.35em;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
import { uniq, strHashHSL, strfdate_vista, debounce } from './util.mjs';
|
|
|
|
function clearTimeouts(timers) {
|
|
if(timers.length > 1) console.warn('Clearing multiple timeouts', timers.slice());
|
|
for(var i = 0; i < timers.length; ++i) window.clearTimeout(timers[i]);
|
|
timers.length = 0;
|
|
}
|
|
|
|
export default {
|
|
props: {
|
|
client: Object,
|
|
selection: {
|
|
type: Array,
|
|
default: []
|
|
},
|
|
date_begin: Date,
|
|
date_end: Date
|
|
},
|
|
data() {
|
|
return {
|
|
uid: Math.random()*0x7fffffff|0,
|
|
appointments: [],
|
|
timers: [],
|
|
ts: null,
|
|
age: undefined,
|
|
filter: {}
|
|
};
|
|
},
|
|
computed: {
|
|
filter_array() {
|
|
return Object.keys(this.filter).sort();
|
|
},
|
|
practitioner() {
|
|
return this.client.remotestate.practitioner || (this.client.remotestate.practitioner = {});
|
|
},
|
|
practitioner_list() {
|
|
return this.practitioner ? uniq(Object.values(this.practitioner).filter(x => x)).sort() : [];
|
|
}
|
|
},
|
|
methods: {
|
|
strHashHSL,
|
|
gettags(row) {
|
|
var res = {}, re, matches;
|
|
if((row.RESOURCENAME) && (matches = row.RESOURCENAME.replace(/\W+/g, '-').replace(/^-+|-+$/g, ''))) res[matches.toLowerCase()] = matches;
|
|
if(row.WALKIN != '0') res['walkin'] = 'WALKIN';
|
|
if((row.CANCELLED != '0') || (row.NOSHOW != '0')) res['inactive'] = 'INACTIVE';
|
|
else res['active'] = 'ACTIVE';
|
|
if(row.NOTE) {
|
|
re = /#([0-9a-z][\w-]*)/gi;
|
|
while(matches = re.exec(row.NOTE)) res[matches[1].toLowerCase()] = matches[1];
|
|
re = /Dr[\.\s]*\b([a-z][\w-]*)/gi;
|
|
while(matches = re.exec(row.NOTE)) res[matches[1].toLowerCase()] = matches[1];
|
|
}
|
|
if((matches = this.practitioner[row.PATIENTNAME]) && (matches = matches.replace(/\W+/g, '-').replace(/^-+|-+$/g, ''))) res[matches.toLowerCase()] = matches.toUpperCase();
|
|
return res;
|
|
},
|
|
filter_conj(tags) {
|
|
var filter_array = this.filter_array;
|
|
for(var i = this.filter_array.length - 1; i >= 0; --i) if(!tags[this.filter_array[i]]) return false;
|
|
return true;
|
|
},
|
|
async update() {
|
|
clearTimeouts(this.timers);
|
|
try {
|
|
this.appointments = (await this.client.SDEC_CRSCHED(this.selection.join('|') + '|', strfdate_vista(this.date_begin), strfdate_vista(this.date_end) + '@2359')).sort((a, b) => (new Date(a.START_TIME)) - (new Date(b.START_TIME)));
|
|
var now = new Date();
|
|
this.ts = this.appointments._ts ? new Date(1000*this.appointments._ts) : now;
|
|
this.age = now - this.ts;
|
|
this.timers.push(window.setTimeout(this.update, Math.max(60000 - this.age, 10000)));
|
|
} catch(ex) {
|
|
this.age = this.ts ? (new Date()) - this.ts : Infinity;
|
|
console.warn(ex);
|
|
this.timers.push(window.setTimeout(this.update, 30000));
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.$watch(
|
|
() => (this.client, this.selection, this.date_begin, this.date_end, {}),
|
|
debounce(async () => {
|
|
this.update();
|
|
}, 500)
|
|
);
|
|
},
|
|
unmounted() {
|
|
clearTimeouts(this.timers);
|
|
}
|
|
};
|
|
</script>
|