calendar/app/views/admin/calendars/_form.html.erb

388 lines
14 KiB
Plaintext

<%= javascript_include_tag 'jquery.base64' %>
<style type="text/css">
.controls[data-toggle^="buttons-"] input[type="checkbox"] {
margin-left: 0;
margin-top: 0;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: block;
opacity: 0;
}
.controls[data-toggle^="buttons-"] .checkbox.inline.btn{
position: relative;
}
div[contentEditable=true]:empty:before{
content: attr(data-ph);
color: grey;
padding-left: 3%;
font-weight: bold;
font-family: serif;
}
div[contentEditable=true] {
background: white;
color: black;
border: 0.1em solid #cccccc;
font-size: 1.15em;
padding: 0.3em 0 0.3em 3%;
border-radius: 0.3em;
display: block;
width: 100%;
outline: 0;
}
div[contentEditable=true]:focus {
border-color: rgba(82, 168, 236, 0.8);
outline: 0;
outline: thin dotted \9;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
</style>
<% if @event.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(@event.errors.count, "error") %> prohibited this event from being saved:</h2>
<ul>
<% @event.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
<% locales = Site.first.in_use_locales rescue I18n.available_locales
locales = [I18n.locale] + (locales - [I18n.locale])
%>
<div class="control-group">
<%= f.label t("title"), :class=>"control-label" %>
<div class="controls">
<div class="tab-content" style="overflow: hidden;">
<% locales.each_with_index do |locale, i| %>
<%= f.fields_for :title_translations, f.object do |f| %>
<div class="tab-pane fade <%= ( i == 0 ) ? "active in" : '' %>" id="title_translations_<%= locale %>">
<% title = f.object.title(locale) %>
<div data-ph="<%= t('calendar.press_enter') %>" contenteditable="true" class="calendar-comment preserve_input_text"><%= title.to_s.html_safe %></div>
<%= hidden_field_tag "#{f.object_name}[#{locale}]", title %>
</div>
<% end %>
<% end %>
</div>
<div class="btn-group" data-toggle="buttons-radio">
<% locales.each_with_index do |locale, i| %>
<a class="btn <%= ( i == 0 ) ? "active" : '' %>" href="#title_translations_<%= locale %>" data-toggle="tab"><%= t(locale.to_s) %></a>
<% end %>
</div>
</div>
</div>
<div class="control-group">
<%= f.label t("calendar.note"), :class=>"control-label" %>
<div class="controls">
<div class="tab-content" style="overflow: hidden;">
<% locales.each_with_index do |locale, i| %>
<%= f.fields_for :note_translations, f.object do |f| %>
<div class="tab-pane fade <%= ( i == 0 ) ? "active in" : '' %>" id="note_translations_<%= locale %>">
<% note = f.object.note(locale) %>
<div data-ph="<%= t('calendar.press_enter') %>" contenteditable="true" class="calendar-comment preserve_input_text"><%= note.to_s.html_safe %></div>
<%= hidden_field_tag "#{f.object_name}[#{locale}]", note %>
</div>
<% end %>
<% end %>
</div>
<div class="btn-group" data-toggle="buttons-radio">
<% locales.each_with_index do |locale, i| %>
<a class="btn <%= ( i == 0 ) ? "active" : '' %>" href="#note_translations_<%= locale %>" data-toggle="tab"><%= t(locale.to_s) %></a>
<% end %>
</div>
</div>
</div>
<div class="control-group">
<%= f.label t("url"), :class=>"control-label" %>
<div class="controls">
<div class="tab-content" style="overflow: hidden;">
<% locales.each_with_index do |locale, i| %>
<%= f.fields_for :url_translations, f.object do |f| %>
<div class="tab-pane fade <%= ( i == 0 ) ? "active in" : '' %>" id="note_translations_<%= locale %>">
<% url = f.object.url(locale) %>
<%= text_field_tag "#{f.object_name}[#{locale}]", url %>
</div>
<% end %>
<% end %>
</div>
<div class="btn-group" data-toggle="buttons-radio">
<% locales.each_with_index do |locale, i| %>
<a class="btn <%= ( i == 0 ) ? "active" : '' %>" href="#url_translations_<%= locale %>" data-toggle="tab"><%= t(locale.to_s) %></a>
<% end %>
</div>
</div>
</div>
<div class="control-group">
<label class="control-label"></label>
<div class="controls">
<label>
<%= f.check_box :all_day,:id=>"all_day_check", :checked => @all_day %> <%= t('calendar.all_day') %>
</label>
</div>
</div>
<% data_format = @all_day ? 'yyyy/MM/dd' : 'yyyy/MM/dd hh:mm' %>
<div class="control-group">
<%= f.label t("start_date"), :class=>"control-label" %>
<%#= f.datetime_select :start %>
<div class="controls">
<%= f.datetime_picker :start, :class => "input-large", data: {"fv-validation" => "required;","fv-messages" => "Cannot be empty;"}, :placeholder => data_format, :new_record => false, :format => data_format %>
</div>
</div>
<div class="control-group">
<%= f.label t("end_date"), :class=>"control-label" %>
<%#= f.datetime_select :end %>
<div class="controls">
<%= f.datetime_picker :end, :class => "input-large", :placeholder => data_format, :new_record => false, :format=> data_format %>
</div>
</div>
<div class="control-group">
<%= f.label t("calendar.calendar"), :class=>"control-label" %>
<div class="controls">
<%= f.select :calendar_type_id, @categories.collect{|t| [ t.title, t.id ]} %>
</div>
</div>
<!-- Tag Module -->
<div class="control-group">
<label class="control-label"><%= t(:tags) %></label>
<%= select_tags(f, @module_app) %>
</div>
<div class="control-group">
<label class="control-label"></label>
<div class="controls">
<label>
<%= f.check_box :recurring, :id=>"recurring_checkbox", :checked => @recurring %> <%= t("calendar.recurring") %>
</label>
</div>
</div>
<div id="recurring_panel" <%= (@recurring ? '' : "style=display:none;") %> >
<div class="control-group">
<%=f.label :period, t("calendar.repeats"),:class=>"control-label", :for => "event_period" %>
<div class="controls">
<%=f.select :period, Event::REPEATS.map{|v| [t("calendar.#{v.downcase}"),v]},{},:class=>"span5",:id => "event_period" %>
</div>
</div>
<div class="control-group">
<%=f.label :frequency, "Every",:class=>"control-label" %>
<div class="controls">
<%=f.select :frequency, (1..30).to_a,{},:class=>"span2" %>
</div>
</div>
<div id="Weekly_panel" class="<%= 'hide' if f.object.period != 'Weekly' %>">
<%=f.label :is_weekdays, t("calendar.type") ,:class=>"control-label", :for => "event_is_weekdays" %>
<div class="controls">
<%=f.select :is_weekdays, options_for_select(['custom', 'weekdays'].map.with_index{|v, i| [t("calendar.#{v}"), i.to_s]}, f.object.is_weekdays ? '1' : '0'),{},:class=>"span5",:id=>"event_is_weekdays" %>
<div id="Weekly_custom_panel" class="<%= 'hide' if f.object.is_weekdays %>">
<%
weekdays = f.object.weekdays
if f.object.new_record? && f.object.start
weekdays = [f.object.start.wday]
end
tmp_html = []
%>
<% (0...7).each do |i| %>
<% tmp = f.check_box_tag "#{f.object_name}[weekdays][]", i, weekdays.include?(i), {:class=>"weekdays-checkbox", :"data-key"=>i}
tmp += t("calendar.short_day.#{i}")
tmp_html << tmp
%>
<% end %>
<% unless (CalendarSetting.first.sunday_first rescue false)
tmp_html.rotate!(1)
end %>
<%= tmp_html.join("\n").html_safe %>
</div>
</div>
</div>
<div class="control-group">
<%= f.label t("calendar.recurring_end_date"), :class=>"control-label" %>
<div class="controls">
<%= f.datetime_picker :recurring_end_date, :class => "input-large", :placeholder => data_format, :new_record => false, :format => data_format %>
</div>
</div>
</div>
<div class="control-group last">
<div class="controls">
<% if action_name == "edit" %>
<%= f.button t("calendar.save"),:type=> 'button', :class=>"btn btn-primary", :onclick => 'before_submit(this)' %>
<% else %>
<%= f.button t(:create_),:type=> 'button', :class=>"btn btn-primary", :onclick => 'before_submit(this)' %>
<% end %>
<a href="" class="btn btn-close">Cancel</a>
</div>
</div>
<script type="text/javascript">
function getFormData($form){
var unindexed_array = $form.serializeArray();
var indexed_array = {};
$.map(unindexed_array, function(n, i){
indexed_array[n['name']] = n['value'];
});
return indexed_array;
}
function convertToText(str){
// Ensure string.
var value = String(str);
// Convert encoding.
value = value.replace(/&nbsp;/gi, ' ');
value = value.replace(/&amp;/gi, '&');
// Replace `<br>`.
value = value.replace(/<br>/gi, '\n');
// Replace `<div>` (from Chrome).
value = value.replace(/<div>/gi, '\n');
// Replace `<p>` (from IE).
value = value.replace(/<p>/gi, '\n');
// Remove extra tags.
value = value.replace(/<(.*?)>/g, '');
// Trim each line.
value = value
.split('\n')
.map((line = '') => {
return line.trim();
})
.join('\n');
// No more than 2x newline, per "paragraph".
value = value.replace(/\n\n+/g, '\n\n');
// Clean up spaces.
value = value.replace(/[ ]+/g, ' ');
value = value.trim();
// Expose string.
return value;
};
function before_submit(ele){
var self = $(ele).parents('form')
var content_editables = self.find('*[contenteditable="true"]');
for (var i=0,length = content_editables.length; i<length; i++){
var tp1 = content_editables.eq(i);
tp1.siblings('input[type="hidden"]').val(convertToText(tp1.html()));
}
self.submit();
}
$('body').ready(function(){
if ($('.default_picker,.time_picker,.date_picker').find('input').length!=0){
$('.default_picker,.time_picker,.date_picker').find('.iconbtn').css('display','none')
$('.default_picker,.date_picker').each(function(i,v){
v = $(v).find('input')[0]
$(v).attr('autocomplete','off')
var org_format = $(v).data('format')
var format = org_format.toLowerCase().replace(/yyyy/,'yy')
var H_flag = false
if (org_format.search(/tt|H/)!= null ){
H_flag = true
}
var M_flag = false
if (org_format.match(/[hH].*M/)!=null){
M_flag = true
}
if (format.search(/h/)!= -1){
var result = format.match(/\W+[?=h]/)
if (result == null){
result = format.match(/h/)
}
var indice = result.index
var dateformat = format.slice(0,8)
var time_format_start = format.search(/h/)
var time_format = format.slice(time_format_start)
if (H_flag){
time_format = time_format.replace(/h/g,'H')
}
if (M_flag){
time_format = time_format.replace(/m/g,'M')
}
$(v).ui_datetimepicker({
dateFormat: dateformat,
controlType: 'select',
timeInput: true,
oneLine: true,
timeFormat: time_format
})
}else{
var show_view = ''
if (format.split(/\W/).slice(-1)[0].slice(-1)[0]=='m'){
show_view = 'month'
}
if (format.split(/\W/).slice(-1)[0].slice(-1)[0]=='y'){
show_view = 'year'
}
$(v).ui_datepicker({dateFormat: format,show_view: show_view})
}
})
$('.default_picker,.time_picker,.date_picker').find('.clearDate').click(function(){
$(this).parents('.default_picker,.time_picker,.date_picker').eq(-1).find('input').val('')
$(this).parents('.default_picker,.time_picker,.date_picker').eq(-1).find('input').trigger('change')
})
$('.time_picker input').each(function(i,v){
$(v).ui_timepicker({timeFormat: $(v).data('format'),
controlType: 'select',
timeInput: true,
oneLine: true})
})
$('.separated_picker').find('.date_picker,.time_picker').find('input').change(function(){
var parent_div = $(this).parents('.separated_picker').eq(-1)
var date_picker_value = parent_div.find('.date_picker>input').val()
var time_picker_value = parent_div.find('.time_picker>input').val()
if (date_picker_value == '' || time_picker_value == ''){
parent_div.children('input[type=hidden]').val('')
}
else{
parent_div.children('input[type=hidden]').val(date_picker_value+' '+time_picker_value)
}
})
}
$('.simple-date-picker').find('input[type="text"],select').change(function(){
var parent_div = $(this).parents('.simple-date-picker').eq(-1)
var year = parent_div.find('.span3').val()
var month = parent_div.find('.span2').val()
var day = parent_div.find('.span1').val()
if (year != '' && month != '' && day != ''){
parent_div.find('input[type="hidden"]').eq(-1).val(year+'-'+month+'-'+day)
}
});
$('.preserve_input_text').off('paste').on('paste',function(e){
$(this).html(($('<div></div>').append(e.originalEvent.clipboardData.getData('text/plain')).text()));
e.preventDefault();
});
$("#event_is_weekdays").change(function(){
if($(this).val() == "0"){
$("#Weekly_custom_panel").removeClass('hide');
}else{
$("#Weekly_custom_panel").addClass('hide');
}
})
$("#event_period").change(function(){
if($(this).val() == "Weekly"){
$("#Weekly_panel").removeClass('hide');
}else{
$("#Weekly_panel").addClass('hide');
}
})
$("#event_start").change(function(){
var _this = $(this);
var date = $.ui_datepicker.parseDate(_this.data('datepicker').settings.dateFormat, _this.val());
if($(".weekdays-checkbox:checked").length < 1){
$(".weekdays-checkbox").prop("checked", false);
$(".weekdays-checkbox").filter('[data-key="' + date.getDay().toString() + '"]').prop("checked", true);
}
var end_date = $('#event_end').val();
var start_date = _this.val();
if(end_date.length != 0 && end_date < start_date){
$('#event_end').val(start_date);
}
})
})
</script>