society-self-service/sstreasury/jinja2/sstreasury/budget_edit.html

245 lines
10 KiB
HTML

{% extends 'sstreasury/base.html' %}
{#
Society Self-Service
Copyright © 2018-2019 Yingtong Li (RunasSudo)
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.
#}
{% block title %}{% if request.resolver_match.url_name == 'budget_new' %}New{% else %}Edit{% endif %} budget{% endblock %}
{% block maincontent %}
<h1>{% if request.resolver_match.url_name == 'budget_new' %}New{% else %}Edit{% endif %} budget</h1>
<form class="ui form" method="POST">
<div class="ui disabled inline grid field">
<label class="three wide column">ID</label>
<input class="eleven wide column" type="text" name="id" value="{{ 'BU-{}'.format(revision.budget.id) if revision.budget.id != None else '' }}">
</div>
<div class="ui required inline grid field">
<label class="three wide column">Title</label>
<input class="eleven wide column" type="text" name="name" value="{{ revision.name }}">
</div>
<div class="ui required inline grid field">
<label class="three wide column">Due date <span data-tooltip="The date you require budget approval by"><i class="grey question circle icon"></i></span></label>
<div class="eleven wide column">
<div class="ui calendar" id="cal_date">
<div class="ui input left icon grid">
<i class="calendar icon" style="z-index: 999;"></i>
<input class="twelve wide column" type="text" name="date" value="{{ revision.date or '' }}">
</div>
</div>
</div>
</div>
<div class="ui inline grid field">
<label class="three wide column">Event details <span data-tooltip="Leave blank if not applicable"><i class="grey question circle icon"></i></span></label>
<div class="two wide column">
Date/time
</div>
<div class="nine wide column">
<span class="ui calendar" id="cal_event_dt">
<span class="ui input left icon grid">
<i class="calendar icon" style="z-index: 999;"></i>
<input class="nine wide column" type="text" name="event_dt" value="{{ localtime(revision.event_dt) if revision.event_dt else '' }}">
</span>
</span>
</div>
</div>
<div class="ui inline grid field">
<div class="three wide column"></div>
<div class="four wide column">Estimated no. of attendees</div>
<input class="seven wide column" type="text" name="event_attendees" value="{{ revision.event_attendees or '' }}">
</div>
<div class="ui required inline grid field">
<label class="three wide column">Contributors <span data-tooltip="To share this budget with other contributors, enter their email addresses, one per line"><i class="grey question circle icon"></i></span></label>
<textarea class="eleven wide column" rows="2" name="contributors" style="font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;">{{ contributors }}</textarea>
</div>
<div class="ui divider"></div>
<div class="ui inline grid field">
<label class="three wide column">Comments</label>
<textarea class="eleven wide column" rows="2" name="comments">{{ revision.comments }}</textarea>
</div>
<div class="ui divider"></div>
<div class="ui inline grid field">
<label class="three wide column">Revenue</label>
<div class="eleven wide column"></div>
</div>
<div id="revenue_grid"></div>
<input type="hidden" name="revenue" id="revenue_input">
<div class="ui accordion">
<div class="{% if revision.revenue_comments %}active {% endif %}title">
<i class="dropdown icon"></i>
Revenue comments (click to show/hide)
</div>
<div class="content">
<div class="ui inline grid field">
<label class="three wide column">Comments</label>
<textarea class="eleven wide column" rows="2" name="revenue_comments">{{ revision.revenue_comments }}</textarea>
</div>
</div>
</div>
<div class="ui divider"></div>
<div class="ui inline grid field">
<label class="three wide column">Expenses</label>
<div class="eleven wide column"><input type="checkbox" name="expense_no_emergency_fund" id="expense_no_emergency_fund"{% if revision.expense_no_emergency_fund %} checked{% endif %}> <label for="expense_no_emergency_fund">No emergency fund required (please add a comment explaining why)</label></div>
</div>
<div id="expense_grid"></div>
<input type="hidden" name="expense" id="expense_input">
<div class="ui accordion" id="expense_comments_accordion">
<div class="{% if revision.expense_comments or revision.expense_no_emergency_fund %}active {% endif %}title">
<i class="dropdown icon"></i>
Expense comments (click to show/hide)
</div>
<div class="{% if revision.expense_comments or revision.expense_no_emergency_fund %}active {% endif %}content">
<div class="ui {% if revision.expense_no_emergency_fund %}required {% endif %}inline grid field">
<label class="three wide column">Comments</label>
<textarea class="eleven wide column" rows="2" name="expense_comments">{{ revision.expense_comments }}</textarea>
</div>
</div>
</div>
<div class="ui divider"></div>
<div class="ui error message"></div>
<input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
<input class="ui primary button" type="submit" name='submit' value="Save">
<input class="ui button" type="submit" name='submit' value="Save and continue editing">
{% if request.resolver_match.url_name == 'budget_edit' %}
<input class="ui right floated red button" type="submit" name='submit' value="Delete" onclick="return confirm('Are you sure you want to delete this budget? This action is IRREVERSIBLE.');">
{% endif %}
</form>
{% endblock %}
{% block head %}
{{ super() }}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui-calendar@0.0.8/dist/calendar.min.css" integrity="sha256-KCHiPtYk/vfF5/6lDXpz5r5FuIYchVdai0fepwGft80=" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsgrid@1.5.3/dist/jsgrid.min.css" integrity="sha256-a/jNbtm7jpeKiXCShJ8YC+eNL9Abh7CBiYXHgaofUVs=" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsgrid@1.5.3/dist/jsgrid-theme.min.css" integrity="sha256-0rD7ZUV4NLK6VtGhEim14ZUZGC45Kcikjdcr4N03ddA=" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dragula@3.7.2/dist/dragula.min.css" integrity="sha256-iVhQxXOykHeL03K08zkxBGxDCLCuzRGGiTYf2FL6mLY=" crossorigin="anonymous">
{% endblock %}
{% block script %}
{{ super() }}
<script src="https://cdn.jsdelivr.net/npm/semantic-ui-calendar@0.0.8/dist/calendar.min.js" integrity="sha256-Pnz4CK94A8tUiYWCfg/Ko25YZrHqOKeMS4JDXVTcVA0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jsgrid@1.5.3/dist/jsgrid.min.js" integrity="sha256-lzjMTpg04xOdI+MJdjBst98bVI6qHToLyVodu3EywFU=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/dragula@3.7.2/dist/dragula.min.js" integrity="sha256-ug4bHfqHFAj2B5MESRxbLd3R3wdVMQzug2KHZqFEmFI=" crossorigin="anonymous"></script>
<script src="{{ static('sstreasury/budget.js') }}"></script>
<script>
function leftpad(n) {
if (n < 10)
return '0' + n;
return '' + n;
}
$('#cal_date').calendar({
type: 'date',
formatter: {
date: function(date, settings) {
return date.getFullYear() + '-' + leftpad(date.getMonth() + 1) + '-' + leftpad(date.getDate());
}
}
});
$('#cal_event_dt').calendar({
type: 'datetime',
formatter: {
date: function(date, settings) {
return date.getFullYear() + '-' + leftpad(date.getMonth() + 1) + '-' + leftpad(date.getDate());
},
time: function(date, settings, forCalendar) {
return leftpad(date.getHours()) + ':' + leftpad(date.getMinutes());
}
}
});
$('#expense_no_emergency_fund').change(function() {
if ($('#expense_no_emergency_fund').prop('checked')) {
$('#expense_comments_accordion').accordion('open', 0);
$('#expense_comments_accordion .field').addClass('required');
} else {
$('#expense_comments_accordion .field').removeClass('required');
}
recalcExpTotal({'grid': $('#expense_grid').data('JSGrid')});
});
$('.ui.form').form({
on: 'blur',
keyboardShortcuts: false,
fields: {
name: 'empty',
contributors: 'empty'
},
onSuccess: function(event, fields) {
var revenue_data = [];
$('#revenue_grid .jsgrid-grid-body tr:not(.totalrow):not(.jsgrid-nodata-row)').each(function(i, el) {
var row = $(el).data('JSGridItem');
revenue_data.push({
'Description': row['Description'],
'Unit price': row['Unit price'],
'Units': row['Units'],
'IWT': row['IWT'],
});
});
$('#revenue_input').val(JSON.stringify(revenue_data));
var expense_data = [];
$('#expense_grid .jsgrid-grid-body tr:not(.totalrow):not(.jsgrid-nodata-row)').each(function(i, el) {
var row = $(el).data('JSGridItem');
expense_data.push({
'Description': row['Description'],
'Unit price': row['Unit price'],
'Units': row['Units'],
});
});
$('#expense_input').val(JSON.stringify(expense_data));
}
});
// Interferes with jsGrid
$('.ui.form').on('keyup keypress', ':input:not(textarea)', function(e) {
var keyCode = e.keyCode || e.which;
if (keyCode === 13) {
e.preventDefault();
return false;
}
});
var revenue_data = JSON.parse({{ import('json').dumps(import('json').dumps(revision.revenue))|safe }});
var expense_data = JSON.parse({{ import('json').dumps(import('json').dumps(revision.expense))|safe }});
var editing = true;
makeGrid();
dragula([document.querySelector('#revenue_grid tbody')], {
accepts: function (el, target, source, sibling) {
return sibling !== null && !sibling.classList.contains('totalrow');
},
invalid: function (el, handle) {
return el.classList.contains('totalrow');
}
});
dragula([document.querySelector('#expense_grid tbody')], {
accepts: function (el, target, source, sibling) {
return sibling !== null && !sibling.classList.contains('totalrow');
},
invalid: function (el, handle) {
return el.classList.contains('totalrow');
}
});
//$('.jsgrid-insert-mode-button').click();
</script>
{% endblock %}