Add new readonly templates and enhance existing ones for various input types

- Implemented new readonly templates for radio choices, checkboxes, captcha, and various input types (e.g., date, datetime, password, image).
- Added support for displaying structured data in readonly formats, including mapping and sequence items.
- Enhanced select and select2 templates to support optgroups and improved styling.
- Introduced JavaScript callbacks for dynamic behavior in readonly fields, such as formatting and AJAX loading for dependent fields.
- Updated rich text and textarea templates to ensure proper rendering of content.
- Improved overall structure and maintainability of widget templates.
1 parent 5a8e0c31
Showing 61 changed files with 2564 additions and 87 deletions
......@@ -76,7 +76,7 @@ class NamaSchema(colander.Schema):
colander.String(),
validator=partner_kode_validator,
oid="kode",
title="Kode",
title="NIK",
width="100pt")
nama = colander.SchemaNode(
colander.String(),
......
<!DOCTYPE html>
<html lang="en"
tal:define="
home request._host;">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="${home}/static/img/favicon.png">
<title tal:content="request.title"/>
<link rel="stylesheet" type="text/css"
href="${home}/static/v3/css/bootstrap.min.css">
</link>
<link rel="stylesheet" type="text/css"
href="${home}/static/bootstrap/css/font-awesome.min.css"/>
<link rel="stylesheet" type="text/css" href="${home}/deform_static/css/typeahead.css">
<link rel="stylesheet" type="text/css" href="${home}/static_map/lib/ol4/ol.css"/>
<link rel="stylesheet" type="text/css" href="${home}/static_map/lib/ol4/ext/ol3-layerswitcher.css"/>
<link rel="stylesheet" type="text/css" href="${home}/static_map/lib/ol4/ext/ol3gm.css"/>
<link rel="stylesheet" type="text/css" href="${home}/static_map/lib/ol4/ext/ol-geocoder.css"/>
<link rel="stylesheet" type="text/css" href="${home}/static/css/theme.css">
<link rel="stylesheet" type="text/css" href="${home}/static/css/navbar-fixed-top.css">
<link metal:define-slot="link"/>
<style>
html{ height:100%;}
.body { height:100%;}
body {
overflow: hidden;
padding-top: 40px;
}
</style>
</head>
<script>
var vhost='${request._host}';
var extent_params=${request.extent};
var bingKey = '${request.bing_key}';
var gmapKey = '${request.gmap_key}';
</script>
<body class="body">
<div class="container-fluid">
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div metal:define-slot="apps">
<a class="navbar-brand" href="${home}">${request.app_name}</a>
</div>
</div>
<div class="navbar-collapse collapse" tal:condition="not request.user">
<!-- Define Tombol Navigator -->
<div metal:define-slot="navs"></div>
<!-- End Tombol Navigator -->
<ul class="nav navbar-nav">
<li><a href="${home}" class="navbar-brand"><strong>${request.company}</strong></a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="${home}/login" class="button">Masuk</a>
</li>
</ul>
</div>
<div class="navbar-collapse collapse" tal:condition="request.user">
<!-- Define Tombol Navigator -->
<div metal:define-slot="navs"></div>
<!-- End Tombol Navigator -->
<ul class="nav navbar-nav navbar-right">
<!-- Admin Menu -->
<li class="dropdown" tal:condition="request.user.user_name=='admin'"
tal:attributes="class request.matched_route.name in ['user', 'user-add', 'user-edit', 'user-delete', 'group', 'group-add', 'group-edit', 'group-delete'] and 'active'">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Admin <b class="caret"></b></a>
<ul class="dropdown-menu">
<li tal:condition="has_permission(request, 'user')">
<a href="${home}/user">User</a></li>
<li tal:condition="has_permission(request, 'group')">
<a href="${home}/group">Group</a></li>
<li tal:condition="has_permission(request, 'user-group')">
<a href="${home}/user/group">User Group</a></li>
<li tal:condition="has_permission(request, 'routes')">
<a href="${home}/routes">Routes</a></li>
<li tal:condition="has_permission(request, 'group-routes')">
<a href="${home}/group/routes">Group Permission</a></li>
<li tal:condition="has_permission(request, 'upload-logo')">
<a href="${home}/upload/logo">Upload Logo</a></li>
<li tal:condition="has_permission(request, 'user-ws')">
<a href="${home}/user/ws">User Web Service</a></li>
</ul>
</li>
<!-- User Login Menu-->
<li class="dropdown" tal:attributes="class request.path in ['${home}/password'] and 'active'">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">My Account <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="${home}/logout">${request.user.nice_username()} Logout</a></li>
<li><a href="${home}/password">Ubah password</a></li>
<li tal:condition="'core' in request.modules">
<a href="${home}/departemen/chg">Ubah Organisasi</a></li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
<div tal:condition="request.session.peek_flash()">
<div class="alert alert-success" tal:repeat="message request.session.pop_flash()">
<i class="fa fa-fw fa-lg fa-check-circle"></i>&nbsp;${message}
</div>
</div>
<div tal:condition="request.session.peek_flash('error')">
<div class="alert alert-danger" tal:repeat="message request.session.pop_flash('error')">
<i class="fa fa-fw fa-lg fa-times-circle"></i>&nbsp;${message}
</div>
</div>
</div>
<p>&nbsp;</p>
<div class="container-fluid">
<div metal:define-slot="contents"></div>
<div class="navbar-fixed-bottom" style="background-color:#CC0000; color:#FFFFFF">
<div id="foot-left" class="" style="float:left;">@openSIPKD 2018</div>
<div id="foot-right" class="" style="float:right;"></div>
</div>
</div>
<script type="text/javascript"
src="${home}/static/v3/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript"
src="${home}/static/v3/js/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript"
src="${home}/deform_static/scripts/typeahead.min.js"></script>
<script src="${home}/static_map/lib/ol4/ol.js" type="text/javascript"></script>
<!-- <script src="${home}static_map/lib/ol4/ol-debug.js" type="text/javascript"></script> -->
<script type="text/javascript" src="${home}/static_map/lib/ol4/ext/ol3-layerswitcher.js"></script>
<script type="text/javascript" src="${home}/static_map/lib/ol4/ext/ol-geocoder.js"></script>
<script type="text/javascript">
if (ol.Map.prototype.getLayer === undefined) {
ol.Map.prototype.getLayer = function (id) {
var layer;
this.getLayers().forEach(function (lyr) {
if (id == lyr.get('id')) {
layer = lyr;
}
});
return layer;
}
}
</script>
<div metal:define-slot="scripts"></div>
</body>
</html>
<span tal:define="name name|field.name;
css_class css_class|field.widget.css_class;
oid oid|field.oid;
style style|field.widget.style;
js js|field.widget.js|{}" tal:omit-tag="">
<input type="text" name="${name}" value="${cstruct}" data-provide="typeahead" tal:attributes="class string: form-control ${css_class or ''};
style style;
attributes|field.widget.attributes|{};" id="${oid}" />
<script tal:condition="field.widget.values" type="text/javascript">
deform.addCallback(
'${field.oid}',
function (oid) {
$('#' + oid).typeahead(${ options });
${ structure: js };
}
);
</script>
</span>
\ No newline at end of file
<span tal:define="name name|field.name;
css_class css_class|field.widget.css_class;
oid oid|field.oid;
style style|field.widget.style;
autofocus autofocus|field.autofocus;
slave slave|field.widget.slave;
url url|field.widget.url;
" tal:omit-tag="">
${field.start_mapping()}
<input type="hidden" name="auto_id" id="${oid}-auto_id" value="${auto_id}" />
<input type="text" name="auto_value" value="${auto_value}" data-provide="typeahead" tal:attributes="class string: form-control ${css_class or ''};
style style;
autofocus autofocus;
attributes|field.widget.attributes|{};" id="${oid}-auto_value" />
${field.end_mapping()}
<script tal:condition="field.widget.values" type="text/javascript">
deform.addCallback(
'${oid}',
function (oid) {
$('#' + oid + '-auto_value').typeahead(${ structure: options });
if ("${autofocus}" == "autofocus") {
$('#' + oid + '-auto_value').focus();
}
$('#' + oid + '-auto_value').bind('typeahead:selected', function (obj, datum, name) {
$('#' + oid + '-auto_id').val(datum.id);
var not_check = ["id", "value"];
$.each(datum, function (key, val) {
if (!not_check.includes(key)) {
var eleName = $('#' + key).prop('nodeName');
if (eleName !== undefined) {
eleName = eleName.toLowerCase();
if (eleName === "select")
$("#" + key).val(val).trigger("change");
else if (eleName === "input")
$("#" + key).val(val);
else
$("#" + key).text(val);
} else {
//Check apakah jika radio button
eleName = $("input[name ='" + key + "']").prop('type');
if (eleName == "radio") {
$("input[name ='" + key + "'][value='" + val + "']").prop('checked', true);
}
}
}
});
$('#' + oid + '-auto_id').change();
});
$('#' + oid + '-auto_value').on('input',
function (e) {
let val = $('#' + oid + '-auto_value').val();
if (val === null || val === "") {
$('#' + oid + '-auto_id').val("");
}
});
});
</script>
<script type="text/javascript" tal:condition="url and slave">
deform.addCallback(
'${oid}',
function (oid) {
$('#' + oid + "-auto_id").change(function () {
$("#${slave}").val("");
$("#${slave}").empty();
$("#${slave}").append('<option value="" selected disabled>Pilih Data...</option>');
let value = $(this).val();
if (value) {
$.ajax({
type: "GET",
url: "${url}" + value,
success: function (res) {
if (res) {
var def_value = null;
if (res.hasOwnProperty("default")) {
values = res.values;
def_value = res.default;
}
else
values = res;
$.each(values, function (key, value) {
if (key === def_value)
$("#${slave}").append('<option value="' + key + '" selected>' + value + '</option>');
else
$("#${slave}").append('<option value="' + key + '">' + value + '</option>');
});
} else {
$("#${slave}").empty();
}
}
});
}
$("#${slave}").change();
});
});
</script>
</span>
\ No newline at end of file
<div i18n:domain="deform"
tal:omit-tag=""
tal:define="oid oid|field.oid;
name name|field.name;
css_class css_class|field.widget.css_class;
style style|field.widget.style;">
${field.start_mapping()}
<div class="row">
<div class="col-xs-4">
<div class="input-group">
<span class="input-group-addon" i18n:translate="">Blok/Kav/No</span>
<input type="text" name="blok_kav_no" value="${blok_kav_no}"
class="span2 form-control ${css_class or ''}"
tal:attributes="style style;
blok_kav_no_attributes|field.widget.blok_kav_no_attributes|{};"
maxlength="15" minlength="1" placeholder="Blok Kav No"
id="${oid}"/>
</div>
</div>
<div class="col-xs-2">
<div class="input-group">
<span class="input-group-addon" i18n:translate="">RT</span>
<input type="text" name="rt" value="${rt}"
class="span2 form-control ${css_class or ''}"
tal:attributes="style style;
rt_attributes|field.widget.rt_attributes|{};"
maxlength="3" minlength="3" placeholder="RT"
id="${oid}-rt/>">
</div>
<script type="text/javascript">
deform.addCallback(
'${oid}-rt',
function (oid) {
$("#" + oid).mask("999",
{placeholder:"_"});
});
</script>
</div>
<div class="col-xs-2">
<div class="input-group">
<span class="input-group-addon" i18n:translate="">RW</span>
<input type="text" name="rw" value="${rw}"
class="span2 form-control ${css_class or ''}"
tal:attributes="style style;
rw_attributes|field.widget.rw_attributes|{};"
maxlength="2" minlength="2" placeholder="RW"
id="${oid}-rw/>">
</div>
<script type="text/javascript">
deform.addCallback(
'${oid}-rw',
function (oid) {
$("#" + oid).mask("99",
{placeholder:"_"});
});
</script>
</div>
</div>
${field.end_mapping()}
</div>
<div i18n:domain="deform"
tal:omit-tag=""
tal:define="oid oid|field.oid;
name name|field.name;
css_class css_class|field.widget.css_class;
style style|field.widget.style;">
${field.start_mapping()}
<div class="row">
<div class="col-xs-4">
<div class="input-group">
<span class="input-group-addon">
<input type="text" name="year" value="${year}"
class="span2 form-control ${css_class or ''}"
tal:attributes="style style;
year_attributes|field.widget.year_attributes|{};"
maxlength="4" minlength="4" placeholder="Tahun"
id="${oid}"/>
</span>
<span class="input-group-addon">
<input type="text" name="bundle" value="${bundle}"
class="span2 form-control ${css_class or ''}"
tal:attributes="style style;
bundle_attributes|field.widget.bundle_attributes|{};"
maxlength="4" minlength="4" placeholder="Bundle"
id="${oid}-bundle"/>
</span>
<span class="input-group-addon">
<input type="text" name="seq" value="${seq}"
class="span2 form-control ${css_class or ''}"
tal:attributes="style style;
seq_attributes|field.widget.seq_attributes|{};"
maxlength="3" minlength="3" placeholder="Urut"
id="${oid}-seq"/>
</span>
</div>
</div>
</div>
<script>
deform.addCallback(
'${oid}',
function (oid) {
$("#" + oid).mask("9999",
{placeholder:"_"});
});
deform.addCallback(
'${oid}_bundle',
function (oid_bundle) {
$("#" + oid_bundle).mask("9999",
{placeholder:"_"});
});
deform.addCallback(
'${oid}_seq',
function (oid_seq) {
$("#" + oid_seq).mask("999",
{placeholder:"_"});
});
</script>
${field.end_mapping()}
</div>
<div i18n:domain="deform"
tal:omit-tag=""
tal:define="oid oid|field.oid;
name name|field.name;
css_class css_class|field.widget.css_class;
style style|field.widget.style;">
${field.start_mapping()}
<div class="row">
<div class="col-xs-4">
<div class="input-group">
<span class="input-group-addon" i18n:translate="">Blok/Kav/No</span>
<input type="text" name="blok_kav_no" value="${blok_kav_no}"
class="span2 form-control ${css_class or ''}"
tal:attributes="style style;
blok_kav_no_attributes|field.widget.blok_kav_no_attributes|{};"
maxlength="15" minlength="1" placeholder="Blok Kav No"
id="${oid}"/>
</div>
</div>
<div class="col-xs-2">
<div class="input-group">
<span class="input-group-addon" i18n:translate="">RT</span>
<input type="text" name="rt" value="${rt}"
class="span2 form-control ${css_class or ''}"
tal:attributes="style style;
rt_attributes|field.widget.rt_attributes|{};"
maxlength="3" minlength="3" placeholder="RT"
id="${oid}-rt/>">
</div>
<script type="text/javascript">
deform.addCallback(
'${oid}-rt',
function (oid) {
$("#" + oid).mask("999",
{placeholder:"_"});
});
</script>
</div>
<div class="col-xs-2">
<div class="input-group">
<span class="input-group-addon" i18n:translate="">RW</span>
<input type="text" name="rw" value="${rw}"
class="span2 form-control ${css_class or ''}"
tal:attributes="style style;
rw_attributes|field.widget.rw_attributes|{};"
maxlength="2" minlength="2" placeholder="RW"
id="${oid}-rw/>">
</div>
<script type="text/javascript">
deform.addCallback(
'${oid}-rw',
function (oid) {
$("#" + oid).mask("99",
{placeholder:"_"});
});
</script>
</div>
</div>
${field.end_mapping()}
</div>
<div i18n:domain="deform"
tal:omit-tag=""
tal:define="oid oid|field.oid;
name name|field.name;
css_class css_class|field.widget.css_class;
style style|field.widget.style;">
${field.start_mapping()}
<div class="row">
<div class="col-xs-4">
<div class="input-group">
<span class="input-group-addon">
<input type="text" name="blok_kav_no" value="${blok_kav_no}"
class="span2 form-control ${css_class or ''}"
tal:attributes="style style;
blok_kav_no_attributes|field.widget.blok_kav_no_attributes|{};"
maxlength="15" minlength="" placeholder="Blok Kav No"
id="${oid}"/>
</span>
<span class="input-group-addon">
<input type="text" name="rt" value="${rt}"
class="span2 form-control ${css_class or ''}"
tal:attributes="style style;
rt_attributes|field.widget.rt_attributes|{};"
maxlength="3" minlength="3" placeholder="RT"
id="${oid}-rt"/>
</span>
<span class="input-group-addon">
<input type="text" name="rw" value="${rw}"
class="span2 form-control ${css_class or ''}"
tal:attributes="style style;
rw_attributes|field.widget.rw_attributes|{};"
maxlength="2" minlength="2" placeholder="RW"
id="${oid}-rw"/>
</span>
</div>
</div>
</div>
${field.end_mapping()}
</div>
<div tal:define="css_class css_class|field.widget.css_class;
style style|field.widget.style;
oid oid|field.oid;
inline getattr(field.widget, 'inline', False)"
tal:omit-tag="not inline">
${field.start_sequence()}
<div tal:repeat="choice values | field.widget.values"
tal:omit-tag="inline"
class="checkbox">
<label for="${oid}-${repeat.choice.index}"
tal:define="(value, title) choice"
tal:attributes="class inline and 'checkbox-inline'">
<input tal:attributes="checked value in cstruct;
class css_class;
style style;
attributes|field.widget.attributes|{};"
type="checkbox"
name="checkbox"
value="${value}"
id="${oid}-${repeat.choice.index}"/>
${title}
</label>
</div>
${field.end_sequence()}
</div>
<div tal:define="oid oid|field.oid;
name name|field.name;
css_class css_class|field.widget.css_class;
style style|field.widget.style;
mask mask|field.widget.mask;
mask_placeholder mask_placeholder|field.widget.mask_placeholder;"
i18n:domain="deform"
tal:omit-tag="">
${field.start_mapping()}
<div>
<input type="text" name="${name}" value="${cstruct}"
tal:attributes="style style;
class string: form-control ${css_class or ''};
placeholder subject;
attributes|field.widget.attributes|{};"
id="${oid}"/>
</div>
<div>
<input type="text" name="${name}-confirm" value="${confirm}"
tal:attributes="class string: form-control ${css_class or ''};
style style;
placeholder confirm_subject;
confirm_attributes|field.widget.confirm_attributes|{};"
id="${oid}-confirm"/>
</div>
<script tal:condition="field.widget.mask" type="text/javascript">
deform.addCallback(
'${oid}',
function (oid) {
$("#" + oid).mask("${mask}",
{placeholder:"${mask_placeholder}"});
$("#" + oid + "-confirm").mask("${mask}",
{placeholder:"${mask_placeholder}"});
}
);
</script>
${field.end_mapping()}
</div>
<div i18n:domain="deform" tal:omit-tag=""
tal:define="oid oid|field.oid;
name name|field.name;
css_class css_class|field.widget.css_class;
style style|field.widget.style">
${field.start_mapping()}
<div class="input">
<input type="password"
name="${name}"
onkeyup="checkPasswordStrength();"
value="${field.widget.redisplay and cstruct or ''}"
tal:attributes="class string: form-control ${css_class or ''};
style style;
attributes|field.widget.attributes|{};"
id="${oid}"
i18n:attributes="placeholder"
placeholder="Password"/>
<div class="checkbox">
<label>
<input type="checkbox" id="view${field.oid}">
<span>Show Password</span>
</label>
</div>
</div>
<div class="input">
<input type="password"
name="${name}-confirm"
onkeyup="checkPasswordStrength${oid}();"
value="${field.widget.redisplay and confirm or ''}"
tal:attributes="class string: form-control ${css_class or ''};
style style;
confirm_attributes|field.widget.confirm_attributes|{};"
id="${oid}-confirm"
i18n:attributes="placeholder"
placeholder="Confirm Password"/>
<div class="checkbox">
<label>
<input type="checkbox" id="view${field.oid}-confirm">
<span>Show Password</span>
</label>
</div>
<div id="${oid}-confirm-password-strength-status"></div>
</div>
${field.end_mapping()}
<style>
#password-strength-status {
padding: 5px 10px;
border-radius: 4px;
margin-top: 5px;
}
</style>
<script type="text/javascript">
$('#view${oid}').change(function(){
if ($(this).prop('checked')==true){
$('#${oid}').attr('type','text');
}
else {
$('#${oid}').attr('type','password');
}
});
$('#view${oid}-confirm').change(function(){
if ($(this).prop('checked')==true){
$('#${oid}-confirm').attr('type','text');
}
else {
$('#${oid}-confirm').attr('type','password');
}
});
function checkPasswordStrength${oid}() {
var number = /([0-9])/;
var alphabets = /([a-zA-Z])/;
var special_characters = /([~,!,@,#,$,%,^,&,*,-,_,+,=,?,>,<,\),\(,{,},\[,\]])/;
var passworda = $('#${oid}').val().trim();
var password = $('#${oid}-confirm').val().trim();
if (password.length <= 8) {
$('#${oid}-confirm-password-strength-status').removeClass();
$('#${oid}-confirm-password-strength-status').addClass('label label-danger');
$('#${oid}-confirm-password-strength-status').html("Weak (should be atleast 8 characters.)");
} else {
if (passworda != password){
$('#${oid}-confirm-password-strength-status').removeClass();
$('#${oid}-confirm-password-strength-status').addClass('label label-danger');
$('#${oid}-confirm-password-strength-status').html("Password do not match.");
}
else if (password.match(number) && password.match(alphabets) && password.match(special_characters)) {
$('#${oid}-confirm-password-strength-status').removeClass();
$('#${oid}-confirm-password-strength-status').addClass('label label-success');
$('#${oid}-confirm-password-strength-status').html("Strong");
}
else {
$('#${oid}-confirm-password-strength-status').removeClass();
$('#${oid}-confirm-password-strength-status').addClass('label label-warning');
$('#${oid}-confirm-password-strength-status').html("Medium (should include alphabets, numbers and special characters.)");
}
}
}
</script>
</div>
<div tal:define="css_class css_class|field.widget.css_class;
oid oid|field.oid;
style style|field.widget.style;
type_name type_name|field.widget.type_name;"
tal:omit-tag="">
${field.start_mapping()}
<input type="${type_name}"
name="date"
value="${cstruct}"
tal:attributes="class string: ${css_class or ''} form-control hasDatepicker;
style style;
attributes|field.widget.attributes|{};"
id="${oid}"/>
${field.end_mapping()}
<script type="text/javascript">
deform.addCallback(
'${oid}',
function deform_cb(oid) {
if (!Modernizr.inputtypes['date'] ||"${type_name}" != "date" || window.forceDateTimePolyfill){
console.log(${options_json});
$('#' + oid).pickadate(${options_json});
}
}
);
</script>
</div>
<div tal:define="css_class css_class|field.widget.css_class;
oid oid|field.oid;
style style|field.widget.style;
type_name type_name|field.widget.type_name;"
tal:omit-tag="">
${field.start_mapping()}
<input type="text"
name="date"
value="${cstruct}"
tal:attributes="class string: ${css_class or ''} form-control hasDatepicker;
style style;
attributes|field.widget.attributes|{};"
id="${oid}"/>
${field.end_mapping()}
<script type="text/javascript">
deform.addCallback(
'${oid}',
function deform_cb(oid) {
if (!Modernizr.inputtypes['date'] ||"${type_name}" != "date" || window.forceDateTimePolyfill){
$('#' + oid).pickadate(${options_json});
}
}
);
</script>
</div>
<div i18n:domain="deform"
tal:omit-tag=""
tal:define="oid oid|field.oid;
name name|field.name;
css_class css_class|field.widget.css_class;
style style|field.widget.style;">
${field.start_mapping()}
<div class="row">
<div class="col-xs-4"><div class="input-group">
<span class="input-group-addon" i18n:translate="">Year</span>
<input type="text" name="year" value="${year}"
class="span2 form-control ${css_class or ''}"
tal:attributes="style style;
year_attributes|field.widget.year_attributes|{};"
maxlength="4"
id="${oid}"/>
</div></div>
<div class="col-xs-4"><div class="input-group">
<span class="input-group-addon" i18n:translate="">Month</span>
<input type="text" name="month" value="${month}"
class="span2 form-control ${css_class or ''}"
tal:attributes="style style;
month_attributes|field.widget.month_attributes|{};"
maxlength="2"
id="${oid}-month"/>
</div></div>
<div class="col-xs-4"><div class="input-group">
<span class="input-group-addon" i18n:translate="">Day</span>
<input type="text" name="day" value="${day}"
class="span2 form-control ${css_class or ''}"
tal:attributes="style style;
day_attributes|field.widget.day_attributes|{};"
maxlength="2"
id="${oid}-day"/>
</div></div>
</div>
${field.end_mapping()}
</div>
<div i18n:domain="deform"
tal:omit-tag=""
tal:define="oid oid|field.oid;
css_class css_class|field.widget.css_class;
style style|field.widget.style;">
${field.start_mapping()}
<div class="row">
<div class="col-xs-6"><div class="input-group">
<span class="input-group-addon" i18n:translate="">Date</span>
<input type="text" name="date" value="${date}"
class="span2 form-control ${css_class or ''} hasDatepicker"
tal:attributes="style style;
date_attributes|field.widget.date_attributes|{}"
id="${oid}-date"/>
</div></div>
<div class="col-xs-6"><div class="input-group">
<span class="input-group-addon" i18n:translate="">Time</span>
<input type="text" name="time" value="${time}"
class="span2 form-control ${css_class or ''} hasDatepicker"
tal:attributes="style style;
time_attributes|field.widget.time_attributes|{}"
id="${oid}-time"/>
</div></div>
</div>
${field.end_mapping()}
<script type="text/javascript">
deform.addCallback(
'${oid}',
function(oid) {
$('#' + oid + '-date').pickadate(${date_options_json});
$('#' + oid + '-time').pickatime(${time_options_json});
}
);
</script>
</div>
<div i18n:domain="deform"
tal:omit-tag=""
tal:define="oid oid|field.oid;
name name|field.name;
css_class css_class|field.widget.css_class;
style style|field.widget.style;">
${field.start_mapping()}
<div class="row">
<div class="col-xs-4">
<div class="input-group">
<span class="input-group-addon">
<input type="text" name="jenis" value="${jenis}"
class="span2 form-control readonly ${css_class or ''}"
tal:attributes="style style;
year_attributes|field.widget.year_attributes|{};"
maxlength="1" minlength="1" placeholder="Jenis"
id="${oid}"/>
</span>
<span class="input-group-addon">
<input type="text" name="year" value="${year}"
class="span2 form-control ${css_class or ''}"
tal:attributes="style style;
year_attributes|field.widget.year_attributes|{};"
maxlength="4" minlength="4" placeholder="Tahun"
id="${oid}"/>
</span>
<span class="input-group-addon">
<input type="text" name="bundle" value="${bundle}"
class="span2 form-control ${css_class or ''}"
tal:attributes="style style;
bundle_attributes|field.widget.bundle_attributes|{};"
maxlength="4" minlength="4" placeholder="Bundle"
id="${oid}-bundle"/>
</span>
<span class="input-group-addon">
<input type="text" name="seq" value="${seq}"
class="span2 form-control ${css_class or ''}"
tal:attributes="style style;
seq_attributes|field.widget.seq_attributes|{};"
maxlength="3" minlength="3" placeholder="Urut"
id="${oid}-seq"/>
</span>
</div>
</div>
</div>
${field.end_mapping()}
</div>
<html metal:use-macro="load: base.pt">
<div metal:fill-slot="content">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">${request.title}</h3>
</div>
<div class="panel-body">
</div> <!--panel-body-->
</div>
</div>
<div metal:fill-slot="scripts">
<script>
$(document).ready(function () {
$('#btn-batal').click(function(){
window.close();
});
});
</script>
</div>
</html>
\ No newline at end of file
<div i18n:domain="deform"
tal:omit-tag=""
tal:define="oid oid|field.oid;
name name|field.name;
oid oid|field.oid;
style style|field.widget.style;
size size|field.widget.size;
css_class css_class|field.widget.css_class;
unicode unicode|str;
optgroup_class optgroup_class|field.widget.optgroup_class;
multiple multiple|field.widget.multiple;"
tal:omit-tag="">
${field.start_mapping()}
<div class="row">
<div class="col-xs-6">
<div class="input-group">
<span class="input-group-addon" i18n:translate="">Filter</span>
<select
id="${oid}-fields" name='fields'
tal:attributes="
class string: ${css_class or ''};
multiple multiple;
size size;
style style;
attributes|field.widget.attributes|{};">
<tal:loop tal:repeat="item values">
<optgroup tal:condition="isinstance(item, optgroup_class)"
tal:attributes="label item.label">
<option tal:repeat="(value, description) item.options"
tal:attributes="
selected python:field.widget.get_select_value(fields, value);
class css_class;
label field.widget.long_label_generator and description;
value value"
tal:content="field.widget.long_label_generator and field.widget.long_label_generator(item.label, description) or description"/>
</optgroup>
<option tal:condition="not isinstance(item, optgroup_class)"
tal:attributes="
selected python:field.widget.get_select_value(fields, item[0]);
class css_class;
value item[0]">${item[1]}</option>
</tal:loop>
</select>
<select name="equality" id="${oid}-equality">
<option value="eq">=</option>
<option value="gt" tal:attributes="
selected equality=='gt'">&gt;
</option>
<option value="lt" tal:attributes="
selected equality=='lt'">&lt;
</option>
<option value="gteq" tal:attributes="
selected equality=='gteq'">&gt;=
</option>
<option value="lteq" tal:attributes="
selected equality=='lteq'">&lt;=
</option>
</select>
<input type="text" name="nilai" value="${nilai}"
id="${oid}-value"/>
<select name="condition" id="${oid}-condition">
<option value="AND" tal:attributes="
selected condition=='AND'">AND
</option>
<option value="OR" tal:attributes="
selected condition=='OR'">OR
</option>
</select>
</div>
</div>
</div>
${field.end_mapping()}
</div>
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.0.0/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/8.0.0/firebase-analytics.js"></script>
<script>
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
apiKey: "AIzaSyDzRh2fZIuHCOd55-9qAlGm6894DLoEp8Q",
authDomain: "farm-agratek-id.firebaseapp.com",
databaseURL: "https://farm-agratek-id.firebaseio.com",
projectId: "farm-agratek-id",
storageBucket: "farm-agratek-id.appspot.com",
messagingSenderId: "652472681474",
appId: "1:652472681474:web:aadbeead2304265ad6131b",
measurementId: "G-WQ7STSPL2M"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
</body>
</html>
\ No newline at end of file
<!-- <div>
<p class="form-control-static" id="${oid|field.oid}">${year}.${bundle}.${seq}</p>
</div> -->
<div i18n:domain="deform"
tal:omit-tag=""
tal:define="oid oid|field.oid;
name name|field.name;
css_class css_class|field.widget.css_class;
mask_placeholder '_';
style style|field.widget.style;">
${field.start_mapping()}
<div class="row">
<div class="col-xs-4">
<div class="input-group">
<span class="input-group-addon">
<input type="text" name="year" value="${year}"
class="span2 form-control ${css_class or ''}"
tal:attributes="style style;
year_attributes|field.widget.year_attributes|{};"
maxlength="4" minlength="4" placeholder="Tahun"
id="tahun-formulir"/>
</span>
<span class="input-group-addon">
<input type="text" name="bundle" value="${bundle}"
class="span2 form-control ${css_class or ''}"
tal:attributes="style style;
bundle_attributes|field.widget.bundle_attributes|{};"
maxlength="4" minlength="4" placeholder="Bundle"
id="bundle-formulir"/>
</span>
<span class="input-group-addon">
<input type="text" name="seq" value="${seq}"
class="span2 form-control ${css_class or ''}"
tal:attributes="style style;
seq_attributes|field.widget.seq_attributes|{};"
maxlength="3" minlength="3" placeholder="Urut"
id="urut-formulir"/>
</span>
</div>
</div>
</div>
<script type="text/javascript">
deform.addCallback(
'year',
function (oid) {
$("#tahun-formulir").mask("9999",
{placeholder:"${mask_placeholder}"});
});
deform.addCallback(
'bundle',
function (oid) {
$("#bundle-formulir").mask("9999",
{placeholder:"${mask_placeholder}"});
});
deform.addCallback(
'seq',
function (oid) {
$("#urut-formulir").mask("999",
{placeholder:"${mask_placeholder}"});
});
</script>
${field.end_mapping()}
</div>
<span tal:define="name name|field.name;
css_class css_class|field.widget.css_class;
oid oid|field.oid;
style style|field.widget.style;
map_zoom map_zoom|field.widget.map_zoom;
map_center map_center|field.widget.map_center;
gmap_key gmap_key|field.widget.gmap_key;
gmap_height gmap_height|field.widget.gmap_height;
gmap_width gmap_width|field.widget.gmap_width;
gmap_control gmap_control|field.widget.gmap_control;
html_info html_info|field.widget.html_info;
gmap_data_style gmap_data_style|field.widget.gmap_data_style;
gmap_edit_url gmap_edit_url|field.widget.gmap_edit_url;
show_options show_options|field.widget.show_options;
"
tal:omit-tag="">
<textarea id="${oid}" name="${name}" readonly
tal:attributes="class string: form-control ${css_class or ''};
style style;
attributes|field.widget.attributes|{};">${cstruct}</textarea>
<div class="row" tal:condition="show_options">
<div class="input-group">
<label class="control-label">Fill Color</label>
<input type="color" id="fillColor">
<label class="control-label">Opacity</label>
<select id="fillOpacity">
<option value="0.0">0.0</option>
<option value="0.1">0.1</option>
<option value="0.2">0.2</option>
<option value="0.3">0.3</option>
<option value="0.4">0.4</option>
<option value="0.5">0.5</option>
<option value="0.6">0.6</option>
<option value="0.7">0.7</option>
<option value="0.8">0.8</option>
<option value="0.9">0.9</option>
<option value="1.0">1.0</option>
</select>
<label class="control-label">Stroke Color</label>
<input type="color" id="strokeColor">
<label class="control-label">Opacity</label>
<select id="strokeOpacity">
<option value="0.0">0.0</option>
<option value="0.1">0.1</option>
<option value="0.2">0.2</option>
<option value="0.3">0.3</option>
<option value="0.4">0.4</option>
<option value="0.5">0.5</option>
<option value="0.6">0.6</option>
<option value="0.7">0.7</option>
<option value="0.8">0.8</option>
<option value="0.9">0.9</option>
<option value="1.0">1.0</option>
</select>
<label class="control-label">Weight</label>
<select id="strokeWeight">
<option value="1.0">1.0</option>
<option value="2.0">2.0</option>
<option value="3.0">3.0</option>
<option value="4.0">4.0</option>
<option value="5.0">5.0</option>
<option value="6.0">6.0</option>
<option value="7.0">7.0</option>
<option value="8.0">8.0</option>
<option value="9.0">9.0</option>
</select>
</div>
</div>
<div id="gmap" class="gmap"></div>
<style>
.gmap {
height: ${gmap_height};
width: ${gmap_width};
}
</style>
<script type="text/javascript">
let map_zoom = ${map_zoom};
let map_center = ${map_center};
let geom = document.getElementById('${oid}');
let contents = ${html_info};
let edit_url = "${gmap_edit_url}";
let gmapDataStyle = ${structure: gmap_data_style};
let gmapControls = ${gmap_control};
//styleControls = document.getElementById("${oid}-options");
//styleControls.value = JSON.stringify(featureStyleOptions);
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?v=3&key=${gmap_key}&libraries=drawing&callback=initMap">
</script>
</span>
<input type="hidden" name="${name|field.name}" value="${cstruct}"
id="${oid|field.oid}"/>
<span tal:define="name name|field.name;
css_class css_class|field.widget.css_class;
oid oid|field.oid;
style style|field.widget.style;
height height|field.widget.height;
width 'auto'|field.widget.width;
" tal:omit-tag="">
<img id="${oid}" style="height:${height}; width:auto; margin-bottom:5px;" src="${cstruct}">
<!--? <p><a href="${cstruct}">Download</a></p>-->
</span>
<span tal:define="name name|field.name;
css_class css_class|field.widget.css_class;
oid oid|field.oid;
style style|field.widget.style;
map_zoom map_zoom|field.widget.map_zoom;
map_center map_center|field.widget.map_center;
map_width map_width|field.widget.map_width;
map_height map_height|field.widget.map_height;
show_options show_options|field.widget.show_options;
"
tal:omit-tag="">
<!--? gmap_key gmap_key|field.widget.gmap_key;-->
<!--? gmap_control gmap_control|field.widget.gmap_control;-->
<!--? html_info html_info|field.widget.html_info;-->
<!--? gmap_data_style gmap_data_style|field.widget.gmap_data_style;-->
<!--? gmap_edit_url gmap_edit_url|field.widget.gmap_edit_url;-->
<textarea id="${oid}" name="${name}" readonly
tal:attributes="class string: form-control ${css_class or ''};
style style;
attributes|field.widget.attributes|{};">${cstruct}</textarea>
<div class="row" tal:condition="show_options">
<div class="input-group">
<label class="control-label">Fill Color</label>
<input type="color" id="fillColor">
<label class="control-label">Opacity</label>
<select id="fillOpacity">
<option value="0.0">0.0</option>
<option value="0.1">0.1</option>
<option value="0.2">0.2</option>
<option value="0.3">0.3</option>
<option value="0.4">0.4</option>
<option value="0.5">0.5</option>
<option value="0.6">0.6</option>
<option value="0.7">0.7</option>
<option value="0.8">0.8</option>
<option value="0.9">0.9</option>
<option value="1.0">1.0</option>
</select>
<label class="control-label">Stroke Color</label>
<input type="color" id="strokeColor">
<label class="control-label">Opacity</label>
<select id="strokeOpacity">
<option value="0.0">0.0</option>
<option value="0.1">0.1</option>
<option value="0.2">0.2</option>
<option value="0.3">0.3</option>
<option value="0.4">0.4</option>
<option value="0.5">0.5</option>
<option value="0.6">0.6</option>
<option value="0.7">0.7</option>
<option value="0.8">0.8</option>
<option value="0.9">0.9</option>
<option value="1.0">1.0</option>
</select>
<label class="control-label">Weight</label>
<select id="strokeWeight">
<option value="1.0">1.0</option>
<option value="2.0">2.0</option>
<option value="3.0">3.0</option>
<option value="4.0">4.0</option>
<option value="5.0">5.0</option>
<option value="6.0">6.0</option>
<option value="7.0">7.0</option>
<option value="8.0">8.0</option>
<option value="9.0">9.0</option>
</select>
</div>
</div>
<div id="map" class="lmap"></div>
<style>
.lmap {
height: ${map_height};
width: ${map_width};
}
</style>
<script type="text/javascript">
let map_zoom = ${map_zoom};
let map_center = ${map_center};
let geom = document.getElementById('${oid}');
//let contents = {html_info};
//let edit_url = "{gmap_edit_url}";
//let gmapDataStyle = {structure: gmap_data_style};
//let gmapControls = {gmap_control};
//styleControls = document.getElementById("${oid}-options");
//styleControls.value = JSON.stringify(featureStyleOptions);
// let map = L.map('map').setView(map_center, map_zoom);
L.CursorHandler = L.Handler.extend({
addHooks: function () {
this._popup = new L.Popup();
this._map.on('mouseover', this._open, this);
this._map.on('mousemove', this._update, this);
this._map.on('mouseout', this._close, this);
},
removeHooks: function () {
this._map.off('mouseover', this._open, this);
this._map.off('mousemove', this._update, this);
this._map.off('mouseout', this._close, this);
},
_open: function (e) {
this._update(e);
this._popup.openOn(this._map);
},
_close: function () {
this._map.closePopup(this._popup);
},
_update: function (e) {
this._popup.setLatLng(e.latlng)
.setContent(e.latlng.toString());
}
});
L.Map.addInitHook('addHandler', 'cursor', L.CursorHandler);
// let map = L.map('map', {
// center: map_center, //[map_center[1], map_center[0]],
// zoom: map_zoom,
// drawControl: true,
// crs: L.CRS.EPSG3857,
// cursor: false,
// layers: [new L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
// maxZoom: 19,
// attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
// crs: L.CRS.EPSG3857,
// })]
// });
let osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib}),
map = new L.Map('map', {center: map_center, zoom: map_zoom}),
drawnItems = L.featureGroup().addTo(map);
L.control.layers(
{
'osm': osm.addTo(map),
"google": L.tileLayer('http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}', {
attribution: 'google'
})
},
{'drawlayer': drawnItems},
{position: 'topleft', collapsed: false}).addTo(map);
map.addControl(new L.Control.Draw({
edit: {
featureGroup: drawnItems,
poly: {
allowIntersection: false
}
},
draw: {
polygon: {
allowIntersection: false,
showArea: true
}
}
}));
map.on(L.Draw.Event.CREATED, function (event) {
var layer = event.layer;
drawnItems.addLayer(layer);
});
// let drawnItems = new L.FeatureGroup();
// map.addLayer(drawnItems);
// let drawControl = new L.Control.Draw({
// edit: {
// featureGroup: drawnItems
// }
// });
// map.addControl(drawControl);
// .addTo(map);
// let jsonLayer = L.geoJSON().addTo(map);
// jsonLayer.addData(JSON.parse(geom.value));
// map.fitBounds(jsonLayer.getBounds());
// let popup = L.popup();
let jsonFeatures = JSON.parse(geom.value);
let jsonLayer = L.geoJson(jsonFeatures, {
onEachFeature: onEachFeature
});
map.fitBounds(jsonLayer.getBounds());
// Take advantage of the onEachFeature callback to initialize drawnItems
function onEachFeature(feature, layer) {
drawnItems.addLayer(layer);
}
// function onMapClick(e) {
// popup
// .setLatLng(e.latlng)
// .setContent("You clicked the map at " + e.latlng.toString())
// .openOn(map);
// }
</script>
</span>
<tal:def tal:define="title title|field.title;
description description|field.description;
errormsg errormsg|field.errormsg;
item_template item_template|field.widget.item_template"
i18n:domain="deform">
<div class="panel panel-info" title="${description}">
<div class="panel-heading">${title}</div>
<div class="panel-body">
<div tal:condition="errormsg"
class="clearfix alert alert-danger">
<p i18n:translate="">
There was a problem with this section
</p>
<p>${errormsg}</p>
</div>
<div tal:condition="description">
${description}
</div>
${field.start_mapping()}
<div tal:repeat="child field.children"
tal:replace="structure child.render_template(item_template)" >
</div>
${field.end_mapping()}
</div>
</div>
</tal:def>
<tal:def tal:define="title title|field.title;
description description|field.description;
errormsg errormsg|field.errormsg;
open python:(field.widget.open or field.error) and True or False;
collapse_link_class python:open and '' or 'collapsed';
collapse_body_class python:open and 'in' or '';
item_template item_template|field.widget.item_template"
i18n:domain="deform">
<div class="panel panel-default" title="${description}">
<div class="panel-heading deform-collapse-heading">
<a
role="button"
data-toggle="collapse"
href="#collapse-${field.oid}"
tal:attributes="aria-expanded python:open and 'true' or None"
aria-controls="collapse-${field.oid}">
${title}
</a>
</div>
<div id="collapse-${field.oid}" class="panel-collapse deform-collapse-body collapse ${collapse_body_class}"
role="tabpanel" aria-labelledby="heading-${field.oid}">
<div class="panel-body">
<div tal:condition="errormsg"
class="clearfix alert alert-danger">
<p i18n:translate="">
There was a problem with this section
</p>
<p>${errormsg}</p>
</div>
<div tal:condition="description">
${description}
</div>
${field.start_mapping()}
<div tal:repeat="child field.children"
tal:replace="structure child.render_template(item_template)" >
</div>
${field.end_mapping()}
</div>
</div>
</div>
</tal:def>
<span tal:define="oid oid|field.oid;
name name|field.name;
mask_options mask_options|'{}';
style style|field.widget.style;
css_class css_class|field.widget.css_class;
style style|field.widget.style|False" tal:omit-tag="">
<input type="text" name="${name}" value="${cstruct}" tal:attributes="style style;
class string: form-control ${css_class or ''};
attributes|field.widget.attributes|{};" id="${oid}" />
<script type="text/javascript">
deform.addCallback(
'${oid}',
function (oid) {
//$("#" + oid).maskMoney(${mask_options});
$("#" + oid).maskMoney(${ mask_options }, $("#" + oid).val());
});
</script>
</span>
\ No newline at end of file
<tal:block tal:define="
name name|field.name;
oid oid|field.oid;
">
<div class="input">
<input
type="password"
name="${name}"
value="${field.widget.redisplay and cstruct or ''}"
tal:attributes="style style|field.widget.style;
class string: form-control ${css_class|field.widget.css_class or ''};
attributes|field.widget.attributes|{};"
id="${oid}"/>
<!--? onkeyup="checkPasswordStrength${oid}();"-->
<div class="checkbox">
<label>
<input type="checkbox" id="view${oid}">
<span>Show Password</span>
</label>
</div>
<div id="${oid}-password-strength-status"></div>
</div>
<style>
#password-strength-status {
padding: 5px 10px;
border-radius: 4px;
margin-top: 5px;
}
</style>
<script type="text/javascript">
$('#view${oid}').change(function () {
if ($(this).prop('checked') == true) {
$('#${oid}').attr('type', 'text');
} else {
$('#${oid}').attr('type', 'password');
}
});
function checkPasswordStrength${oid}() {
var number = /([0-9])/;
var alphabets = /([a-zA-Z])/;
var special_characters = /([~,!,@,#,$,%,^,&,*,-,_,+,=,?,>,<,\),\(,{,},\[,\]])/;
var password = $('#${oid}').val().trim();
if (password.length <= 8) {
$('#${oid}-password-strength-status').removeClass();
$('#${oid}-password-strength-status').addClass('label label-danger');
$('#${oid}-password-strength-status').html("Weak (should be atleast 8 characters.)");
} else {
if (password.match(number) && password.match(alphabets) && password.match(special_characters)) {
$('#${oid}-password-strength-status').removeClass();
$('#${oid}-password-strength-status').addClass('label label-success');
$('#${oid}-password-strength-status').html("Strong");
} else {
$('#${oid}-password-strength-status').removeClass();
$('#${oid}-password-strength-status').addClass('label label-warning');
$('#${oid}-password-strength-status').html("Medium (should include alphabets, numbers and special characters.)");
}
}
}
</script>
</tal:block>
<div tal:define="
name name|field.name;
style field.widget.style;
oid oid|field.oid;
css_class css_class|field.widget.css_class;
unicode unicode|str;
optgroup_class optgroup_class|field.widget.optgroup_class;
multiple multiple|field.widget.multiple;
url url|field.widget.url;
slave slave|field.widget.slave;"
tal:omit-tag="">
${field.start_mapping()}
<div class="row">
<div class="col-xs-4">
<div class="input-group">
<span class="input-group-addon" i18n:translate="">Jumlah</span>
<input type="text" name="qty" value="${qty}"
class="span2 form-control ${css_class or ''}"
tal:attributes="style style;
qty_attributes|field.widget.qty_attributes|{};"
maxlength="8"
id="${oid}-qty"/>
</div>
</div>
<div class="col-xs-8">
<select name="measure" tal:attributes="
name name;
id oid;
class string: form-control ${css_class or ''};
data-placeholder field.widget.placeholder|None;
multiple multiple;
style style;
attributes|field.widget.attributes|{};">
<tal:loop tal:repeat="item values">
<optgroup tal:condition="isinstance(item, optgroup_class)"
tal:attributes="label item.label">
<option tal:repeat="(value, description) item.options"
tal:attributes="
selected python:field.widget.get_select_value(cstruct, value);
class css_class;
label field.widget.long_label_generator and description;
value value"
tal:content="field.widget.long_label_generator and field.widget.long_label_generator(item.label, description) or description"/>
</optgroup>
<option tal:condition="not isinstance(item, optgroup_class)"
tal:attributes="
selected python:field.widget.get_select_value(cstruct, item[0]);
class css_class;
value item[0]">${item[1]}</option>
</tal:loop>
</select>
</div>
</div>
{field.end_mapping()}
</div>
<div tal:define="oid oid|field.oid;
css_class css_class|field.widget.css_class;
style style|field.widget.style;
inline getattr(field.widget, 'inline', False);"
tal:omit-tag="not inline">
${field.start_rename()}
<div tal:repeat="choice values | field.widget.values"
tal:omit-tag="inline"
class="radio">
<label for="${oid}-${repeat.choice.index}"
tal:define="(value, title) choice"
tal:attributes="class inline and 'radio-inline'">
<input tal:attributes="checked value == cstruct;
class css_class;
style style;
attributes|field.widget.attributes|{};"
type="radio"
name="${oid}"
value="${value}"
id="${oid}-${repeat.choice.index}"/>
${title}
</label>
</div>
${field.end_rename()}
</div>
<div>
<span class="form-control-static" id="${oid|field.oid}">
${blok_kav_no}</span> <span class="form-control-static">RT: ${rt}</span>
<span class="form-control-static">RW: ${rw}</span>
</div>
<span tal:define="name name|field.name;
css_class css_class|field.widget.css_class;
oid oid|field.oid;
style style|field.widget.style;
"
tal:omit-tag="">
<img style="height:30px; width:auto; margin-bottom:5px;" src="${cstruct}">
<input type="text" name="${name}" value=""
tal:attributes="class string: form-control ${css_class or ''};
style style;
attributes|field.widget.attributes|{};"
id="${oid}"/>
<script>
deform.addCallback(
'${oid}',
function (oid) {
$("#" + oid).on('input', function (evt) {
$(this).val(function (_, val) {
return val.toUpperCase();
});
});
});
</script>
</span>
<div tal:define="oid oid|field.oid;">
<ul class="list-group">
<tal:loop tal:repeat="choice values">
<li class="list-group-item"
tal:define="(value, description) choice"
tal:condition="value in cstruct">
<span id="${oid}-${repeat.choice.index}">${description}</span>
</li>
</tal:loop>
</ul>
</div>
<div i18n:domain="deform">
<p class="form-control-static deform-readonly-text"
id="${oid|field.oid}"
i18n:translate="">Password not displayed.</p>
</div>
<div>
<p class="form-control-static" id="${oid|field.oid}">${year}/${month}/${day}</p>
</div>
<div>
<p class="form-control-static" id="${oid|field.oid}">${date} ${time}</p>
</div>
<div>
<p class="form-control-static" id="${oid|field.oid}">${jenis}.${year}.${bundle}.${seq}</p>
</div>
<div>
<p class="form-control-static" id="${oid|field.oid}">${year}.${bundle}.${seq}</p>
</div>
<span tal:define="name name|field.name;
css_class css_class|field.widget.css_class;
oid oid|field.oid;
style style|field.widget.style;
map_zoom map_zoom|field.widget.map_zoom;
map_center map_center|field.widget.map_center;
gmap_key gmap_key|field.widget.gmap_key;
gmap_height gmap_height|field.widget.gmap_height;
gmap_width gmap_width|field.widget.gmap_width;
gmap_control gmap_control|field.widget.gmap_control;
html_info html_info|field.widget.html_info;
gmap_data_style gmap_data_style|field.widget.gmap_data_style;
gmap_edit_url gmap_edit_url|field.widget.gmap_edit_url;
show_options show_options|field.widget.show_options;
"
tal:omit-tag="">
<textarea id="${oid}" name="${name}" readonly
tal:attributes="class string: form-control ${css_class or ''};
style style;
attributes|field.widget.attributes|{};">${cstruct}</textarea>
<div class="row" tal:condition="show_options">
<div id="gmap" class="gmap"></div>
<style>
.gmap {
height: ${gmap_height};
width: ${gmap_width};
}
</style>
<script type="text/javascript">
let map_zoom = ${map_zoom};
let map_center = ${map_center};
let geom = document.getElementById('${oid}');
let contents = ${html_info};
let edit_url = "${gmap_edit_url}";
let gmapDataStyle = ${structure: gmap_data_style};
let gmapControls = ${gmap_control};
//styleControls = document.getElementById("${oid}-options");
//styleControls.value = JSON.stringify(featureStyleOptions);
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?v=3&key=${gmap_key}&libraries=drawing&callback=initMap">
</script>
</span>
<span tal:define="name name|field.name;
css_class css_class|field.widget.css_class;
oid oid|field.oid;
style style|field.widget.style;
"
tal:omit-tag="">
<img style="height:30px; width:auto; margin-bottom:5px;" src="${cstruct}">
</span>
<tal:def tal:define="title title|field.title;
description description|field.description;
errormsg errormsg|field.errormsg;
item_template item_template|field.widget.readonly_item_template"
i18n:domain="deform">
<div class="panel panel-default" title="${description}">
<div class="panel-heading">${title}</div>
<div class="panel-body">
<div tal:condition="description">
${description}
</div>
<div tal:repeat="child field.children"
tal:replace="structure child.render_template(item_template)" >
</div>
</div>
</div>
</tal:def>
<div tal:define="error_class error_class|field.widget.error_class;
description description|field.description;
title title|field.title;
oid oid|field.oid;
hidden hidden|field.widget.hidden;
category category|field.widget.category;
structural hidden or category == 'structural';
required required|field.required;"
class="form-group ${field.error and 'has-error' or ''} ${field.widget.item_css_class or ''}"
title="${description}"
id="item-${oid}"
tal:omit-tag="structural"
i18n:domain="deform">
<div class="row">
<div class="col-md-12 col-lg-12 col-sm-12">
<label for="${oid}"
class="control-label col-sm-3 col-md-2 col-lg-2 ${required and 'required' or ''}"
tal:condition="not structural"
id="req-${oid}"
>
${title}
</label>
<div class="col-sm-9 col-md-10 col-lg-10"
tal:condition="not structural"
>
<div tal:define="input_prepend field.widget.input_prepend | None;
input_append field.widget.input_append | None"
tal:omit-tag="not (input_prepend or input_append)"
class="input-group">
<span class="input-group-addon"
tal:condition="input_prepend">${input_prepend}</span
><span tal:replace="structure field.serialize(cstruct, readonly=True).strip()"
/><span class="input-group-addon"
tal:condition="input_append">${input_append}</span>
</div>
<p class="help-block"
tal:define="errstr 'error-%s' % field.oid"
tal:repeat="msg field.error.messages()"
i18n:translate=""
tal:attributes="id repeat.msg.index==0 and errstr or
('%s-%s' % (errstr, repeat.msg.index))"
tal:condition="field.error and not field.widget.hidden and not field.typ.__class__.__name__=='Mapping'">
${msg}
</p>
<p tal:condition="field.description and not field.widget.hidden"
class="help-block">
${field.description}
</p>
</div>
<div
tal:condition="structural">
<div class="col-sm-12 col-md-12 col-lg-12"
>
<div tal:define="input_prepend field.widget.input_prepend | None;
input_append field.widget.input_append | None"
tal:omit-tag="not (input_prepend or input_append)"
class="input-group">
<span class="input-group-addon"
tal:condition="input_prepend">${input_prepend}</span
><span tal:replace="structure field.serialize(cstruct, readonly=True).strip()"
/><span class="input-group-addon"
tal:condition="input_append">${input_append}</span>
</div>
<p class="help-block"
tal:define="errstr 'error-%s' % field.oid"
tal:repeat="msg field.error.messages()"
i18n:translate=""
tal:attributes="id repeat.msg.index==0 and errstr or
('%s-%s' % (errstr, repeat.msg.index))"
tal:condition="field.error and not field.widget.hidden and not field.typ.__class__.__name__=='Mapping'">
${msg}
</p>
<p tal:condition="field.description and not field.widget.hidden"
class="help-block">
${field.description}
</p>
</div>
</div>
</div>
</div>
</div>
<p class="form-control-static" id="${oid|field.oid}" tal:define="mask_options mask_options|'{}';"></p>
<script type="text/javascript">
deform.addCallback(
'${oid|field.oid}',
function (oid) {
let val = parseFloat('${cstruct}');
$("#" + oid).html(val.toLocaleString());
});
</script>
\ No newline at end of file
<div i18n:domain="">
<em i18n:translate=""> Password not displayed. </em>
</div>
<div tal:define="oid oid|field.oid;">
<tal:loop tal:repeat="choice values | field.widget.values">
<p tal:define="(value, description) choice"
tal:condition="value == cstruct"
id="${oid}-${repeat.choice.index}"
class="form-control-static">${description}</p>
</tal:loop>
</div>
<pre id="${oid|field.oid}"
class="form-control-static pre-scrollable">${cstruct}</pre>
<tal:loop define="
optgroup_class optgroup_class|field.widget.optgroup_class;
oid oid|field.oid;
multiple multiple|field.widget.multiple;"
repeat="item values">
<tal:if condition="isinstance(item, optgroup_class)">
<tal:loop repeat="choice item.options">
<p class="form-control-static"
id="${oid}-${repeat.item.index}-${repeat.choice.index}"
tal:define="(value, description) choice"
tal:condition="(multiple and value in cstruct or value == cstruct)"
>${description}</p>
</tal:loop>
</tal:if>
<tal:if condition="not isinstance(item, optgroup_class)">
<tal:block define="(value, description) item">
<p class="form-control-static"
id="${oid}-${repeat.item.index}"
tal:condition="(multiple and value in cstruct or value == cstruct)"
>${description}</p>
</tal:block>
</tal:if>
</tal:loop>
<div tal:define="
item_tmpl item_template|field.widget.readonly_item_template;
oid oid|field.oid;
name name|field.name;
title title|field.title;"
class="deform-seq"
id="${oid}">
<div class="panel panel-default">
<div class="panel-heading">${title}</div>
<div class="panel-body">
<div class="deform-seq-container">
<div tal:define="subfields [ x[1] for x in subfields ]"
tal:repeat="subfield subfields"
tal:replace="structure subfield.render_template(item_tmpl,
parent=field)" />
</div>
</div>
</div>
</div>
<div tal:omit-tag="field.widget.hidden"
tal:define="
hidden hidden|field.widget.hidden;
description description|field.description;"
title="${description}"
class="form-group row deform-seq-item"
i18n:domain="deform">
<div class="col-xs-12">
<span tal:replace="structure field.serialize(cstruct, readonly=True)"/>
</div>
</div>
<p class="form-control-static"
id="${oid|field.oid}">
${cstruct}
</p>
<div tal:define="delayed_load delayed_load|field.widget.delayed_load;
tinymce_options tinymce_options|field.widget.tinymce_options;
oid oid|field.oid;
name name|field.name;"
xmlns:i18n="http://xml.zope.org/namespaces/i18n"
i18n:domain="deform"
tal:omit-tag="">
<style type="text/css">
.deform .tinymce-preload{
border: 1px solid #CCC;
height: 240px;
display: block;
}
</style>
<textarea id="${oid}" name="${name}"
class='tinymce form-control' tal:content="structure cstruct" />
<span id="${oid}-preload" class="tinymce-preload"
tal:content="structure cstruct" />
<script type="text/javascript">
(function($){
deform.addCallback('${oid}', function(oid) {
var jqoid = $('#' + oid);
var jqoid_preload = $('#' + oid + '-preload');
jqoid.hide();
jqoid_preload.click(function(){
jqoid.show();
jqoid_preload.remove();
tinyMCE.init({
language: '<tal:block i18n:translate="language-code">en</tal:block>',
body_class: 'form-control',
<tal:block condition="tinymce_options">${tinymce_options},</tal:block>
elements: oid
});
jqoid_preload.unbind('click');
});
if (!${str(bool(delayed_load)).lower()}) {
jqoid_preload.click();
}
});
$().bind('form.pre.serialize', function(event, $form, options) {
tinyMCE.triggerSave();
});
})(jQuery);
</script>
</div>
<div tal:define="
name name|field.name;
oid oid|field.oid;
style style|field.widget.style;
size size|field.widget.size;
css_class css_class|field.widget.css_class;
unicode unicode|str;
optgroup_class optgroup_class|field.widget.optgroup_class;
multiple multiple|field.widget.multiple;"
tal:omit-tag="">
<input type="hidden" name="__start__" value="${name}:sequence"
tal:condition="multiple" />
<select tal:attributes="
name name;
id oid;
class string: form-control ${css_class or ''};
multiple multiple;
size size;
style style;
attributes|field.widget.attributes|{};">
<tal:loop tal:repeat="item values">
<optgroup tal:condition="isinstance(item, optgroup_class)"
tal:attributes="label item.label">
<option tal:repeat="(value, description) item.options"
tal:attributes="
selected python:field.widget.get_select_value(cstruct, value);
class css_class;
label field.widget.long_label_generator and description;
value value"
tal:content="field.widget.long_label_generator and field.widget.long_label_generator(item.label, description) or description"/>
</optgroup>
<option tal:condition="not isinstance(item, optgroup_class)"
tal:attributes="
selected python:field.widget.get_select_value(cstruct, item[0]);
class css_class;
value item[0]">${item[1]}</option>
</tal:loop>
</select>
<input type="hidden" name="__end__" value="${name}:sequence"
tal:condition="multiple" />
</div>
<div tal:define="
name name|field.name;
style field.widget.style;
oid oid|field.oid;
css_class css_class|field.widget.css_class;
unicode unicode|str;
optgroup_class optgroup_class|field.widget.optgroup_class;
multiple multiple|field.widget.multiple;"
tal:omit-tag="">
<style>
.select2-selection.form-control {
padding: 0px 0px;
}
.select2-container--default .select2-selection--multiple,
.select2-container--default .select2-selection--single {
border: 1px solid #ccc;
}
</style>
<input type="hidden" name="__start__" value="${name}:sequence"
tal:condition="multiple" />
<select tal:attributes="
name name;
id oid;
class string: form-control ${css_class or ''};
data-placeholder field.widget.placeholder|None;
multiple multiple;
style style;
attributes|field.widget.attributes|{};">
<tal:loop tal:repeat="item values">
<optgroup tal:condition="isinstance(item, optgroup_class)"
tal:attributes="label item.label">
<option tal:repeat="(value, description) item.options"
tal:attributes="
selected python:field.widget.get_select_value(cstruct, value);
class css_class;
label field.widget.long_label_generator and description;
value value"
tal:content="field.widget.long_label_generator and field.widget.long_label_generator(item.label, description) or description"/>
</optgroup>
<option tal:condition="not isinstance(item, optgroup_class)"
tal:attributes="
selected python:field.widget.get_select_value(cstruct, item[0]);
class css_class;
value item[0]">${item[1]}</option>
</tal:loop>
</select>
<script type="text/javascript">
deform.addCallback(
'${field.oid}',
function(oid) {
$('#' + oid).select2({
containerCssClass: 'form-control',
placeholder: "${str(field.widget.placeholder).replace('"','\\"')|""}" || undefined,
allowClear: "${hasattr(field.widget, 'placeholder')}",
tags: ${str(getattr(field.widget, 'tags', 'undefined')).lower()}
});
}
);
</script>
<input type="hidden" name="__end__" value="${name}:sequence"
tal:condition="multiple" />
</div>
<div tal:define="
name name|field.name;
style field.widget.style;
oid oid|field.oid;
css_class css_class|field.widget.css_class;
unicode unicode|str;
optgroup_class optgroup_class|field.widget.optgroup_class;
multiple multiple|field.widget.multiple;
url url|field.widget.url;
slave slave|field.widget.slave;" tal:omit-tag="">
<style>
.select2-selection.form-control {
padding: 0px 0px;
}
.select2-container--default .select2-selection--multiple,
.select2-container--default .select2-selection--single {
border: 1px solid #ccc;
}
</style>
<input type="hidden" name="__start__" value="${name}:sequence" tal:condition="multiple" />
<select tal:attributes="
name name;
id oid;
class string: form-control ${css_class or ''};
data-placeholder field.widget.placeholder|None;
multiple multiple;
style style;
attributes|field.widget.attributes|{};">
<tal:loop tal:repeat="item values">
<optgroup tal:condition="isinstance(item, optgroup_class)" tal:attributes="label item.label">
<option tal:repeat="(value, description) item.options" tal:attributes="
selected python:field.widget.get_select_value(cstruct, value);
class css_class;
label field.widget.long_label_generator and description;
value value"
tal:content="field.widget.long_label_generator and field.widget.long_label_generator(item.label, description) or description" />
</optgroup>
<option tal:condition="not isinstance(item, optgroup_class)" tal:attributes="
selected python:field.widget.get_select_value(cstruct, item[0]);
class css_class;
value item[0]">${item[1]}</option>
</tal:loop>
</select>
<script type="text/javascript">
deform.addCallback(
'${field.oid}',
function (oid) {
$('#' + oid).select2({
containerCssClass: 'form-control',
placeholder: "${str(field.widget.placeholder).replace('"','\\"')|""}" || undefined,
allowClear: "${hasattr(field.widget, 'placeholder')}",
tags: ${ str(getattr(field.widget, 'tags', 'undefined')).lower()
}
});
}
);
</script>
<script type="text/javascript" tal:condition="url and slave">
deform.addCallback(
'${field.oid}',
function (oid) {
$('#' + oid).change(function () {
$("#${slave}").val("");
$("#${slave}").empty();
$("#${slave}").append('<option value="" selected disabled>Pilih Data...</option>');
let value = $(this).val();
if (value) {
$.ajax({
type: "GET",
url: "${url}" + value,
success: function (res) {
if (res) {
var def_value = null;
if (res.hasOwnProperty("default")) {
values = res.values;
def_value = res.default;
}
else
values = res;
$.each(values, function (key, value) {
if (key === def_value)
$("#${slave}").append('<option value="' + key + '" selected>' + value + '</option>');
else
$("#${slave}").append('<option value="' + key + '">' + value + '</option>');
});
} else {
$("#${slave}").empty();
}
}
});
}
$("#${slave}").change();
});
});
</script>
<input type="hidden" name="__end__" value="${name}:sequence" tal:condition="multiple" />
</div>
\ No newline at end of file
<span tal:define="name name|field.name;
css_class css_class|field.widget.css_class;
oid oid|field.oid;
style style|field.widget.style;
autofocus autofocus|field.autofocus" tal:omit-tag="">
<input type="text" name="${name}" value="${cstruct}" data-provide="typeahead" tal:attributes="class string: form-control ${css_class or ''};
style style;
autofocus autofocus;
attributes|field.widget.attributes|{};" id="${oid}" />
<script tal:condition="field.widget.values" type="text/javascript">
deform.addCallback(
'${field.oid}',
function (oid) {
$('#' + oid).typeahead(${ structure: options });
if ("${autofocus}" == "autofocus") {
$('#' + oid).focus();
}
}
);
</script>
</span>
<div tal:define="
name name|field.name;
style field.widget.style;
oid oid|field.oid;
css_class css_class|field.widget.css_class;
unicode unicode|str;
optgroup_class optgroup_class|field.widget.optgroup_class;
multiple multiple|field.widget.multiple;
autofocus autofocus|field.autofocus;
url url|field.widget.url;
slave slave|field.widget.slave;" tal:omit-tag="">
<style>
.select2-selection.form-control {
padding: 0px 0px;
}
.select2-container--default .select2-selection--multiple,
.select2-container--default .select2-selection--single {
border: 1px solid #ccc;
}
</style>
<input type="hidden" name="__start__" value="${name}:sequence" tal:condition="multiple" />
<select tal:attributes="
name name;
id oid;
class string: form-control ${css_class or ''};
data-placeholder field.widget.placeholder|None;
multiple multiple;
style style;
autofocus autofocus;
attributes|field.widget.attributes|{};">
<tal:loop tal:repeat="item values">
<optgroup tal:condition="isinstance(item, optgroup_class)" tal:attributes="label item.label">
<option tal:repeat="(value, description) item.options" tal:attributes="
selected python:field.widget.get_select_value(cstruct, value);
readonly 'readonly' in getattr(field.widget, 'attributes', {}) and field.widget.get_select_value(cstruct, item[0]);
disabled 'readonly' in getattr(field.widget, 'attributes', {}) and not field.widget.get_select_value(cstruct, item[0]);
class css_class;
label field.widget.long_label_generator and description;
value value"
tal:content="field.widget.long_label_generator and field.widget.long_label_generator(item.label, description) or description" />
</optgroup>
<option tal:condition="not isinstance(item, optgroup_class)" tal:attributes="
selected python:field.widget.get_select_value(cstruct, item[0]);
readonly 'readonly' in getattr(field.widget, 'attributes', {}) and field.widget.get_select_value(cstruct, item[0]);
disabled 'readonly' in getattr(field.widget, 'attributes', {}) and not field.widget.get_select_value(cstruct, item[0]);
class css_class;
value item[0]">${item[1]}</option>
</tal:loop>
</select>
<script type="text/javascript">
deform.addCallback(
"${field.oid}",
function (oid) {
$("#" + oid).selectize(${ selectize_options_json });
if ($("#" + oid).is("[readonly]")) {
$("#" + oid)[0].selectize.lock();
}
if ($("#" + oid).prop("autofocus")) {
$("#" + oid).selectize("focus");
}
}
);
</script>
<script type="text/javascript" tal:condition="url and slave">
deform.addCallback(
'${field.oid}',
function (oid) {
$('#' + oid).change(function () {
$("#${slave}").val("");
$("#${slave}").empty();
$("#${slave}").append('<option value="" selected disabled>Pilih Data...</option>');
let value = $(this).val();
if (value) {
$.ajax({
type: "GET",
url: "${url}" + value,
success: function (res) {
if (res) {
var def_value = null;
if (res.hasOwnProperty("default")) {
values = res.values;
def_value = res.default;
}
else
values = res;
$.each(values, function (key, value) {
if (key === def_value)
$("#${slave}").append('<option value="' + key + '" selected>' + value + '</option>');
else
$("#${slave}").append('<option value="' + key + '">' + value + '</option>');
});
} else {
$("#${slave}").empty();
}
}
});
}
$("#${slave}").change();
});
});
</script>
<input type="hidden" name="__end__" value="${name}:sequence" tal:condition="multiple" />
</div>
\ No newline at end of file
<div tal:define="item_tmpl item_template|field.widget.item_template;
oid oid|field.oid;
name name|field.name;
min_len min_len|field.widget.min_len;
min_len min_len or 0;
max_len max_len|field.widget.max_len;
max_len max_len or 100000;
now_len len(subfields);
orderable orderable|field.widget.orderable;
orderable orderable and 1 or 0;
prototype field.widget.prototype(field);
title title|field.title;"
class="deform-seq"
id="${oid}">
<style>
body.dragging, body.dragging * {
cursor: move !important;
}
.dragged {
position: absolute;
opacity: 0.5;
z-index: 2000;
}
</style>
<!-- sequence -->
<input type="hidden" name="__start__"
value="${field.name}:sequence"
class="deform-proto"
tal:attributes="prototype prototype;
attributes|field.widget.attributes|{};"/>
<div class="panel panel-default">
<!--? <div class="panel-heading">${title}</div>-->
<div class="panel-body">
<div class="deform-seq-container"
id="${oid}-orderable">
<div tal:define="subfields [ x[1] for x in subfields ]"
tal:repeat="subfield subfields"
tal:replace="structure subfield.render_template(item_tmpl,
parent=field)" />
<span class="deform-insert-before"
tal:attributes="
min_len min_len;
max_len max_len;
now_len now_len;
orderable orderable;"></span>
</div>
</div>
<div class="panel-footer">
<a href="#"
class="btn deform-seq-add"
id="${field.oid}-seqAdd"
onclick="javascript: return deform.appendSequenceItem(this);">
<small id="${field.oid}-addtext">${add_subitem_text}</small>
</a>
<script type="text/javascript">
deform.addCallback(
'${field.oid}',
function(oid) {
oid_node = $('#'+ oid);
deform.processSequenceButtons(oid_node, ${min_len},
${max_len}, ${now_len},
${orderable});
}
)
<tal:block condition="orderable">
$( "#${oid}-orderable" ).sortable({
handle: ".deform-order-button, .panel-heading",
containerSelector: "#${oid}-orderable",
itemSelector: ".deform-seq-item",
placeholder: '<span class="glyphicon glyphicon-arrow-right placeholder"></span>',
onDragStart: function ($item, container, _super) {
var offset = $item.offset(),
pointer = container.rootGroup.pointer
adjustment = {
left: pointer.left - offset.left,
top: pointer.top - offset.top
}
_super($item, container)
},
onDrag: function ($item, position) {
$item.css({
left: position.left - adjustment.left,
top: position.top - adjustment.top
})
}
});
</tal:block>
</script>
<input type="hidden" name="__end__" value="${field.name}:sequence"/>
<!-- /sequence -->
</div>
</div>
</div>
\ No newline at end of file
<div tal:omit-tag="field.widget.hidden"
tal:define="hidden hidden|field.widget.hidden;
error_class error_class|field.widget.error_class;
description description|field.description;
title title|field.title;
oid oid|field.oid"
title="${description}"
class="form-group row deform-seq-item ${field.error and error_class or ''} ${field.widget.item_css_class or ''} ${field.default_item_css_class()}"
i18n:domain="deform">
<div class="col-xs-11">
<span tal:replace="structure field.serialize(cstruct)"/>
<tal:errors condition="field.error and not hidden"
define="errstr 'error-%s' % oid"
repeat="msg field.error.messages()">
<p tal:condition="msg"
id="${errstr if repeat.msg.index==0 else '%s-%s' % (errstr, repeat.msg.index)}"
class="${error_class} help-block"
i18n:translate="">${msg}</p>
</tal:errors>
</div>
<div class="col-xs-1" style="padding:0">
<!-- sequence_item -->
<span class="deform-order-button close glyphicon glyphicon-resize-vertical ${field.widget.template=='file_upload' and 'hide' or ''}"
id="${oid}-order"
tal:condition="not hidden"
title="Reorder (via drag and drop)"
i18n:attributes="title"></span>
<a class="deform-close-button close ${field.widget.template=='file_upload' and 'hide' or ''}"
id="${oid}-close"
tal:condition="not field.widget.hidden"
title="Remove"
i18n:attributes="title"
onclick="javascript:deform.removeSequenceItem(this);">&times;</a>
</div>
<!-- /sequence_item -->
</div>
<textarea tal:define="rows rows|field.widget.rows;
cols cols|field.widget.cols;
css_class css_class|field.widget.css_class;
oid oid|field.oid;
name name|field.name;
style style|field.widget.style"
tal:attributes="rows rows;
cols cols;
class string: form-control ${css_class or ''};
style style;
attributes|field.widget.attributes|{};"
id="${oid}"
name="${name}">${cstruct}</textarea>
<span tal:define="size size|field.widget.size;
css_class css_class|field.widget.css_class;
oid oid|field.oid;
style style|field.widget.style|None;
type_name type_name|field.widget.type_name;"
tal:omit-tag="">
${field.start_mapping()}
<input type="${type_name}"
name="time"
value="${cstruct}"
tal:attributes="size size;
class string: ${css_class or ''} form-control hasDatepicker;
style style;
attributes|field.widget.attributes|{};"
id="${oid}"/>
${field.end_mapping()}
<script type="text/javascript">
deform.addCallback(
'${oid}',
function(oid) {
if (!Modernizr.inputtypes['time'] ||
"${type_name}" != "time" || window.forceDateTimePolyfill){
$('#' + oid).pickatime(${options_json});
}
}
);
</script>
</span>
......@@ -76,8 +76,8 @@ class DokumenWidget(Widget):
class FormulirWidget(Widget):
template = "opensipkd.base:/views/widgets/formulir.pt"
readonly_template = "opensipkd.base:/views/widgets/readonly/formulir.pt"
template = "opensipkd.base:/widgets/templates/formulir.pt"
readonly_template = "opensipkd.base:/widgets/templates/readonly/formulir.pt"
assume_y2k = True
_pstruct_schema = SchemaNode(
......@@ -301,7 +301,7 @@ class AutocompleteMsInputWidget(AutocompleteInputWidget):
class QtyWidget(Widget):
template = "opensipkd.base:/widgets/templates/qty.pt"
readonly_template = "opensipkd.base:/viewswidgets/templates/readonly/qty.pt"
readonly_template = "opensipkd.base:/widgets/templates/readonly/qty.pt"
_pstruct_schema = SchemaNode(
Mapping(),
......@@ -417,7 +417,7 @@ class ImageWidget(Widget):
"""
template = "opensipkd.base:views/widgets/image.pt"
template = "opensipkd.base:/widgets/templates/image.pt"
readonly_template = "image"
strip = True
requirements = ()
......@@ -466,8 +466,8 @@ class MapWidget(Widget):
"""
template = "opensipkd.base:views/widgets/gmap.pt"
readonly_template = "opensipkd.base:views/widgets/readonly/gmap.pt"
template = "opensipkd.base:/widgets/templates/gmap.pt"
readonly_template = "opensipkd.base:/widgets/templates/gmap.pt"
map_center = [0, 0]
map_zoom = 12
gmap_key = None
......@@ -526,86 +526,86 @@ class MapWidget(Widget):
return pstruct
class LeafMapWidget(Widget):
"""
Renders an ``<div id="map"/>`` widget.
**Attributes/Arguments**
template
The template name used to render the widget. Default:
``textinput``.
readonly_template
The template name used to render the widget in read-only mode.
Default: ``readonly/textinput``.
strip
If true, during deserialization, strip the value of leading
and trailing whitespace (default ``True``).
"""
template = "opensipkd.base:views/widgets/leafmap.pt"
readonly_template = "opensipkd.base:views/widgets/readonly/leafmap.pt"
map_center = [0, 0]
map_zoom = 12
# gmap_control = ['Point', 'Polygon', 'LineString']
map_height = "400px"
map_width = "100%"
strip = True
html_info = {}
# gmap_data_style = {
# "editable": True,
# "draggable": True,
# "clickable": True,
# "removable": True,
# }
# gmap_edit_url = ""
show_options = True
requirements = (
('deform', None),
{
"js": ["opensipkd.base:static/v3/map/leaflet/leaflet.js",
"https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.2/leaflet.draw.js"],
"css": ["opensipkd.base:static/v3/map/leaflet/leaflet.css",
"https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.2/leaflet.draw.css"],
})
def __init__(self, **kw):
super().__init__(**kw)
# _logging.info(self.gmap_data_style)
# self.gmap_data_style = json.dumps(self.gmap_data_style)
def serialize(self, field, cstruct, **kw):
if cstruct in (null, None):
cstruct = ""
readonly = kw.get("readonly", self.readonly)
template = readonly and self.readonly_template or self.template
# _logging.debug(self.gmap_data_style)
# if readonly:
gmap_data_style = {
"editable": not readonly,
"draggable": not readonly,
"clickable": True,
"removable": not readonly,
}
# self.gmap_data_style = json.dumps(gmap_data_style)
# _logging.info(self.gmap_data_style)
values = self.get_template_values(field, cstruct, kw)
return field.renderer(template, **values)
def deserialize(self, field, pstruct):
if pstruct is null:
return null
elif not isinstance(pstruct, string_types):
raise Invalid(field.schema, "Pstruct is not a string")
if self.strip:
pstruct = pstruct.strip()
if not pstruct:
return null
return pstruct
# class LeafMapWidget(Widget):
# """
# Renders an ``<div id="map"/>`` widget.
# **Attributes/Arguments**
# template
# The template name used to render the widget. Default:
# ``textinput``.
# readonly_template
# The template name used to render the widget in read-only mode.
# Default: ``readonly/textinput``.
# strip
# If true, during deserialization, strip the value of leading
# and trailing whitespace (default ``True``).
# """
# template = "opensipkd.base:views/widgets/leafmap.pt"
# readonly_template = "opensipkd.base:views/widgets/readonly/leafmap.pt"
# map_center = [0, 0]
# map_zoom = 12
# # gmap_control = ['Point', 'Polygon', 'LineString']
# map_height = "400px"
# map_width = "100%"
# strip = True
# html_info = {}
# # gmap_data_style = {
# # "editable": True,
# # "draggable": True,
# # "clickable": True,
# # "removable": True,
# # }
# # gmap_edit_url = ""
# show_options = True
# requirements = (
# ('deform', None),
# {
# "js": ["opensipkd.base:static/v3/map/leaflet/leaflet.js",
# "https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.2/leaflet.draw.js"],
# "css": ["opensipkd.base:static/v3/map/leaflet/leaflet.css",
# "https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.2/leaflet.draw.css"],
# })
# def __init__(self, **kw):
# super().__init__(**kw)
# # _logging.info(self.gmap_data_style)
# # self.gmap_data_style = json.dumps(self.gmap_data_style)
# def serialize(self, field, cstruct, **kw):
# if cstruct in (null, None):
# cstruct = ""
# readonly = kw.get("readonly", self.readonly)
# template = readonly and self.readonly_template or self.template
# # _logging.debug(self.gmap_data_style)
# # if readonly:
# gmap_data_style = {
# "editable": not readonly,
# "draggable": not readonly,
# "clickable": True,
# "removable": not readonly,
# }
# # self.gmap_data_style = json.dumps(gmap_data_style)
# # _logging.info(self.gmap_data_style)
# values = self.get_template_values(field, cstruct, kw)
# return field.renderer(template, **values)
# def deserialize(self, field, pstruct):
# if pstruct is null:
# return null
# elif not isinstance(pstruct, string_types):
# raise Invalid(field.schema, "Pstruct is not a string")
# if self.strip:
# pstruct = pstruct.strip()
# if not pstruct:
# return null
# return pstruct
class BootStrapDateInputWidget(Widget):
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!