This repository has been archived on 2023-02-21. You can view files and clone it, but cannot push or open issues or pull requests.
tipi-payment-plugin/tipi_payment_plugin/templates/tipi_payment_plugin/tipi.html

215 lines
6.9 KiB
HTML

{% load sekizai_tags %}
{% load i18n %}
{% addtoblock "js" %}
<script type="text/javascript">
var popup;
var timer;
var log = true;
// for logging purposes
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
function reinit() {
document.getElementById('refdet_error').style.display='none';
document.getElementById('montant_error').style.display='none';
document.getElementById('mel_error').style.display='none';
}
function checkLen(element,y)
{
if (y.length==element.maxLength)
{
var next=element.tabIndex;
if (next<document.forms["tipi"].length)
{
document.forms["tipi"].elements[next].focus();
}
}
}
function checkpopup() {
if(popup.closed) {
document.getElementById('wip').style.display='none';
document.forms['tipi'].reset();
clearInterval(timer);
}
}
function call_tipi() {
var params = {'refdet': function(id) {
var idpiece = document.getElementById('idpiece').value.trim();
var idligne = document.getElementById('idligne').value.trim();
var idpiece_padding = '';
var idligne_padding = '';
var exer = params.exer('exer');
if (!idpiece || isNaN(idpiece)) {
document.getElementById('refdet_error').style.display='inline';
return false;
}
if (!idligne || isNaN(idligne)) {
document.getElementById('refdet_error').style.display='inline';
return false;
}
for (var i=0;i<8-idpiece.length;i++)
idpiece_padding += '0';
idpiece = idpiece_padding + idpiece;
for (var i=0;i<6-idligne.length;i++)
idligne_padding += '0';
idligne = idligne_padding + idligne;
{% if instance.saisie == 'T' %}
return "999900000000999999";
{% else %}
return exer + idpiece + idligne;
{% endif %}
}, 'montant': function(id) {
var euros = document.getElementById(id + '_euros').value.trim();
var cents = document.getElementById(id + '_cents').value.trim();
if (euros && cents) {
if (isNaN(euros) && isNaN(cents)) {
document.getElementById(value + '_error').style.display='inline';
return false;
}
return parseInt(euros) * 100 + parseInt(cents);
}
document.getElementById(id + '_error').style.display='inline';
return false;
}, 'mel': function(id) {
var mel = document.getElementById(id).value.trim();
var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if(re.test(mel))
return mel;
document.getElementById(id + '_error').style.display='inline';
return false;
}, 'exer': function(id) {
var exer = document.getElementById(id).value.trim();
if (isNaN(exer)) {
document.getElementById('refdet_error').style.display='inline';
return false;
}
{% if instance.saisie == 'T' %}
return "9999";
{% else %}
return exer;
{% endif %}
}};
var tipi_url = '{{ instance.url }}?saisie={{ instance.saisie }}&numcli=' + document.getElementById('numcli').value;
var log_url = '/?saisie={{ instance.saisie }}&numcli=' + document.getElementById('numcli').value;
var url_params = '&';
reinit();
for (var field in params) {
var valid = params[field](field);
if(!valid) {
return false;
} else {
if (document.getElementById(field + '_error'))
document.getElementById(field + '_error').style.display='none';
url_params += field + '=' + valid + '&';
}
}
var url = tipi_url;
url = tipi_url + url_params;
log_url = log_url + url_params;
if (log) {
xmlhttp.open('GET', log_url, true);
xmlhttp.send();
}
popup = window.open(url, 'tipi', 'height=800, width=900, toolbar=no, menubar=no, scrollbars=no, resizable=yes, location=no, directories=no, status=no');
document.getElementById('wip').style.display='block';
timer = setInterval(checkpopup, 400);
return false;
}
</script>
{% endaddtoblock %}
{% addtoblock "css" %}
<style>
#tipi_block {
position: relative;
}
#tipi_block ul {
padding-left: 1em;
}
#tipi_block li {
list-style-type: none;
margin-bottom: .3em;
padding: .2em 0;
}
#tipi_block li label {
float: left;
width: 11.5em;
}
#tipi_block li label:after {
content: ':';
margin-left: .5em;
}
#tipi_block li input[type=text], #tipi_block li input[type=email] {
border: 1px solid #bbb;
}
#tipi_block .error {
color: #f00;
font-size:.8em;
display: none;
}
#tipi_block #wip {
position: absolute;
background: #fff;
opacity: .8;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
text-align: center;
}
</style>
{% endaddtoblock %}
<div id="tipi_block">
<div id="wip">
<h3>{% trans "Paiement en cours..." %}</h3>
</div>
<form name='tipi'>
<ul>
<li>
<label>{% trans "Identifiant collectivité" %}</label>
<select id="numcli">
<option value="005955">005955</option>
<option value="005956">005956</option>
<option value="005957">005957</option>
<option value="006483">006483</option>
<option value="006484">006484</option>
<option value="006485">006485</option>
</select>
</li>
<li>
<label>{% trans "Réference titre" %}</label>
<input type='text' id='exer' maxlength=4 size=4 tabindex="2" onkeyup="checkLen(this, this.value)" /> -
<input type='text' id='idpiece' maxlength=8 size=7 tabindex="3" onkeyup="checkLen(this, this.value)" /> -
<input type='text' id='idligne' maxlength=5 size=4 tabindex="4" onkeyup="checkLen(this, this.value)" />
<span class="error" id="refdet_error">{% trans "numéro invalide" %}</span>
</li>
<li>
<label>{% trans "Montant" %}</label>
<input type='text' id='montant_euros' size="4" maxlength="4" placeholder="0000" tabindex="5" onkeyup="checkLen(this, this.value)" /> ,
<input type='text' id='montant_cents' size="2" maxlength="2" placeholder="00" tabindex="6" onkeyup="checkLen(this, this.value)" value="00" />
<span class="error" id="montant_error">{% trans "montant invalide" %}</span>
</li>
<li>
<label>{% trans "Votre courriel" %}</label>
<input type='email' id='mel' {% if request.user.email %}value="{{ request.user.email }}" {% else %}placeholder="{% trans "nom@domaine.com" %}"{% endif %} />
<span class="error" id="mel_error">{% trans "courriel invalide" %}</span></li>
<li>
<input type='button' value='{% trans "Payer" %}' onclick='call_tipi()'/>
</li>
</ul>
</form>
</div>