mirror of
https://gitlab.com/signalytic/client-external/streamline/streamline-emr.git
synced 2026-09-11 18:51:31 +00:00
alec.turner
a424394109
The official image from streamline does not currently work for the arm64 platform. As a temporary measure, the source code and docker build scripts have been lifted from the official images and are used to build locally. Some additional modifications are made to reduce overall image size, these are documented in docker/README.md
150 lines
3.6 KiB
HTML
Executable File
150 lines
3.6 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset='utf-8' />
|
|
<link href='../packages/core/main.css' rel='stylesheet' />
|
|
<link href='../packages/daygrid/main.css' rel='stylesheet' />
|
|
<link href='../packages/timegrid/main.css' rel='stylesheet' />
|
|
<link href='../packages/list/main.css' rel='stylesheet' />
|
|
<script src='../packages/core/main.js'></script>
|
|
<script src='../packages/interaction/main.js'></script>
|
|
<script src='../packages/daygrid/main.js'></script>
|
|
<script src='../packages/timegrid/main.js'></script>
|
|
<script src='../packages/list/main.js'></script>
|
|
<script>
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
var Calendar = FullCalendar.Calendar;
|
|
var Draggable = FullCalendarInteraction.Draggable
|
|
|
|
/* initialize the external events
|
|
-----------------------------------------------------------------*/
|
|
|
|
var containerEl = document.getElementById('external-events-list');
|
|
new Draggable(containerEl, {
|
|
itemSelector: '.fc-event',
|
|
eventData: function(eventEl) {
|
|
return {
|
|
title: eventEl.innerText.trim()
|
|
}
|
|
}
|
|
});
|
|
|
|
//// the individual way to do it
|
|
// var containerEl = document.getElementById('external-events-list');
|
|
// var eventEls = Array.prototype.slice.call(
|
|
// containerEl.querySelectorAll('.fc-event')
|
|
// );
|
|
// eventEls.forEach(function(eventEl) {
|
|
// new Draggable(eventEl, {
|
|
// eventData: {
|
|
// title: eventEl.innerText.trim(),
|
|
// }
|
|
// });
|
|
// });
|
|
|
|
/* initialize the calendar
|
|
-----------------------------------------------------------------*/
|
|
|
|
var calendarEl = document.getElementById('calendar');
|
|
var calendar = new Calendar(calendarEl, {
|
|
plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
|
|
header: {
|
|
left: 'prev,next today',
|
|
center: 'title',
|
|
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
|
|
},
|
|
editable: true,
|
|
droppable: true, // this allows things to be dropped onto the calendar
|
|
drop: function(arg) {
|
|
// is the "remove after drop" checkbox checked?
|
|
if (document.getElementById('drop-remove').checked) {
|
|
// if so, remove the element from the "Draggable Events" list
|
|
arg.draggedEl.parentNode.removeChild(arg.draggedEl);
|
|
}
|
|
}
|
|
});
|
|
calendar.render();
|
|
|
|
});
|
|
|
|
</script>
|
|
<style>
|
|
|
|
body {
|
|
margin-top: 40px;
|
|
font-size: 14px;
|
|
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
|
|
}
|
|
|
|
#wrap {
|
|
width: 1100px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
#external-events {
|
|
float: left;
|
|
width: 150px;
|
|
padding: 0 10px;
|
|
border: 1px solid #ccc;
|
|
background: #eee;
|
|
text-align: left;
|
|
}
|
|
|
|
#external-events h4 {
|
|
font-size: 16px;
|
|
margin-top: 0;
|
|
padding-top: 1em;
|
|
}
|
|
|
|
#external-events .fc-event {
|
|
margin: 10px 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#external-events p {
|
|
margin: 1.5em 0;
|
|
font-size: 11px;
|
|
color: #666;
|
|
}
|
|
|
|
#external-events p input {
|
|
margin: 0;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
#calendar {
|
|
float: right;
|
|
width: 900px;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id='wrap'>
|
|
|
|
<div id='external-events'>
|
|
<h4>Draggable Events</h4>
|
|
|
|
<div id='external-events-list'>
|
|
<div class='fc-event'>My Event 1</div>
|
|
<div class='fc-event'>My Event 2</div>
|
|
<div class='fc-event'>My Event 3</div>
|
|
<div class='fc-event'>My Event 4</div>
|
|
<div class='fc-event'>My Event 5</div>
|
|
</div>
|
|
|
|
<p>
|
|
<input type='checkbox' id='drop-remove' />
|
|
<label for='drop-remove'>remove after drop</label>
|
|
</p>
|
|
</div>
|
|
|
|
<div id='calendar'></div>
|
|
|
|
<div style='clear:both'></div>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|