summaryrefslogtreecommitdiff
path: root/app/static
diff options
context:
space:
mode:
Diffstat (limited to 'app/static')
-rw-r--r--app/static/app.js191
-rw-r--r--app/static/autocomplete.js127
-rw-r--r--app/static/style.css0
3 files changed, 0 insertions, 318 deletions
diff --git a/app/static/app.js b/app/static/app.js
deleted file mode 100644
index faff329..0000000
--- a/app/static/app.js
+++ /dev/null
@@ -1,191 +0,0 @@
-class Search {
- constructor() {
- this.searchDebounced = _.debounce((query) => {
- if (query.length < 3)
- return;
- this.socket.emit('get_hints', {
- id: this.updateRequestId(),
- query
- });
- }, 150);
-
- let field = document.getElementById('queryInput');
- let btn = document.getElementById('querySubmit');
-
- this.autoComplete = new Autocomplete(field, {
- data: [],
- maximumItems: 10,
- onInput: (value) => {
- this.searchDebounced(value);
- },
- onSelectItem: ({label}) => {
- // console.log('selected:', label)
- },
- highlightClass: 'text-danger'
- });
-
- btn.addEventListener('click', this.onSubmit);
- field.addEventListener('keydown', this.onInputKeyDown);
-
- this.btn = btn;
- this.field = field;
-
- this.socket = io();
- this.socket.on('hints', this.onHints);
- this.socket.on('offers', this.onOffers)
- }
-
- updateRequestId() {
- this.requestId = requestId();
- return this.requestId;
- }
-
- onInputKeyDown = (e) => {
- if (e.keyCode === 10 || e.keyCode === 13)
- this.onSubmit();
- }
-
- onSubmit = (e) => {
- if (this.isLocked())
- return;
-
- this.lockButton('Загрузка...');
-
- gMaps.removeAllPoints();
- this.socket.emit('get_offers', {
- id: this.updateRequestId(),
- query: this.field.value
- });
- }
-
- onHints = (data) => {
- if (data.id !== this.requestId)
- return;
-
- this.unlockButton();
-
- if (data.error) {
- console.warn(data.error);
- return;
- }
-
- this.autoComplete.setData(data.response.map(item => {
- return {label: item, value: ''};
- }));
- this.autoComplete.renderIfNeeded();
- }
-
- onOffers = (data) => {
- if (data.id !== this.requestId)
- return;
-
- if (data.end) {
- this.unlockButton();
- return;
- } else {
- this.lockButton(data.pages > 1 ? `${data.page} из ${data.pages}` : null);
- }
-
- for (let offer of data.offers)
- gMaps.addOffer(offer);
- }
-
- isLocked() {
- return this.btn.classList.contains('disabled');
- }
-
- lockButton(text) {
- if (text !== null)
- this.btn.innerText = text;
- this.btn.classList.add('disabled');
- }
-
- unlockButton() {
- this.btn.classList.remove('disabled');
- this.btn.innerText = 'Поиск';
- }
-}
-
-
-class Maps {
- constructor() {
- /**
- * @type {ymaps.Map}
- */
- this.map = null;
- ymaps.ready(this.onInit);
-
- this.places = {};
- }
-
- onInit = () => {
- this.map = new ymaps.Map("mapContainer", {
- center: [59.94, 30.32],
- zoom: 11
- });
- this.map.controls.remove('searchControl');
- }
-
- addPoint({geo, offersRef, hint, pharmacyName, pharmacyAddress, pharmacyPhone}) {
- let mark = new ymaps.Placemark(geo, {
- hintContent: hint,
- }, {
- preset: 'islands#dotIcon',
- openEmptyBalloon: true,
- iconColor: '#3caa3c'
- });
- mark.events.add('balloonopen', e => {
- let lines = offersRef.map(offer => {
- return `${offer.name} (${offer.price} руб.)`
- });
- let html = `<b>${pharmacyName}</b><br>`;
- html += `${pharmacyAddress}<br>`;
- html += `тел: ${pharmacyPhone}<br><br>`;
- html += lines.join('<br>');
- mark.properties.set('balloonContent', html);
- });
- this.map.geoObjects.add(mark);
- return mark;
- }
-
- removeAllPoints() {
- this.map.geoObjects.removeAll();
- }
-
- addOffer(offer) {
- // console.log('[addOffer]', offer);
- let hash = offer.pharmacy.hash;
- if (hash in this.places)
- this.places[hash].offers.push(offer);
- else {
- this.places[hash] = {
- offers: [offer],
- };
- this.places[hash].mark = this.addPoint({
- geo: offer.pharmacy.geo,
- hint: offer.pharmacy.name,
- pharmacyName: offer.pharmacy.name,
- pharmacyAddress: offer.pharmacy.address,
- pharmacyPhone: offer.pharmacy.phone,
- offersRef: this.places[hash].offers
- });
- }
- }
-}
-
-
-function requestId() {
- return _.random(1, 99999999);
-}
-
-
-let gMaps, gSearch;
-
-window.addEventListener('DOMContentLoaded', function() {
- gSearch = new Search();
- gMaps = new Maps();
-
- // document.getElementById('test').addEventListener('click', () => {
- // gMaps.addTestPoint();
- // });
-}); \ No newline at end of file
diff --git a/app/static/autocomplete.js b/app/static/autocomplete.js
deleted file mode 100644
index c336123..0000000
--- a/app/static/autocomplete.js
+++ /dev/null
@@ -1,127 +0,0 @@
-const DEFAULTS = {
- treshold: 2,
- maximumItems: 5,
- highlightTyped: true,
- highlightClass: 'text-primary',
-};
-
-class Autocomplete {
- constructor(field, options) {
- this.field = field;
- this.options = Object.assign({}, DEFAULTS, options);
- this.dropdown = null;
-
- field.parentNode.classList.add('dropdown');
- field.setAttribute('data-toggle', 'dropdown');
- field.classList.add('dropdown-toggle');
-
- const dropdown = ce(`<div class="dropdown-menu" ></div>`);
- if (this.options.dropdownClass)
- dropdown.classList.add(this.options.dropdownClass);
-
- insertAfter(dropdown, field);
-
- this.dropdown = new bootstrap.Dropdown(field, this.options.dropdownOptions)
-
- field.addEventListener('click', (e) => {
- if (this.createItems() === 0) {
- e.stopPropagation();
- this.dropdown.hide();
- }
- });
-
- field.addEventListener('input', () => {
- if (this.options.onInput)
- this.options.onInput(this.field.value);
- this.renderIfNeeded();
- });
-
- field.addEventListener('keydown', (e) => {
- if (e.keyCode === 27) {
- this.dropdown.hide();
- return;
- }
- });
- }
-
- setData(data) {
- this.options.data = data;
- }
-
- renderIfNeeded() {
- if (this.createItems() > 0)
- this.dropdown.show();
- else
- this.field.click();
- }
-
- createItem(lookup, item) {
- let label;
- if (this.options.highlightTyped) {
- const idx = item.label.toLowerCase().indexOf(lookup.toLowerCase());
- const className = Array.isArray(this.options.highlightClass) ? this.options.highlightClass.join(' ')
- : (typeof this.options.highlightClass == 'string' ? this.options.highlightClass : '')
- label = item.label.substring(0, idx)
- + `<span class="${className}">${item.label.substring(idx, idx + lookup.length)}</span>`
- + item.label.substring(idx + lookup.length, item.label.length);
- } else
- label = item.label;
- return ce(`<button type="button" class="dropdown-item" data-value="${item.value}">${label}</button>`);
- }
-
- createItems() {
- const lookup = this.field.value;
- if (lookup.length < this.options.treshold) {
- this.dropdown.hide();
- return 0;
- }
-
- const items = this.field.nextSibling;
- items.innerHTML = '';
-
- let count = 0;
- for (let i = 0; i < this.options.data.length; i++) {
- const {label, value} = this.options.data[i];
- const item = {label, value};
- if (item.label.toLowerCase().indexOf(lookup.toLowerCase()) >= 0) {
- items.appendChild(this.createItem(lookup, item));
- if (this.options.maximumItems > 0 && ++count >= this.options.maximumItems)
- break;
- }
- }
-
- this.field.nextSibling.querySelectorAll('.dropdown-item').forEach((item) => {
- item.addEventListener('click', (e) => {
- let dataValue = e.target.getAttribute('data-value');
- this.field.value = e.target.innerText;
- if (this.options.onSelectItem)
- this.options.onSelectItem({
- value: e.target.value,
- label: e.target.innerText,
- });
- this.dropdown.hide();
- })
- });
-
- return items.childNodes.length;
- }
-}
-
-/**
- * @param html
- * @returns {Node}
- */
-function ce(html) {
- let div = document.createElement('div');
- div.innerHTML = html;
- return div.firstChild;
-}
-
-/**
- * @param elem
- * @param refElem
- * @returns {*}
- */
-function insertAfter(elem, refElem) {
- return refElem.parentNode.insertBefore(elem, refElem.nextSibling)
-} \ No newline at end of file
diff --git a/app/static/style.css b/app/static/style.css
deleted file mode 100644
index e69de29..0000000
--- a/app/static/style.css
+++ /dev/null
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-21 19:38:22 +0000