ERx data-list & number to words

resources/views/app/patient/partials/erx.blade.php

@@ -28,7 +28,7 @@
                 <td class="px-2">@{{item.amount}}</td>
                 <td class="px-2">@{{item.route}}</td>
                 <td class="px-2">@{{item.frequency}}</td>
-                <td class="px-2">@{{item.dispense}}</td>
+                <td class="px-2">@{{item.dispense}} <span class="text-secondary" v-html="inWords(item.dispense)"></span></td>
                 <td class="px-2">@{{item.refills}}</td>
                 <td class="px-2">@{{item.purpose}}</td>
                 <td class="px-2">@{{item.pharmacy}}</td>
@@ -66,23 +66,41 @@
                 </div>
                 <div class="col-6">
                     <label class="text-sm text-secondary mb-1">Route</label>
-                    <input type="text" v-model="popupItem.route" class="form-control form-control-sm">
+                    <input type="text" v-model="popupItem.route" class="form-control form-control-sm"
+                           data-option-list="route-options">
+                    <div id="route-options" class="data-option-list">
+                        <div>PO (by mouth)</div>
+                        <div>PR (per rectum)</div>
+                        <div>IM (intramuscular)</div>
+                        <div>IV (intravenous)</div>
+                        <div>ID (intradermal)</div>
+                        <div>IN (intranasal)</div>
+                        <div>TP (topical)</div>
+                        <div>SL (sublingual)</div>
+                        <div>BUCC (buccal)</div>
+                        <div>IP (intraperitoneal)</div>
+                    </div>
                 </div>
             </div>
             <div class="row mb-2">
                 <div class="col-6">
                     <label class="text-sm text-secondary mb-1">Frequency</label>
-                    <input type="text" v-model="popupItem.frequency" class="form-control form-control-sm">
+                    <input type="text" v-model="popupItem.frequency" class="form-control form-control-sm"
+                           data-option-list="frequency-options">
+                    <div id="frequency-options" class="data-option-list">
+                        <div>Once a day</div>
+                        <div>Twice a day</div>
+                    </div>
                 </div>
             </div>
             <div class="row mb-2">
                 <div class="col-6">
                     <label class="text-sm text-secondary mb-1">Dispense</label>
-                    <input type="text" v-model="popupItem.dispense" class="form-control form-control-sm">
+                    <input type="number" v-model="popupItem.dispense" class="form-control form-control-sm">
                 </div>
                 <div class="col-6">
                     <label class="text-sm text-secondary mb-1">Refills</label>
-                    <input type="text" v-model="popupItem.refills" class="form-control form-control-sm">
+                    <input type="number" v-model="popupItem.refills" class="form-control form-control-sm">
                 </div>
             </div>
             <div class="row mb-2">
@@ -283,6 +301,25 @@
                             $(elem).attr('ac-initialized', 1);
                             $(strengthElem).attr('ac-initialized', 1);
                         });
+                    },
+                    inWords: function (num) {
+                        try {
+                            num = +num;
+                            var a = ['','one ','two ','three ','four ', 'five ','six ','seven ','eight ','nine ','ten ','eleven ','twelve ','thirteen ','fourteen ','fifteen ','sixteen ','seventeen ','eighteen ','nineteen '];
+                            var b = ['', '', 'twenty','thirty','forty','fifty', 'sixty','seventy','eighty','ninety'];
+                            if ((num = num.toString()).length > 3) return 'overflow';
+                            let n = ('000000000' + num).substr(-9).match(/^(\d{2})(\d{2})(\d{2})(\d{1})(\d{2})$/);
+                            if (!n) return; var str = '';
+                            str += (n[1] != 0) ? (a[Number(n[1])] || b[n[1][0]] + ' ' + a[n[1][1]]) + 'crore ' : '';
+                            str += (n[2] != 0) ? (a[Number(n[2])] || b[n[2][0]] + ' ' + a[n[2][1]]) + 'lakh ' : '';
+                            str += (n[3] != 0) ? (a[Number(n[3])] || b[n[3][0]] + ' ' + a[n[3][1]]) + 'thousand ' : '';
+                            str += (n[4] != 0) ? (a[Number(n[4])] || b[n[4][0]] + ' ' + a[n[4][1]]) + 'hundred ' : '';
+                            str += (n[5] != 0) ? ((str != '') ? 'and ' : '') + (a[Number(n[5])] || b[n[5][0]] + ' ' + a[n[5][1]]) : '';
+                            return str ? '(' + $.trim(str) + ')' : '';
+                        }
+                        catch (e) {
+                            return '';
+                        }
                     }
                 },
                 mounted: function () {