|
@@ -0,0 +1,249 @@
|
|
|
|
+@extends ('layouts/template')
|
|
|
|
+
|
|
|
|
+@section('content')
|
|
|
|
+
|
|
|
|
+ <div class="p-3 mcp-theme-1" id="fdb-pg">
|
|
|
|
+ <div class="card">
|
|
|
|
+
|
|
|
|
+ <div class="card-header px-3 py-2 d-flex align-items-center">
|
|
|
|
+ <strong class="mr-4">
|
|
|
|
+ FDB Playground
|
|
|
|
+ </strong>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="card-body px-3 py-4">
|
|
|
|
+ <div class="row">
|
|
|
|
+ <div class="col-4 min-width-300px">
|
|
|
|
+ <div class="mb-3 d-flex align-items-center">
|
|
|
|
+ <label class="m-0 width-100px">Search</label>
|
|
|
|
+ <div class="flex-grow-1">
|
|
|
|
+ <input type="text" class="form-control form-control-sm min-width-unset"
|
|
|
|
+ fdb-med-suggest-search fdb-suggest-group="1">
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="mb-3 d-flex align-items-center">
|
|
|
|
+ <label class="m-0 width-100px">Route</label>
|
|
|
|
+ <div class="flex-grow-1">
|
|
|
|
+ <select class="form-control form-control-sm min-width-unset"
|
|
|
|
+ fdb-med-suggest-route fdb-suggest-group="1"
|
|
|
|
+ disabled>
|
|
|
|
+ </select>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="mb-3 d-flex align-items-center">
|
|
|
|
+ <label class="m-0 width-100px">Dosage</label>
|
|
|
|
+ <div class="flex-grow-1">
|
|
|
|
+ <select class="form-control form-control-sm min-width-unset"
|
|
|
|
+ fdb-med-suggest-dosage fdb-suggest-group="1"
|
|
|
|
+ disabled>
|
|
|
|
+ </select>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="mb-3 d-flex align-items-center">
|
|
|
|
+ <label class="m-0 width-100px">Strength</label>
|
|
|
|
+ <div class="flex-grow-1">
|
|
|
|
+ <select class="form-control form-control-sm min-width-unset"
|
|
|
|
+ fdb-med-suggest-strength fdb-suggest-group="1"
|
|
|
|
+ disabled>
|
|
|
|
+ </select>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div>More...</div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <script>
|
|
|
|
+ (function() {
|
|
|
|
+
|
|
|
|
+ let suggestionsOuter = null;
|
|
|
|
+
|
|
|
|
+ const debounce = (func, wait) => {
|
|
|
|
+ let timeout;
|
|
|
|
+ return function executedFunction(...args) {
|
|
|
|
+ const later = () => {
|
|
|
|
+ clearTimeout(timeout);
|
|
|
|
+ func(...args);
|
|
|
|
+ };
|
|
|
|
+ clearTimeout(timeout);
|
|
|
|
+ timeout = setTimeout(later, wait);
|
|
|
|
+ };
|
|
|
|
+ };
|
|
|
|
+
|
|
|
|
+ var lastTerm = '';
|
|
|
|
+ var returnedFunction = debounce(function (elem) {
|
|
|
|
+ var term = elem.val();
|
|
|
|
+ if (!!term && lastTerm !== term) {
|
|
|
|
+ $.get('/fdb-med-suggest?term=' + $.trim(term), function (_data) {
|
|
|
|
+ suggestionsOuter.html(_data).removeClass('d-none');
|
|
|
|
+ });
|
|
|
|
+ lastTerm = term;
|
|
|
|
+ } else {
|
|
|
|
+ suggestionsOuter.addClass('d-none');
|
|
|
|
+ }
|
|
|
|
+ }, 250);
|
|
|
|
+
|
|
|
|
+ function handleKeydown(elem, e) {
|
|
|
|
+ let term = $.trim(elem.val());
|
|
|
|
+ let activeItem = suggestionsOuter.find('.suggest-item.active');
|
|
|
|
+ switch (e.which) {
|
|
|
|
+ case 27:
|
|
|
|
+ suggestionsOuter.addClass('d-none');
|
|
|
|
+ return false;
|
|
|
|
+ case 38:
|
|
|
|
+ if (activeItem.prev().length) {
|
|
|
|
+ activeItem.prev()
|
|
|
|
+ .addClass('active')
|
|
|
|
+ .siblings().removeClass('active');
|
|
|
|
+ activeItem = suggestionsOuter.find('.suggest-item.active');
|
|
|
|
+ if (activeItem.length) {
|
|
|
|
+ activeItem[0].scrollIntoView();
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ return false;
|
|
|
|
+ case 40:
|
|
|
|
+ if (activeItem.next().length) {
|
|
|
|
+ activeItem.next()
|
|
|
|
+ .addClass('active')
|
|
|
|
+ .siblings().removeClass('active');
|
|
|
|
+ activeItem = suggestionsOuter.find('.suggest-item.active');
|
|
|
|
+ if (activeItem.length) {
|
|
|
|
+ activeItem[0].scrollIntoView();
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ return false;
|
|
|
|
+ case 13:
|
|
|
|
+ if (activeItem.length) {
|
|
|
|
+ activeItem.first().click();
|
|
|
|
+ }
|
|
|
|
+ return false;
|
|
|
|
+ default:
|
|
|
|
+ if (!!term) {
|
|
|
|
+ suggestionsOuter
|
|
|
|
+ .html('<span class="d-block no-suggest-items">Searching...</span>')
|
|
|
|
+ .removeClass('d-none');
|
|
|
|
+ returnedFunction(elem);
|
|
|
|
+ } else {
|
|
|
|
+ suggestionsOuter.addClass('d-none');
|
|
|
|
+ }
|
|
|
|
+ break;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ function handleKeypress(elem, e) {
|
|
|
|
+ var term = $.trim(elem.val());
|
|
|
|
+ if (!!term) {
|
|
|
|
+ suggestionsOuter
|
|
|
|
+ .html('<span class="d-block no-suggest-items">Searching...</span>')
|
|
|
|
+ .removeClass('d-none');
|
|
|
|
+ returnedFunction(elem);
|
|
|
|
+ } else {
|
|
|
|
+ suggestionsOuter.addClass('d-none');
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ addMCInitializer('fdb-pg', function() {
|
|
|
|
+
|
|
|
|
+ $('[fdb-med-suggest-search]:not([fdb-suggest-initialized])').each(function() {
|
|
|
|
+ let elem = $(this);
|
|
|
|
+ elem.next('.fdb-suggestions-container').remove();
|
|
|
|
+ $('<div class="fdb-suggestions-container position-relative" fdb-suggest-group="' + elem.attr('fdb-suggest-group') + '">' +
|
|
|
|
+ '<div class="suggestions-outer fdb-suggestions position-absolute d-none"></div>' +
|
|
|
|
+ '</div>').insertAfter(elem);
|
|
|
|
+
|
|
|
|
+ elem
|
|
|
|
+ .off('keydown.fdb-suggest')
|
|
|
|
+ .on('keydown.fdb-suggest', function (e) {
|
|
|
|
+ suggestionsOuter = $(this).next('.fdb-suggestions-container').find('>.suggestions-outer');
|
|
|
|
+ return handleKeydown($(this), e);
|
|
|
|
+ })
|
|
|
|
+ .off('keypress.fdb-suggest')
|
|
|
|
+ .on('keypress.fdb-suggest', function (e) {
|
|
|
|
+ suggestionsOuter = $(this).next('.fdb-suggestions-container').find('>.suggestions-outer');
|
|
|
|
+ return handleKeypress($(this), e);
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ $(this).attr('fdb-suggest-initialized', 1);
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ // on auto-suggest selection
|
|
|
|
+ $(document).off('click', '.suggest-item.fdb-suggest[data-med-name-id]');
|
|
|
|
+ $(document).on('click', '.suggest-item.fdb-suggest[data-med-name-id]', function () {
|
|
|
|
+
|
|
|
|
+ $('.suggestions-outer.fdb-suggestions').addClass('d-none');
|
|
|
|
+
|
|
|
|
+ let medNameID = $(this).attr('data-med-name-id'),
|
|
|
|
+ label = $.trim($(this).text()),
|
|
|
|
+ group = $(this).closest('.fdb-suggestions-container').attr('fdb-suggest-group');
|
|
|
|
+
|
|
|
|
+ // set value
|
|
|
|
+ let input = $(this).closest('.position-relative').prev('[fdb-med-suggest-search]');
|
|
|
|
+ input.val(label);
|
|
|
|
+ input.attr('data-med-name-id', medNameID);
|
|
|
|
+ input.trigger('input');
|
|
|
|
+ input.trigger('change');
|
|
|
|
+
|
|
|
|
+ $(document).trigger('fdb-med-changed', [group]);
|
|
|
|
+
|
|
|
|
+ return false;
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ // med changed, update routes
|
|
|
|
+ $(document).off('fdb-med-changed');
|
|
|
|
+ $(document).on('fdb-med-changed', function(e, group) {
|
|
|
|
+ let routeSelect = $('[fdb-med-suggest-route][fdb-suggest-group='+group+']').empty().prop('disabled', true);
|
|
|
|
+ let dosageSelect = $('[fdb-med-suggest-dosage][fdb-suggest-group='+group+']').empty().prop('disabled', true);
|
|
|
|
+ let strengthSelect = $('[fdb-med-suggest-strength][fdb-suggest-group='+group+']').empty().prop('disabled', true);
|
|
|
|
+ let medNameID = $('[fdb-med-suggest-search][fdb-suggest-group='+group+']').attr('data-med-name-id');
|
|
|
|
+ $.get('/fdb-routed-meds?med-name-id=' + medNameID, _data => {
|
|
|
|
+ routeSelect
|
|
|
|
+ .empty()
|
|
|
|
+ .append('<option value="">-- select --</option>');
|
|
|
|
+ for (let i = 0; i < _data.length; i++) {
|
|
|
|
+ routeSelect.append('<option value="' + _data[i].routed_med_id + '">' + _data[i].med_routed_med_id_desc + '</option>')
|
|
|
|
+ }
|
|
|
|
+ }, 'json');
|
|
|
|
+ routeSelect.prop('disabled', false);
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ // on route selection
|
|
|
|
+ $(document).off('change', '[fdb-med-suggest-route]');
|
|
|
|
+ $(document).on('change', '[fdb-med-suggest-route]', function () {
|
|
|
|
+ let group = $(this).attr('fdb-suggest-group');
|
|
|
|
+ let dosageSelect = $('[fdb-med-suggest-dosage][fdb-suggest-group='+group+']').empty().prop('disabled', true);
|
|
|
|
+ let strengthSelect = $('[fdb-med-suggest-strength][fdb-suggest-group='+group+']').empty().prop('disabled', true);
|
|
|
|
+ let routedMedID = $('[fdb-med-suggest-route][fdb-suggest-group='+$(this).attr('fdb-suggest-group')+']').val();
|
|
|
|
+ $.get('/fdb-routed-dosages?routed-med-id=' + routedMedID, _data => {
|
|
|
|
+ dosageSelect
|
|
|
|
+ .empty()
|
|
|
|
+ .append('<option value="">-- select --</option>');
|
|
|
|
+ for (let i = 0; i < _data.length; i++) {
|
|
|
|
+ dosageSelect.append('<option value="' + _data[i].routed_dosage_form_med_id + '">' + _data[i].med_routed_df_med_id_desc + '</option>')
|
|
|
|
+ }
|
|
|
|
+ }, 'json');
|
|
|
|
+ dosageSelect.prop('disabled', false);
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ // on dosage selection
|
|
|
|
+ $(document).off('change', '[fdb-med-suggest-dosage]');
|
|
|
|
+ $(document).on('change', '[fdb-med-suggest-dosage]', function () {
|
|
|
|
+ let group = $(this).attr('fdb-suggest-group');
|
|
|
|
+ let strengthSelect = $('[fdb-med-suggest-strength][fdb-suggest-group='+group+']').empty().prop('disabled', true);
|
|
|
|
+ let dosageFormMedID = $('[fdb-med-suggest-dosage][fdb-suggest-group='+$(this).attr('fdb-suggest-group')+']').val();
|
|
|
|
+ $.get('/fdb-meds?dosage-form-med-id=' + dosageFormMedID, _data => {
|
|
|
|
+ strengthSelect
|
|
|
|
+ .empty()
|
|
|
|
+ .append('<option value="">-- select --</option>');
|
|
|
|
+ for (let i = 0; i < _data.length; i++) {
|
|
|
|
+ strengthSelect.append('<option value="' + _data[i].medid + '">' + _data[i].med_medid_desc + '</option>')
|
|
|
|
+ }
|
|
|
|
+ }, 'json');
|
|
|
|
+ strengthSelect.prop('disabled', false);
|
|
|
|
+ });
|
|
|
|
+
|
|
|
|
+ }, '#fdb-pg');
|
|
|
|
+ }).call(window);
|
|
|
|
+ </script>
|
|
|
|
+
|
|
|
|
+@endsection
|