@cocreate/twilio
Version:
A simple twilio component in vanilla javascript. Easily configured using HTML5 attributes and/or JavaScript API.
471 lines (460 loc) • 13.5 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="icon"
type="image/png"
sizes="32x32"
href="../assets/favicon.ico" />
<title>Call log | CoCreate</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
crossorigin="anonymous" />
<link rel="manifest" href="/manifest.webmanifest" />
</head>
<style>
.selected {
background: gainsboro;
}
</style>
<body class="width:fit-content overflow:auto">
<!-- Navbar -->
<div
class="nav display:flex align-items:center background:whitesmoke position:sticky left:0 width:100vw"
content_id="content"
scroll="sticky-nav, hide-nav"
scroll-up="5"
scroll-down="5">
<!-- Menu Icon Animations -->
<a class="nav-toggle menu_icon--Vdots" toggle-sidenav="menuL">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</a>
<!-- Horizontal Scroll Nav/Tabs -->
<ul
class="overflow:auto display:inline-flex direction:rtl font-size:20px align-items:center list-style-type:none width:100% height:50px">
<!-- Modal Controls -->
<li class="margin-right:15px">
<a actions="closeModal"
><i class="height:18px" src="/assets/svg/times.svg"></i
></a>
</li>
<li class="margin-right:15px">
<a actions="minMaxModal">
<i
toggle="/assets/svg/window-restore.svg, /assets/svg/window-maximize.svg"
toggle-attribute="src"
class="height:18px"
src="/assets/svg/window-maximize.svg"></i>
</a>
</li>
<li class="margin-right:15px">
<a actions="parkModal"
><i class="far fa-window-minimize"> </i
></a>
</li>
<!-- fullscreen toogle and icon transform-->
<li class="margin-right:15px">
<a fullscreen>
<i class="height:18px" src="/assets/svg/expand.svg"></i>
<i
class="height:18px"
src="/assets/svg/compress.svg"></i>
</a>
</li>
<!-- Render Builder -->
<li class="margin-right:15px">
<a
actions="state, openModal"
state-array="module-views"
state-object="5fa86bfd4b4c3e4dea76abec"
state-key="html"
state_to="render"
modal-width="100%"
modal-header="false"
class="sessionBuilderUI_Id">
<i
class="height:18px"
src="/assets/svg/palette.svg"></i>
<div
state-array="module-views"
state-object=""
state_to="builder"
state_id="render"></div>
</a>
</li>
<!-- Render Module Form -->
<li class="margin-right:15px">
<a
actions="state, openModal"
modal-src="form.html"
state-array="module-views"
state-object=""
state_to="render"
modal-width="320px"
modal-height="100%"
modal-color="#229954"
modal-header="false"
modal-x=""
modal-y=""
state_id="module_id">
<i class="height:16px" src="/assets/svg/plus.svg"></i>
</a>
</li>
<!-- Datatable Controls -->
<li class="margin-right:15px">
<a actions="delete" template_id="datatable"
><i
class="height:18px"
src="/assets/svg/trash-alt.svg"></i
></a>
</li>
<li class="margin-right:15px">
<a toggle="hidden" toogle-selector="#column-visibility"
><i class="height:18px" src="/assets/svg/eye.svg"></i
></a>
</li>
<li class="margin-right:15px">
<a
actions="export"
export-type="csv"
template_id="datatable"
><i
class="height:18px"
src="/assets/svg/file-csv.svg"></i
></a>
</li>
<li class="margin-right:15px">
<a actions="export" template_id="datatable"
><i
class="height:18px"
src="/assets/svg/file-download.svg"></i
></a>
</li>
<li class="margin-right:15px">
<a actions="import" array="" state_id="datatable"
><i
class="height:18px"
src="/assets/svg/file-upload.svg"></i
></a>
</li>
<li class="margin-right:15px">
<a actions="copy" copy-selector="tbody"
><i class="height:18px" src="/assets/svg/copy.svg"></i
></a>
</li>
<li class="margin-right:15px">
<a toggle="selected" toggle-selector="tr"
><i class="height:18px" src="/assets/svg/print.svg"></i
></a>
</li>
<li class="margin-right:15px">
<a toggle="selected" toggle-selector="tr"
><i src="/assets/svg/square.svg"></i
></a>
</li>
</ul>
</div>
<!-- Modal Viewport -->
<div
class="position:fixed margin-top:50px"
content_id="content"
id="modal-viewport"></div>
<!-- Main Content -->
<div content_id="content" class="padding:5px">
<table class="width:100% border-collapse:collapse">
<tr class="border-bottom:1px_solid_darkgray">
<td
class="position:sticky top:0 background:white padding:0px_10px_10px">
<input
type="text"
class="floating-label"
filter-query-key="status"
template_id="datatable"
placeholder="Status" />
<span
class="position:absolute bottom:22px right:20px float:right z-index:6">
<!-- need a solution to update toggle value="desc|asc" and define and upadte icons... show hide works great but to much html and orderby only has 2 values -->
<a
filter-sort-key="name"
filter-sort-toggle
template_id="datatable">
<i></i>
</a>
</span>
</td>
<td
class="position:sticky top:0 background:white padding:0px_10px_10px">
<input
type="text"
class="floating-label"
filter-query-key="Callstatus"
template_id="datatable"
placeholder="CallStatus" />
<span
class="position:absolute bottom:22px right:20px float:right z-index:6">
<a
filter-sort-key="_id"
value=""
filter-sort-direction="asc"
click-value="desc, asc"
click-attribute="filter-sort-direction"
template_id="datatable">
</a>
</span>
</td>
<td
class="position:sticky top:0 background:white padding:0px_10px_10px">
<input
type="text"
class="floating-label"
filter-query-key="direction"
template_id="datatable"
placeholder="direction" />
<span
class="position:absolute bottom:22px right:20px float:right z-index:6">
<a
filter-sort-key="_id"
value=""
filter-sort-direction="asc"
click-value="desc, asc"
click-attribute="filter-sort-direction"
template_id="datatable">
</a>
</span>
</td>
<td
class="position:sticky top:0 background:white padding:0px_10px_10px">
<input
type="text"
class="floating-label"
filter-query-key="duration"
template_id="datatable"
placeholder="duration" />
<span
class="position:absolute bottom:22px right:20px float:right z-index:6">
<a
filter-sort-key="_id"
value=""
filter-sort-direction="asc"
click-value="desc, asc"
click-attribute="filter-sort-direction"
template_id="datatable">
</a>
</span>
</td>
<td
class="position:sticky top:0 background:white padding:0px_10px_10px">
<input
type="text"
class="floating-label"
filter-query-key="CallSid"
template_id="datatable"
placeholder="CallSid" />
<span
class="position:absolute bottom:22px right:20px float:right z-index:6">
<a
filter-sort-key="_id"
value=""
filter-sort-direction="asc"
click-value="desc, asc"
click-attribute="filter-sort-direction"
template_id="datatable">
</a>
</span>
</td>
</tr>
<tbody
template_id="datatable"
array="testtwillio"
filter-sort-key=""
filter-sort-direction="asc">
<tr
class="template background:whitesmoke:hover border-bottom:1px_solid_darkgray"
object="{{data._id}}"
template_id="datatable"
toggle="selected">
<td class="padding:10px">
<div class="display:flex min-width:200px">
<div
class="display:flex justify-content:center width:25px">
<span>{{data.icon}}</span>
</div>
<div class="margin-left:10px">
<a
actions="state, openModal"
modal-src="./module-views/form.html"
state-array="modules"
state-object="{{data._id}}"
state-key="html"
state_to="render"
modal-width="320px"
modal-color="#229954"
modal-header="false">
<h4>
From:<span
array="{{object.array}}"
object="{{data._id}}"
key="From"
>From</span
>
</h4>
<h5
array="{{object.array}}"
object="{{data._id}}"
key="status">
Status
</h5>
<div
state-array="modules"
state-object="{{data._id}}"
state_to="form-fields"></div>
<div
state-array="module-views"
state-filter-query-key="module_id"
state-filter-value="{{data._id}}"
state_to="module_id"></div>
</a>
</div>
</div>
</td>
<td class="padding:10px">
<a
actions="state, openModal"
modal-src="./module-views/form.html"
state-object="{{data._id}}"
state-array="modules"
state-key="html"
state_to="render"
modal-width="320px"
modal-color="#229954"
modal-header="false">
<h4>
To:
<span
array="{{object.array}}"
object="{{data._id}}"
key="To"
>To</span
>
</h4>
<b
array="{{object.array}}"
object="{{data._id}}"
key="CallStatus"
>CallStatus</b
>
<div
state-array="modules"
state-object="{{data._id}}"
state_to="form-fields"></div>
</a>
</td>
<td class="padding:10px">
<a
actions="state, openModal"
modal-src="./module-views/form.html"
state-object="{{data._id}}"
state-array="modules"
state-key="html"
state_to="render"
modal-width="320px"
modal-color="#229954"
modal-header="false">
<h4>
Direction:<span
array="{{object.array}}"
object="{{data._id}}"
key="Direction"
>Direction</span
>
</h4>
<h4>
direction:<span
array="{{object.array}}"
object="{{data._id}}"
key="direction"
>direction</span
>
</h4>
<div
state-array="modules"
state-object="{{data._id}}"
state_to="form-fields"></div>
</a>
</td>
<td class="padding:10px">
<a
actions="state, openModal"
modal-src="./module-views/form.html"
state-object="{{data._id}}"
state-array="modules"
state-key="html"
state_to="render"
modal-width="320px"
modal-color="#229954"
modal-header="false">
<b
array="{{object.array}}"
object="{{data._id}}"
key="duration"
>Duration</b
>
<div
state-array="modules"
state-object="{{data._id}}"
state_to="form-fields"></div>
</a>
</td>
<td class="padding:10px">
<a
actions="state, openModal"
modal-src="./module-views/form.html"
state-object="{{data._id}}"
state-array="modules"
state-key="html"
state_to="render"
modal-width="320px"
modal-color="#229954"
modal-header="false">
<b
array="{{object.array}}"
object="{{data._id}}"
key="CallSid"
>CallSid</b
>
<div
state-array="modules"
state-object="{{data._id}}"
state_to="form-fields"></div>
</a>
</td>
</tr>
</tbody>
</table>
<div template_id="datatable" filter-on="total"></div>
</div>
<button
actions="state, openModal"
modal-src="./module-views/form.html"
state-array="modules"
state-key="form-html"
state_to="render"
modal-width="320px"
modal-height="100%"
modal-color="#229954"
modal-header="false"
class="position:fixed bottom:15px right:15px padding:15px background:dodgerblue color:#fff font-size:1.5rem grow-hover border-radius:50% border-width:0 box-shadow:0px_2px_10px_0px_rgba(0,_0,_0,_0.4) z-index:8"
state_id="module_id">
<i src="/assets/svg/plus.svg"></i>
</button>
<script src="https://CoCreate.app/dist/CoCreate.js"></script>
</body>
</html>