admin_properties_edit.twig

{% extends "index.twig" %}
{% block cssIncludes %}
<link rel="stylesheet" href="/css/jquery.Jcrop.min.css" type="text/css" />
{% endblock %}

{% block pageHeader %}
<h1>Edit Property - {{ property.name }}</h1>
{% endblock %}

{% block content %}
{% if imageDimensions[0] != imageSettings.dimensions.width or imageDimensions[1] != imageSettings.dimensions.height %}
<p id="image-size-alert" class="alert">
  Image size is not optimal:<br>
  Uploaded property images should are scaled and should be
  {{ imageSettings.dimensions.width }}px by
  {{ imageSettings.dimensions.height }}px for optimal quality. Your
  image is {{ imageDimensions[0] }}px by {{ imageDimensions[1] }}px.<br><br>
  Use the cropping tool below to select the appropriate part of the image
  to keep and click Save Property.
</p>
{% endif %}

<a class="backPropertiesLink" href="{{ indexUrl }}" >Back to Properties list</a>
<form id="properties-edit-form" action="{{ editUrl }}" method="post" enctype="multipart/form-data">
    <input type="hidden" name="_METHOD" value="PUT" />
    <input type="hidden" name="property[id]" value="{{ property.id }}" />
    <label>Name</label>
    <input type="text" name="property[name]" value="{{ property.name }}" required /><br>
    <label>City</label>
    <input type="text" name="property[city]" value="{{ property.city }}" required /><br>
    <label>State</label>
    <input type="text" name="property[state]" value="{{ property.state }}" maxlength="2" required /><br>
    <label>Type</label>
    <select name="property[type]" required>
        {% for t in propertyTypes %}
        <option {% if t == property.type %} selected {% endif %} value="{{ t|e }}">{{ t|e }}</option>
        {% endfor %}
    </select><br>
    <label>Amount Financed</label>
    <input type="number" name="property[amountFinanced]" value="{{ property.amountFinanced }}" required /><br>
    <label>Closing Date</label>
    <input type="date" name="property[closingDate]" value="{{ property.closingDate }}" required /><br>
    <label>Description</label>
    <textarea class="descProperties" name="property[description]">{{ property.description }}</textarea><br>
    <p class="cropText">
        Click and Drag to Crop the Image
        <button type="button" id="clear-crop">Clear Crop</button>
    </p>
    <input type="hidden" name="image[dimensions]"/>
    <img id="property-image" src="{{ imageSettings.path ~ "/" ~ property.image.name }}" alt="{{ p.name }} image" /><br>
    <label>Replace Image</label>
    <input type="file" name="image" accept="image/*" />
    <input class="saveProperty" type="submit" value="Save Property">
</form>
{% endblock %}

{% block jsIncludes %}
<script src="/js/jquery.Jcrop.min.js"></script>
<script src="/js/jquery.color.js"></script>
<script>
    $(document).ready(function() {
        var jcrop_api;
        $('#property-image').Jcrop({
            aspectRatio: {{ imageSettings.dimensions.width }} / {{ imageSettings.dimensions.height }},
            onSelect: function(c) {
                var dimensions = [Math.floor(c.x), Math.floor(c.y), Math.floor(c.w), Math.floor(c.h)];
                $('input[name="image[dimensions]"]').val(dimensions.join(','));
            }
        }, function() {
            jcrop_api = this;
        });

        $('#clear-crop').on('click', function() {
            jcrop_api.release();
            $('input[name="image[dimensions]"]').val('');
        });
    });
</script>
{% endblock %}