Untitled
raw download clone
JAVASCRIPT
views 38
,
size 28771 b
{% extends "base.html" %}
{% load crispy_forms_tags compress widget_tweaks static %}

{% block title %}Add new expense{% endblock title %}

</script>

{% block head %}
<link href="{% static 'css/maps/leaflet.css' %}" rel="stylesheet" type="text/css">
<link href="{% static 'css/maps/style.css' %}" rel="stylesheet" type="text/css">
{% endblock %}

{% block content %}

<!-- /page header -->
<!-- Page header -->
<div class="page-header">
  <div class="breadcrumb-line"><a class="breadcrumb-elements-toggle">
      <ul class="breadcrumb">
        <li>
          <a href="/">
            <i class="icon-home2 position-left"></i> Dashboard
          </a>
        </li>
        <li class="active">Add new expense</li>
      </ul>

      <ul class="breadcrumb-elements">
        <li>
          <a href="mailto:support@reimbi.com" class="legitRipple">
            <i class="icon-comment-discussion position-left"></i> Support
          </a>
        </li>
      </ul>
  </div>
</div>
<!-- /page header -->

<div class="panel panel-flat col-md-12">
  <div class="panel-heading">
    <div class="heading-elements">
      <ul class="icons-list">
        <li><a data-action="collapse"></a></li>
      </ul>
    </div>
  </div>

  <div class="panel-body col-md-12">
    <!-- {% if form.errors %}
    {% for field in form %}
    {% for error in field.errors %}
    <div class="alert alert-danger">
      <strong>{{ field.name }} {{ error|escape }}</strong>
    </div>
    {% endfor %}
    {% endfor %}
    {% for error in form.non_field_errors %}
    <div class="alert alert-danger">
      <strong>{{ field.name }} {{ error|escape }}</strong>
    </div>
    {% endfor %}
    {% endif %} -->

    <form id="create-expense-form" class="form-horizontal col-md-5" method="post" enctype="multipart/form-data">
      {% csrf_token %}
      <fieldset>
        <div id="div_id_expense_type" class="form-group {% if form.expense_type.errors %}has-error{% endif %}">
          <label for="id_expense_type" class="control-label  requiredField">
            Expense type<span class="asteriskField">*</span>
          </label>
          <div class="controls">
            <select id="id_expense_type" v-model="expense_type" name="expense_type" class="form-control" required>
              <option value="">----------</option>
              {% for expense_type in expense_types %}
              <option value="{{ expense_type.expense_type }}"
                {% if form.data.expense_type == expense_type.expense_type %}selected="selected" {% endif %}>
                {{ expense_type.get_expense_type_display }}
              </option>
              {% endfor %}
            </select>
            {% if form.expense_type.errors %}
            <span id="error_1_{{ form.expense_type.auto_id }}"
              class="help-block"><strong>{{ form.expense_type.errors.0 }}</strong></span>
            {% endif %}
          </div>
        </div>

        <div class="form-group" v-show="milage">
          <div id="routing-response" style="float: right; padding-left: 20px;"></div>
          <div id="routing-error" style="float: right; padding-left: 20px;"></div>
          <div id="routing-map" style="cursor: default; height:400px; width: 100%;"></div>
        </div>

        <div id="div_id_from" v-show="milage" class="form-group {% if form.from.errors %}has-error{% endif %}">
          <label for="from" class="control-label ">
            From<span class="asteriskField">*</span>
          </label>
          <div class="controls ">
            <input autocomplete="off" type="text" v-model="from.name" id="from" name="from"
              value="{% if form.data.from %}{{ form.data.from }}{% endif %}"
              class="typeahead textinput textInput form-control {% if form.from.errors %}form-control-danger{% endif %}"
              required>
            {% if form.from.errors %}
            <span id="error_1_{{ form.from.auto_id }}"
              class="help-block"><strong>{{ form.from.errors.0 }}</strong></span>
            {% endif %}
          </div>
        </div>

        <div class="form-group form-group-float" v-show="milage && showVia1">
          <div class="form-group-feedback form-group-feedback-right">
            <input autocomplete="off" type="text" v-model="via1.name" id="via1" name="via1"
              value="{% if form.data.from %}{{ form.data.from }}{% endif %}"
              class="typeahead textinput textInput form-control">
            <div class="form-control-feedback pointer-events" @click="removeViaPoint('showVia1')">
              <i class="icon-cancel-circle2"></i>
            </div>
          </div>
        </div>

        <div class="form-group form-group-float" v-show="milage && showVia2">
          <div class="form-group-feedback form-group-feedback-right">
            <input autocomplete="off" type="text" v-model="via2.name" id="via2" name="via2"
              value="{% if form.data.from %}{{ form.data.from }}{% endif %}"
              class="typeahead textinput textInput form-control">
            <div class="form-control-feedback pointer-events" @click="removeViaPoint('showVia2')">
              <i class="icon-cancel-circle2"></i>
            </div>
          </div>
        </div>

        <div class="form-group form-group-float" v-show="milage && showVia3">
          <div class="form-group-feedback form-group-feedback-right">
            <input autocomplete="off" type="text" v-model="via3.name" id="via3" name="via3"
              value="{% if form.data.from %}{{ form.data.from }}{% endif %}"
              class="typeahead textinput textInput form-control">
            <div class="form-control-feedback pointer-events" @click="removeViaPoint('showVia3')">
              <i class="icon-cancel-circle2"></i>
            </div>
          </div>
        </div>

        <div class="form-group form-group-float" v-show="milage && showVia4">
          <div class="form-group-feedback form-group-feedback-right">
            <input autocomplete="off" type="text" v-model="via4.name" id="via4" name="via4"
              value="{% if form.data.from %}{{ form.data.from }}{% endif %}"
              class="typeahead textinput textInput form-control">
            <div class="form-control-feedback pointer-events" @click="removeViaPoint('showVia4')">
              <i class="icon-cancel-circle2"></i>
            </div>
          </div>
        </div>

        <div id="div_id_destination" v-show="milage"
          class="form-group {% if form.destination.errors %}has-error{% endif %}">
          <label for="destination" class="control-label ">
            Destination<span class="asteriskField">*</span>
          </label>
          <div class="controls ">
            <input autocomplete="off" type="text" v-model="destination.name" id="destination" name="destination"
              value="{% if form.data.destination %}{{ form.data.destination }}{% endif %}"
              class="typeahead textinput textInput form-control {% if form.destination.errors %}form-control-danger{% endif %}"
              required>
            {% if form.destination.errors %}
            <span id="error_1_{{ form.destination.auto_id }}"
              class="help-block"><strong>{{ form.destination.errors.0 }}</strong></span>
            {% endif %}
          </div>
        </div>

        <div class="form-group" v-if="milage && viaNumber < 4">
          <button type="button" class="btn btn-primary" @click="addViaPoint">
            <i class="icon-plus-circle2 mr-2"></i> Add point
          </button>
        </div>

        <div id="div_id_meal_subtype" class="form-group {% if form.meal_subtype.errors %}has-error{% endif %}"
          v-if="decideToHideMealSubtype('meal_subtype')">
          <label for="id_meal_subtype" class="control-label ">
            Meal type
          </label>
          <div class="controls ">
            <select id="id_meal_subtypes" name="meal_subtypes" v-model="meal_subtypes" class="form-control">
              {% for subtype in meal_subtypes %}
              <option value="{{ subtype.0 }}" {% if form.data.meal_subtypes == subtype.0 %}selected="selected"
                {% endif %}>
                {{ subtype.1 }}
              </option>
              {% endfor %}
            </select>
            {% if form.meal_subtype.errors %}
            {{ form.meal_subtype|add_class:"form-control"|add_class:"form-control-danger" }}
            <span id="error_1_{{ form.meal_subtype.auto_id }}"
              class="help-block"><strong>{{ form.meal_subtype.errors.0 }}</strong></span>
            {% endif %}
          </div>
        </div>

        <div id="div_id_nights" class="form-group {% if form.nights.errors %}has-error{% endif %}"
          v-if="decideToHide('nights')">
          <label for="id_nights" class="control-label ">
            # of nights
          </label>
          <div class="controls ">
            <input type="text" v-model="nights" id="id_nights" name="nights"
              value="{% if form.data.nights %}{{ form.data.nights }}{% endif %}"
              class="form-control {% if form.nights.errors %}form-control-danger{% endif %}" required>
            {% if form.nights.errors %}
            <span id="error_1_{{ form.nights.auto_id }}"
              class="help-block"><strong>{{ form.nights.errors.0 }}</strong></span>
            {% endif %}
          </div>
        </div>

        <div id="div_id_expense_date" class="form-group {% if form.expense_date.errors %}has-error{% endif %}">
          <label for="id_expense_date" class="control-label  requiredField">
            Expense Date<span class="asteriskField">*</span>
          </label>
          <div class="controls ">
            <input ref="pickadate" type="text" v-model="expense_date" id="id_expense_date" name="expense_date"
              value="{% if form.data.expense_date %}{{ form.data.expense_date }}{% endif %}"
              class="pickadate form-control {% if form.expense_date.errors %}form-control-danger{% endif %}" required>
            {% if form.expense_date.errors %}
            <span id="error_1_{{ form.expense_date.auto_id }}"
              class="help-block"><strong>{{ form.expense_date.errors.0 }}</strong></span>
            {% endif %}
          </div>
        </div>

        <div id="div_id_city_of_purchase" class="form-group {% if form.city_of_purchase.errors %}has-error{% endif %}">
          <label for="city_of_purchase" class="control-label ">
            City of purchase*
          </label>
          <div class="controls ">
            <input autocomplete="off" type="text" v-model="city_of_purchase" id="city_of_purchase"
              name="city_of_purchase"
              value="{% if form.data.city_of_purchase %}{{ form.data.city_of_purchase }}{% endif %}"
              class="textinput textInput form-control {% if form.city_of_purchase.errors %}form-control-danger{% endif %}"
              required>
            {% if form.city_of_purchase.errors %}
            <span id="error_1_{{ form.city_of_purchase.auto_id }}"
              class="help-block"><strong>{{ form.city_of_purchase.errors.0 }}</strong></span>
            {% endif %}
          </div>
        </div>

        <div class="row">
          <div class="col-xs-7">
            <div id="div_id_amount" class="form-group {% if form.amount.errors %}has-error{% endif %}"
              :class="{ 'has-warning': warning }">
              <label for="id_amount" class="control-label  requiredField">
                Expense Amount<span class="asteriskField">*</span>
              </label>
              <div class="controls ">
                <input type="number" v-model="amount" @input="handleAmountChange" id="id_amount" name="amount"
                  value="{% if form.data.amount %}{{ form.data.amount }}{% endif %}"
                  class="form-control {% if form.amount.errors %}form-control-danger{% endif %}" required>

                {% if form.amount.errors %}
                <span id="error_1_{{ form.amount.auto_id }}"
                  class="help-block"><strong>{{ form.amount.errors.0 }}</strong></span>
                {% endif %}
              </div>
            </div>
            <div class="form-text text-warning" v-if="warning">
              This expense exceeds the policy limit. Please ensure to explain the expense in the description for
              approval.
            </div>
          </div>

          <div class="col-xs-5">
            <div id="div_id_currency" class="form-group {% if form.currency.errors %}has-error{% endif %}">
              <label for="id_currency" class="control-label  requiredField">
                Currency<span class="asteriskField">*</span>
              </label>
              <div class="controls ">
                <select id="id_currency" name="currency" v-model="selected_currency" class="form-control" required>
                  {% for currency in currencies %}
                  <option value="{{ currency.0 }}" {% if form.data.currency == currency.0 %}selected="selected"
                    {% endif %}>
                    {{ currency.0 }}
                  </option>
                  {% endfor %}
                </select>
                {% if form.currency.errors %}
                <span id="error_1_{{ form.currency.auto_id }}"
                  class="help-block"><strong>{{ form.currency.errors.0 }}</strong></span>
                {% endif %}
              </div>
            </div>
          </div>
        </div>

        <div id="div_id_description" class="form-group {% if form.description.errors %}has-error{% endif %}">
          <label for="id_description" class="control-label ">
            Description
          </label>
          <div class="controls ">
            <input type="text" v-model="description" id="id_description" name="description"
              value="{% if form.data.description %}{{ form.data.description }}{% endif %}"
              class="form-control {% if form.description.errors %}form-control-danger{% endif %}">
            {% if form.description.errors %}
            <span id="error_1_{{ form.description.auto_id }}"
              class="help-block"><strong>{{ form.description.errors.0 }}</strong></span>
            {% endif %}
          </div>
        </div>

        <div id="div_id_vendor" class="form-group {% if form.vendor.errors %}has-error{% endif %}">
          <label for="id_vendor" class="control-label ">
            Vendor*
          </label>
          <div class="controls">
            <input type="text" v-model="vendor" id="id_vendor" name="vendor"
              value="{% if form.data.vendor %}{{ form.data.vendor }}{% endif %}"
              class="form-control {% if form.vendor.errors %}form-control-danger{% endif %}" required>
            {% if form.vendor.errors %}
            <span id="error_1_{{ form.vendor.auto_id }}"
              class="help-block"><strong>{{ form.vendor.errors.0 }}</strong></span>
            {% endif %}
          </div>
        </div>

        <div id="div_id_receipt" class="form-group {% if form.receipt.errors %}has-error{% endif %}">
          <label for="id_receipt" class="control-label ">
            Receipt
          </label>
          <div class="controls ">
            <input type="file" v-model="receipt" id="id_receipt" name="receipt"
              value="{% if form.data.receipt %}{{ form.data.receipt }}{% endif %}"
              class="form-control {% if form.receipt.errors %}form-control-danger{% endif %}">
            {% if form.receipt.errors %}
            <span id="error_1_{{ form.receipt.auto_id }}"
              class="help-block"><strong>{{ form.receipt.errors.0 }}</strong></span>
            {% endif %}
          </div>
        </div>
      </fieldset>

      <div class="buttonHolder">
        <input type="submit" name="save" value="Save" class="btn btn-primary btn btn-primary" id="submit-id-save" />
        <input type="submit" name="save_and_add_another" value="Save and add another"
          class="btn btn-primary btn border-slate text-slate-800 btn-flat legitRipple"
          id="submit-id-save_and_add_another" />
      </div>
    </form>
  </div>
</div>
{% endblock %}

{% block extra_scripts %}
{% compress js %}
// scripts for maps
<script src="{% static 'js/maps/leaflet.js' %}"></script>
<script src="{% static 'js/maps/bouncemarker.js' %}"></script>
<script src="{% static 'js/maps/togeojson.js' %}"></script>
<script src="{% static 'js/maps/graphhopper-client.js' %}"></script>

<script>
  const meal_subtype_enabled = "{{ meal_subtype_enabled }}";
  const requester_type_policy_currency = "{{requester_type_policy_currency}}";
  const meal_amount_warning_limit = "{{ meal_amount_warning_limit }}";
  const meal_breakfast_amount_warning_limit = "{{ meal_breakfast_amount_warning_limit }}";
  const meal_lunch_amount_warning_limit = " {{ meal_lunch_amount_warning_limit }}";
  const meal_dinner_amount_warning_limit = " {{ meal_dinner_amount_warning_limit }}";
  const lodging_warning_limit = "{{ lodging_warning_limit }}";
  const requester_default_currency = "{{ form.data.currency }}" != "" ? "{{ form.data.currency }}" : "{{request.user.default_currency}}";
  const policy_default_currency = "{{requester_type_policy_currency}}";
  const expense_type = "{{ form.data.expense_type }}" != "" ? "{{ form.data.expense_type }}" : "{{ form.expense_type.initial|default_if_none:'' }}";
  const expense_date = "{{ form.data.expense_date }}" != "" ? "{{ form.data.expense_date }}" : "{{ form.expense_date.initial|date:'Y-m-d' }}";
  const amount = "{{ form.data.amount }}" != "" ? "{{ form.data.amount }}" : "{{ form.amount.initial|default_if_none:'' }}";
  const meal_subtypes = "{{ form.data.meal_subtypes }}" != "" ? "{{ form.data.meal_subtypes }}" : "{{ form.meal_subtypes.initial|default_if_none:'' }}";
  const city_of_purchase = "{{ form.data.city_of_purchase }}" != "" ? "{{ form.data.city_of_purchase }}" : "{{ form.city_of_purchase.initial|default_if_none:'' }}";
  const vendor = "{{ form.data.vendor }}" != "" ? "{{ form.data.vendor }}" : "{{ form.vendor.initial|default_if_none:'' }}";
  const description = "{{ form.data.description }}" != "" ? "{{ form.data.description }}" : "{{ form.description.initial|default_if_none:'' }}";
  const nights = "{{ form.data.nights }}" != "" ? "{{ form.data.nights }}" : "{{ form.nights.initial|default_if_none:'' }}";
  const receipt = "{{ form.data.receipt }}";
  // map
  //const host = undefined; // "http://localhost:9000/api/1";
 // const defaultKey = "6405a5f0-4547-46b1-9632-93517c148aa0";
  //const profile = "car";
  //const ghRouting = new GraphHopper.Routing({ key: defaultKey, host: host, vehicle: profile, elevation: false });

//



	var host; // = "http://localhost:9000/api/1";

	var defaultKey = '3f3e19cc-b624-4d0e-b810-325322cba330';
	var profile = 'car';

	// create a routing client to fetch real routes, elevation.true is only supported for vehicle bike or foot
	var ghRouting = new GraphHopper.Routing({ key: defaultKey, host: host, vehicle: profile, elevation: false });
	var ghGeocoding = new GraphHopper.Geocoding({
		key: defaultKey,
		host: host,
		limit: 8,
		locale: 'en' /* currently fr, en, de and it are explicitely supported */
	});

	var routingMap = createMap('routing-map');
	routingMap.setView([ 52.521235, 13.3992 ], 12);

	var routingLayer = L.geoJson().addTo(routingMap);
	routingLayer.options = {
		style: { color: '#00cc33', weight: 5, opacity: 0.6 }
	};


  licznik = 0;

  start = '39.099724';
  start_a = '-94.578331';

  stop = '45.523064';
  stop_a = '-122.676483';

  vegas = '36.114647';
  vegas_b = '-115.172813';


	
function setupRoutingAPI(map, ghRouting) {
	if (ghRouting.points.length > 1) {
		ghRouting.clearPoints();
		routingLayer.clearLayers();
	}
	licznik = licznik + 1;

	ghRouting.addPoint(new GHInput(start, start_a));
	if (licznik == 1) {
		ghRouting.addPoint(new GHInput(vegas, vegas_b));
	}
	ghRouting.addPoint(new GHInput(stop, stop_a));

	ghRouting
		.doRequest()
		.then(function(json) {
			var path = json.paths[0];
			routingLayer.addData({
				type: 'Feature',
				geometry: path.points
			});
			var outHtml = 'Distance in meter:' + path.distance;
			outHtml += '<br/>Times in seconds:' + path.time / 1000;
			outHtml += "<br/><a href='" + ghRouting.getGraphHopperMapsLink() + "'>GraphHopper Maps</a>";
			$('#routing-response').html(outHtml);

			if (path.bbox) {
				var minLon = path.bbox[0];
				var minLat = path.bbox[1];
				var maxLon = path.bbox[2];
				var maxLat = path.bbox[3];
				var tmpB = new L.LatLngBounds(new L.LatLng(minLat, minLon), new L.LatLng(maxLat, maxLon));
				map.fitBounds(tmpB);
			}
		})
		.catch(function(err) {
			var str = 'An error occured: ' + err.message;
			$('#routing-response').text(str);
		});
}

  function createMap(divId) {
    var osmAttr = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';

    var omniscale = L.tileLayer.wms('https://maps.omniscale.net/v1/ghexamples-3646a190/tile', {
      layers: 'osm',
      attribution: osmAttr + ', &copy; <a href="http://maps.omniscale.com/">Omniscale</a>'
    });

    var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: osmAttr
    });

    var map = L.map(divId, { layers: [ omniscale ] });
    L.control
      .layers({
        Omniscale: omniscale,
        OpenStreetMap: osm
      })
      .addTo(map);
    return map;
  }
  
  new Vue({
    delimiters: ['[[', ']]'],
    el: '#create-expense-form',
    data: function () {
      return {
        expense_type: expense_type,
        from: {},
        destination: {},
        viaNumber: 0,
        showVia1: false,
        via1: {},
        showVia2: false,
        via2: {},
        showVia3: false,
        via3: {},
        showVia4: false,
        via4: {},
        amount: amount,
        meal_subtypes: meal_subtypes,
        selected_currency: requester_default_currency,
        expense_date: expense_date,
        city_of_purchase: city_of_purchase,
        nights: nights,
        vendor: vendor,
        description: description,
        receipt: receipt,
        meal_subtype_enabled: meal_subtype_enabled,
        warning: false,
        tableOfTruth: {
          'meal_subtype': ['meals'],
          'nights': ['lodging', 'parking']
        },
        routingMap: undefined,
        routingLayer: undefined
      }
    },
    mounted: function () {

      		

      //jquery
      const self = this;

      $('.pickadate').pickadate({
        max: Date.now(),
        format: "yyyy-mm-dd",
        onSet: function () {
          self.expense_date = this.get('select', 'yyyy-mm-dd')
        }
      });

      $(".typeahead").typeahead({
        source: function (query, process) {
          return $.get({
            url: '/api/place-autocomplete',
            data: {
              'q': query
            }
          }, function (data) {
            return process(data.hits);
          });
        },
        displayText: function (item) {
          return `${item.name}, ${item.state}, ${item.street && item.street}, ${item.housenumber && item.housenumber}`
        },
        updater: function (item) {
          self[this.$element.context.id] = item
        },
      });

      $("#city_of_purchase").typeahead({
        source: function (query, process) {
          return $.get({
            url: '/expenses/~cities',
            data: {
              'q': query
            }
          }, function (data) {
            return process(data);
          });
        },
        updater: function (item) {
          self.city_of_purchase = item.name
        },
      });
    },
    methods: {
      displayText(item) {
        return `${item.name}, ${item.state}, ${item.street && item.street}, ${item.housenumber && item.housenumber}`
      },
      addViaPoint(viaPoint) {
        this[`showVia${this.viaNumber+1}`] = true;
        this.viaNumber++;
      },
      removeViaPoint(viaPoint) {
        this[viaPoint] = false;
        this.viaNumber--;
        this[`${viaPoint.slice(4,8).toLowerCase()}`] = {};
        //this.setupRoutingAPI(this.routingMap, ghRouting);
      },

      getCurrencyByCountryName(country_name) {
        if (country_name == 'United States') {
          return 'USD'
        } else if (country_name == 'Poland') {
          return 'PLN'
        } else if (country_name == 'Canada') {
          return 'CAD'
        } else if (country_name == 'China') {
          return 'CNY'
        } else if (country_name == 'Germany' || country_name == 'France') {
          return 'EUR'
        } else if (country_name == 'United Kingdom') {
          return 'GBP'
        } else if (country_name == 'Switzerland') {
          return 'CHF'
        } else if (country_name == 'Japan') {
          return 'JPY'
        } else if (country_name == 'Mexico') {
          return 'MXN'
        }
        return false
      },
      decideToHide(value) {
        return this.tableOfTruth[value].includes(this.expense_type)
      },
      decideToHideMealSubtype(value) {
        return this.decideToHide(value) && meal_subtype_enabled === '1';
      },
      handleWarning(res, meal_type) {
        return res.then(resp => {
          const converted_amount = resp.data['converted_amount'];
          if (parseInt(converted_amount) > parseInt(meal_type) && parseInt(meal_type) !== 0) {
            this.warning = true;
          } else {
            this.warning = false;
          }
        });
      },
      handleAmountChange() {
        const req = `/expenses/~convert-warning-amount/?selected_currency=${this.selected_currency}&amount=${this.amount}&date=${this.expense_date}&limit_currency=${requester_type_policy_currency}`
        const res = this.$http.get(req);

        if (this.expense_type === 'meals' && meal_subtype_enabled === '0') {
          this.handleWarning(res, meal_amount_warning_limit)
        } else if (this.meal_subtypes === 'breakfast' && meal_subtype_enabled === '1') {
          this.handleWarning(res, meal_breakfast_amount_warning_limit)
        } else if (this.meal_subtypes === 'lunch' && meal_subtype_enabled === '1') {
          this.handleWarning(res, meal_lunch_amount_warning_limit)
        } else if (this.meal_subtypes === 'dinner' && meal_subtype_enabled === '1') {
          this.handleWarning(res, meal_dinner_amount_warning_limit)
        } else if (this.expense_type === 'lodging') {
          res.then(resp => {
            const converted_amount = resp.data['converted_amount'];
            const amount_limit = parseInt(lodging_warning_limit) * parseInt(this.nights);

            if (parseInt(converted_amount) > parseInt(amount_limit)) {
              this.warning = true;
            } else {
              this.warning = false;
            }
          });
        } else {
          this.warning = false;
        }
      },
    },
    computed: {
      viaFields() {
        this.via1;
        this.via2;
        this.via3;
        this.via4;
        return Date.now();
      },
      milage() {
        return this.expense_type === 'mileage';
      }
    },
    watch: { 
      expense_type: function(val) {
        if (val === 'mileage') {
          setTimeout(() => setupRoutingAPI(routingMap, ghRouting), 100)
        }
      },
      city_of_purchase: function (val) {
        const country = val.split(", ").pop();
        const currency = this.getCurrencyByCountryName(country);
        if (currency) {
          this.selected_currency = currency;
        }
      },
      from: function (val) {
        if (val && this.destination && this.destination.name) {
          //this.setupRoutingAPI(this.routingMap, ghRouting);
        }
      },
      destination: function (val) {
        if (val && this.from && this.from.name) {
          //this.setupRoutingAPI(this.routingMap, ghRouting);
        }
      },
      viaFields: function() {
        if (this.destination && this.from) {
          //this.setupRoutingAPI(this.routingMap, ghRouting);
        }
      }
    },
  });
</script>
{% endcompress %}
{% endblock extra_scripts %}
close fullscreen
Login or Register to edit or fork this paste. It's free.