public/html/callOuts-member.html
<div class="modal" role="dialog" aria-label="Call Out List Member View">
<div class="modal-background"></div>
<div class="modal-card" style="width: 1100px">
<div class="modal-card-head">
<h3 class="modal-card-title">Call Out List Member View</h3>
<button
class="delete is-close-modal-button"
aria-label="close"
type="button"
></button>
</div>
<section class="modal-card-body">
<div class="columns">
<div class="column is-5">
<p class="mb-4">
<strong>Call Out List Name</strong><br />
<span id="callOutListMember--listName">-</span>
</p>
<div class="columns">
<div class="column">
<strong>Employee Number</strong><br />
<span id="callOutListMember--employeeNumber">-</span>
</div>
<div class="column">
<strong>Employee Name</strong><br />
<span id="callOutListMember--employeeName">-</span>
</div>
</div>
<div class="columns is-mobile">
<div class="column">
<strong>Sort Key</strong><br />
<span id="callOutListMember--sortKey">-</span>
</div>
<div class="column">
<strong>Position</strong><br />
<span id="callOutListMember--listPosition">-</span>
</div>
</div>
<div id="callOutListMember--absenceRecord"></div>
<p>
<strong>Last Called</strong><br />
<span id="callOutListMember--callOutDateTimeMax">-</span>
</p>
</div>
<div class="column">
<div class="tabs is-boxed is-size-7 is-size-6-desktop">
<ul role="presentation">
<li class="is-active">
<a href="#tab--callNow">Call Now</a>
</li>
<li>
<a href="#tab--recentCalls">
Recent Call History
<span class="tag ml-2" id="tag--recentCalls">-</span>
</a>
</li>
</ul>
</div>
<div class="tabs-container" style="min-height:calc(100vh - 290px)">
<div id="tab--callNow">
<div class="columns is-mobile">
<div class="column">
<p>
<strong>Work Contact 1</strong><br />
<i class="fas fa-briefcase" aria-hidden="true"></i>
<span id="callOutListMember--workContact1">-</span>
</p>
<p>
<strong>Work Contact 2</strong><br />
<i class="fas fa-briefcase" aria-hidden="true"></i>
<span id="callOutListMember--workContact2">-</span>
</p>
</div>
<div class="column">
<p>
<strong>Home Contact 1</strong><br />
<i class="fas fa-home" aria-hidden="true"></i>
<span id="callOutListMember--homeContact1">-</span>
</p>
<p>
<strong>Home Contact 2</strong><br />
<i class="fas fa-home" aria-hidden="true"></i>
<span id="callOutListMember--homeContact2">-</span>
</p>
</div>
</div>
<form id="form--callOutRecordAdd">
<input
id="callOutRecordAdd--listId"
name="listId"
type="hidden"
/>
<input
id="callOutRecordAdd--employeeNumber"
name="employeeNumber"
type="hidden"
/>
<div class="message is-info is-small">
<p class="message-body">
Leave the date and time blank to use the current date and
time.
</p>
</div>
<div class="columns is-desktop">
<div class="column">
<div class="field">
<label
class="label"
for="callOutRecordAdd--callOutDateString"
>Call Out Date</label
>
<div class="control">
<input
class="input"
id="callOutRecordAdd--callOutDateString"
name="callOutDateString"
type="date"
placeholder="Current Date"
/>
</div>
</div>
</div>
<div class="column">
<div class="field">
<label
class="label"
for="callOutRecordAdd--callOutTimeString"
>Call Out Time</label
>
<div class="control">
<input
class="input"
id="callOutRecordAdd--callOutTimeString"
name="callOutTimeString"
type="time"
placeholder="Current Time"
/>
</div>
</div>
</div>
</div>
<div class="field">
<label
class="label"
for="callOutRecordAdd--natureOfCallOut"
>Nature of Call Out</label
>
<div class="control">
<input
class="input"
id="callOutRecordAdd--natureOfCallOut"
name="natureOfCallOut"
type="text"
maxlength="200"
/>
</div>
</div>
<div class="columns is-desktop">
<div class="column">
<label class="label" for="callOutRecordAdd--callOutHours">Shift Hours</label>
<div class="field has-addons">
<div class="control is-expanded has-icons-left">
<input
class="input has-text-right"
id="callOutRecordAdd--callOutHours"
name="callOutHours"
type="number"
min="0.25"
max="24"
step="0.25"
onwheel="return false"
required
/>
<span class="icon is-small is-left">
<i class="fas fa-asterisk" aria-hidden="true"></i>
</span>
</div>
<div class="control">
<span class="button is-static"> hours </span>
</div>
</div>
</div>
<div class="column">
<div class="field">
<label
class="label"
for="callOutRecordAdd--responseTypeId"
>Response</label
>
<div class="control has-icons-left">
<div class="select is-fullwidth">
<select
id="callOutRecordAdd--responseTypeId"
name="responseTypeId"
required
>
<option value="">(Select a Response)</option>
</select>
</div>
<span class="icon is-small is-left">
<i class="fas fa-asterisk" aria-hidden="true"></i>
</span>
</div>
</div>
</div>
</div>
<div class="field">
<label class="label" for="callOutRecordAdd--recordComment"
>Comment</label
>
<div class="control">
<textarea
class="textarea"
id="callOutRecordAdd--recordComment"
name="recordComment"
></textarea>
</div>
</div>
<p class="has-text-right">
<button class="button is-success" type="submit">
<span class="icon is-small"
><i class="fas fa-save" aria-hidden="true"></i
></span>
<span>Record Call Out</span>
</button>
</p>
</form>
</div>
<div class="is-hidden" id="tab--recentCalls">
<div id="container--callOutRecords"></div>
</div>
</div>
</div>
</div>
</section>
<div class="modal-card-foot is-justify-content-space-between">
<div class="field is-grouped mb-0">
<div class="control">
<button class="button" id="callOutListMember--previous" type="button">
<span class="icon is-small">
<i class="fas fa-chevron-up" aria-hidden="true"></i>
</span>
<span> Previous </span>
</button>
</div>
<div class="control">
<button class="button" id="callOutListMember--next" type="button">
<span class="icon is-small">
<i class="fas fa-chevron-down" aria-hidden="true"></i>
</span>
<span>Next</span>
</button>
</div>
</div>
<button class="button is-close-modal-button" type="button">Close</button>
</div>
</div>
</div>