commit for calendar

This commit is contained in:
Harry Bomrah 2012-09-14 21:59:20 +08:00
parent 0cf2f1b9a1
commit b09b1cf2f5
16 changed files with 392 additions and 309 deletions

View File

@ -112,7 +112,7 @@
<%#= content_tag :li, link_to(t('admin.ad.all_banners'), admin_ad_banners_path), :class => active_for_action('ad_banners', 'index') %>
<%#= content_tag :li, link_to(t('admin.ad.new_banner'), new_admin_ad_banner_path), :class => active_for_action('ad_banners', 'new') %>
<%#= content_tag :li, link_to(t('admin.ad.new_image'), new_ad_image_admin_ad_banners_path), :class => active_for_action('ad_images', 'new') %>
<%= content_tag :li, link_to((t('calendar.calendars') + content_tag(:i, nil, :class => 'icon-chevron-right')).html_safe, panel_calendar_back_end_calendar_categories_path), :class => active_for_action('calendar_categories','index') %>
<%= content_tag :li, link_to((t('calendar.calendars') + content_tag(:i, nil, :class => 'icon-chevron-right')).html_safe, new_panel_calendar_back_end_cal_path), :class => active_for_action('cals','new') %>
<%#= content_tag :li, link_to(t('gallery.tags'), panel_gallery_back_end_tags_path), :class => active_for_action('/panel/gallery/back_end/tags', 'index') %>
<%#= content_tag :li, link_to(t('admin.module.authorization'),admin_module_app_manager_auth_proc_path(ModuleApp.first(conditions: {key: "gallery"}))), :class => active_for_app_auth('gallery') if (is_admin? rescue nil) %>
<% end -%>

View File

@ -1,83 +1,122 @@
$(window).load(function(){
if($('.color-picker').length > 0){
$('.color-picker').miniColors(); // just in category view
}
//created on sep 14 2012
var view_url = 'http://localhost:3000/panel/calendar/back_end/cals/';
// below calendar start
$.get(view_url+'month_view', function(data) {
$('#view_holder').html(data);
month_fn();
});
$.get(view_url+'new', function(data) {
$('#create .modal-body').html(data);
});
// view switch (for view test)
$('.mode_switch').click(function(){
var target = $(this).text();
$.get(view_url+target+'_view', function(data) {
$('#view_holder').html(data);
switch(target){
case 'month':
month_fn();
break;
case 'week':
week_fn();
break;
case 'day':
day_fn();
break;
case 'agenda':
agenda_fn();
break;
}
});
});
// month fn
var month_fn = function(){
$('.current_day_title').text('September 2012');
// month view
if($('#calendar_month').length > 0){
var $c_table = $('#calendar_month');
var sum_h = 0;
var context_h = $('#main-sidebar').outerHeight();
$('#main-wrap > *').not('#orbit_calendar, .modal').each(function(){
sum_h += $(this).outerHeight();
});
$c_table
// .height(context_h-sum_h-64)
.find('.month_row')
.not('.month_row.header')
.height((context_h-sum_h-92) / 6);
var calendarAPI = function(){
c = this;
this.event_create_div = $("#event_create");
this.event_quick_view_div = $("#event_quick_view");
this.initialize = function(){
$(window).load(function(){
c.loadMonthView();
bindHandlers();
})
var bindHandlers = function(){
$(".event").live("click",function(){
c.displayEvent();
})
$(window).resize(function(){
$c_table
.find('.month_row')
.not('.month_row.header')
.height(($('#main-sidebar').outerHeight()-sum_h-92) / 6);
$("#create_event_btn").click(function(){
c.newEvent($(this));
$(this).toggleClass("active");
return false;
})
$('.mode_switch').click(function(){
var target = $(this).text();
switch(target){
case 'month':
c.loadMonthView();
break;
case 'week':
c.loadWeekView();
break;
case 'day':
c.loadDayView();
break;
case 'agenda':
c.loadAgendaView();
break;
}
});
}
};
// week fn
var week_fn = function(){
$('.current_day_title').text('September 2 - 8, 2012');
}
this.loadMonthView = function(){
$('#view_holder').load("cals/month_view", function() {
$('.current_day_title').text('September 2012');
if($('#calendar_month').length > 0){
var $c_table = $('#calendar_month');
var sum_h = 0;
var context_h = $('#main-sidebar').outerHeight();
$('#main-wrap > *').not('#orbit_calendar, .modal').each(function(){
sum_h += $(this).outerHeight();
});
// day fn
var day_fn = function(){
$('.current_day_title').text('September 2, 2012');
$c_table
// .height(context_h-sum_h-64)
.find('.month_row')
.not('.month_row.header')
.height((context_h-sum_h-92) / 6);
$(window).resize(function(){
$c_table
.find('.month_row')
.not('.month_row.header')
.height(($('#main-sidebar').outerHeight()-sum_h-92) / 6);
});
}
})
}
// agenda fn
var agenda_fn = function(){
$('.current_day_title').text('September 2, 2012');
this.loadWeekView = function(){
$('#view_holder').load("cals/week_view", function() {
$('.current_day_title').text('September 2 - 8, 2012');
})
}
this.loadDayView = function(){
$('#view_holder').load("cals/day_view", function() {
$('.current_day_title').text('September 2, 2012');
})
}
this.loadAgendaView = function(){
$('#view_holder').load("cals/week_view", function() {
$('.current_day_title').text('September 2, 2012');
})
}
this.newEvent = function(dom){
var bindHandlers = function(){
c.event_create_div.find("button.btn-close").click(function(){
c.event_create_div.hide().empty();
dom.removeClass("active");
})
c.event_create_div.find("input[for=all_day][type=checkbox]").click(function(){
if($(this).is(":checked"))
c.event_create_div.find("#non_all_day").hide()
else
c.event_create_div.find("#non_all_day").show()
})
}
if(!dom.hasClass("active")){
c.event_create_div.load(dom.attr("href"),function(){
c.event_create_div.show();
bindHandlers();
})
}else{
c.event_create_div.hide().empty();
}
}
this.newCalendars = function(){
if($('.color-picker').length > 0){
$('.color-picker').miniColors(); // just in category view
}
}
this.displayEvent = function(){
c.event_quick_view_div.show()
}
c.initialize();
}
});

View File

@ -19,6 +19,7 @@
}
.calendar_mode {
float: right;
z-index: 2;
}
.mode_switch {
text-transform: capitalize;
@ -69,6 +70,7 @@
height: 100%;
position: absolute;
top: 0;
z-index: 1;
}
.event_holder .inner {
position: relative;

View File

@ -1,7 +0,0 @@
class Panel::Calendar::BackEnd::CalendarCategoriesController < OrbitBackendController
def index
end
end

View File

@ -6,7 +6,15 @@ class Panel::Calendar::BackEnd::CalsController < OrbitBackendController
end
def new
render :layout => false
@calendar = Cal.new
@calendars = Cal.all
debugger
end
def create
debugger
calendar = Cal.new(params[:cal])
render :json => calendar.to_json
end
def day_view

View File

@ -0,0 +1,6 @@
class Panel::Calendar::BackEnd::EventsController < OrbitBackendController
def new
render :layout => false
end
end

View File

@ -0,0 +1,9 @@
class Cal
include Mongoid::Document
include Mongoid::Timestamps
field :name, localize: true
field :color
has_many :events, :autosave => true, :dependent => :destroy
accepts_nested_attributes_for :events, :allow_destroy => true
end

View File

@ -0,0 +1,16 @@
class Event
include Mongoid::Document
include Mongoid::Timestamps
field :title
field :description
field :start_year
field :end_year
field :start_month
field :end_month
field :start_date
field :end_date
belongs_to :cal
end

View File

@ -1,91 +0,0 @@
<%= stylesheet_link_tag "jquery.miniColors" %>
<%= stylesheet_link_tag "calendar" %>
<%= javascript_include_tag "jquery.miniColors.min" %>
<% content_for :page_specific_javascript do %>
<%= javascript_include_tag "calendarAPI" %>
<% end %>
<div id="filter" class="subnav">
<div class="filters">
<div id="sort_headers" class="table-label">
<table class="table main-list">
<thead>
<tr>
<th class="span2"><span class="" title="">Key</span></th>
<th class="span2">Color</th>
<th class="span2">English</th>
<th class="span2">Chiness</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<table id="callendars" class="table main-list">
<thead>
<tr>
<th class="span2"></th>
<th class="span2"></th>
<th class="span2"></th>
<th class="span2"></th>
</tr>
</thead>
<tbody>
<tr id="" class="with_action">
<td>
key_name
<div class="quick-edit">
<ul class="nav nav-pills hide">
<li><a href="">Category Authorization</a></li>
<li><a href="">Edit</a></li>
<li><a href="">Delete</a></li>
</ul>
</div>
</td>
<td>
<span class="calendars_color_tag" style="background-color: #fc3"></span>
</td>
<td>English_title</td>
<td>Chinese_title</td>
</tr>
</tbody>
</table>
<div id="form">
<form class="new_calendar" id="new_calendar" method="post"><div><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value=""></div>
<h2>Add</h2>
<div class="row-fluid">
<div class="span3">
<label for="calendar_key">Key</label>
<input id="calendar_key" name="calendars[key]" size="30" type="text">
</div>
<div class="span2">
<label for="">Color</label>
<input type="text" name="calendar_color" class="color-picker miniColors span5" size="7" maxlength="7" autocomplete="off" value="#FFCC00">
</div>
</div>
<div>
<div class="control-group">
<label class="control-label" for="name-zh_tw">Name-chinese</label>
<div class="controls">
<input class="input-xxlarge" id="" name="" size="30" type="text">
</div>
</div>
<div class="control-group">
<label class="control-label" for="name-en">Name-english</label>
<div class="controls">
<input class="input-xxlarge" id="" name="" size="30" type="text">
</div>
</div>
</div>
<div class="form-actions pagination-right">
<input class="btn btn-primary" name="commit" type="submit" value="Submit">
</div>
</form>
</div>

View File

@ -58,10 +58,16 @@
<div class="span8">
</div>
<div class="span4">
<a id="create_event" href="" class="btn btn-primary pull-right">Add</a>
<%= link_to "Add", new_panel_calendar_back_end_event_path, :class => "btn btn-primary pull-right", :id=>"create_event_btn" %>
</div>
</div>
</div>
<div id="create" class="modal" style="right: 8px; bottom: 50px; left: auto; top: auto; width: 330px; margin: 0;">
<div class="modal-body"></div>
</div>
<div id="event_create" class="modal" style="right: 8px; bottom: 50px; left: auto; top: auto; width: 330px; margin: 0;display:none;"></div>
<div id="event_quick_view" class="modal" style="width: 300px; top: 60%;display:none"></div>
<script type="text/javascript">
var calendar = new calendarAPI();
</script>

View File

@ -85,10 +85,10 @@
<tr>
<td colspan="7"><div class="event" style="background-color: #ffcc00;">7pm - 9pm test event</div></td>
</tr>
<tr>
<td colspan="3"></td>
<td><div class="event single" style="color: #ffcc00;">7pm - 9pm test event</div></td>
<td colspan="3"></td>
<td colspan="2"></td>
<td><div class="event single" style="background-color: #ffcc00;">7pm - 9pm test event</div></td>
</tr>
</table>
</div>
@ -165,18 +165,3 @@
</table>
</div>
</div>
<div id="quick_view" class="modal" style="width: 300px; top: 60%;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h3>Event Name</h3>
</div>
<div class="modal-body">
<div class="event_summary">
Thu, September 13
</div>
</div>
<div class="modal-footer">
<a href="#" class="btn">Delete</a>
<a href="#" class="btn btn-primary">Edit</a>
</div>
</div>

View File

@ -1,116 +1,90 @@
<div class="event_controller">
<form class="form-horizontal">
<div class="row-fluid">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="row-fluid">
<input class="span12" type="text" placeholder="Event name">
</div>
<div class="row-fluid">
<input class="span12" type="text" placeholder="Location">
</div>
<div class="row-fluid">
<label class="checkbox inline">
<input type="checkbox"> All day
</label>
<label class="checkbox inline">
<input type="checkbox"> Repeat
</label>
</div>
<div class="row-fluid">
<label class="control-label span3">From</label>
<div class="row-fluid span9">
<input class="span5" type="text" placeholder="09/12/2012">
<select name="" id="" class="span4">
<option value="">1:00</option>
<option value="">1:30</option>
<option value="">2:00</option>
<option value="">2:30</option>
<option value="">3:00</option>
<option value="">3:30</option>
<option value="">4:00</option>
<option value="">4:30</option>
<option value="">5:00</option>
<option value="">5:30</option>
<option value="">6:00</option>
<option value="">6:30</option>
<option value="">7:00</option>
<option value="">7:30</option>
<option value="">8:00</option>
<option value="">8:30</option>
<option value="">9:00</option>
<option value="">9:30</option>
<option value="">10:00</option>
<option value="">10:30</option>
<option value="">11:00</option>
<option value="">11:30</option>
<option value="">12:00</option>
<option value="">12:30</option>
</select>
<select name="" id="" class="span3">
<option value="">AM</option>
<option value="">PM</option>
</select>
<%= stylesheet_link_tag "jquery.miniColors" %>
<%= stylesheet_link_tag "calendar" %>
<%= javascript_include_tag "jquery.miniColors.min" %>
<% content_for :page_specific_javascript do %>
<%= javascript_include_tag "calendarAPI" %>
<% end %>
<div id="filter" class="subnav">
<div class="filters">
<div id="sort_headers" class="table-label">
<table class="table main-list">
<thead>
<tr>
<th class="span2"><span class="" title="">Key</span></th>
<th class="span2">Color</th>
<th class="span2">English</th>
<th class="span2">Chiness</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<table id="callendars" class="table main-list">
<thead>
<tr>
<th class="span2"></th>
<th class="span2"></th>
<th class="span2"></th>
<th class="span2"></th>
</tr>
</thead>
<tbody>
<% @calendars.each do |calendar| %>
<tr id="" class="with_action">
<td>
<span class="calendars_color_tag" style="background-color: <%= calendar.color %>"></span>
<div class="quick-edit">
<ul class="nav nav-pills hide">
<li><a href="">Category Authorization</a></li>
<li><a href="">Edit</a></li>
<li><a href="">Delete</a></li>
</ul>
</div>
</td>
<% @site_valid_locales.each do |locale| %>
<td>
<% calendar.name_translations[locale] %>
</td>
<% end %>
</tr>
<% end %>
</tbody>
</table>
<div id="form">
<%= form_for @calendar, :url => {:action => "create"}, :remote => true do |f| %>
<h2>Add</h2>
<div class="row-fluid">
<label class="control-label span3">To</label>
<div class="row-fluid span9">
<input class="span5" type="text" placeholder="09/12/2012">
<select name="" id="" class="span4">
<option value="">1:00</option>
<option value="">1:30</option>
<option value="">2:00</option>
<option value="">2:30</option>
<option value="">3:00</option>
<option value="">3:30</option>
<option value="">4:00</option>
<option value="">4:30</option>
<option value="">5:00</option>
<option value="">5:30</option>
<option value="">6:00</option>
<option value="">6:30</option>
<option value="">7:00</option>
<option value="">7:30</option>
<option value="">8:00</option>
<option value="">8:30</option>
<option value="">9:00</option>
<option value="">9:30</option>
<option value="">10:00</option>
<option value="">10:30</option>
<option value="">11:00</option>
<option value="">11:30</option>
<option value="">12:00</option>
<option value="">12:30</option>
</select>
<select name="" id="" class="span3">
<option value="">AM</option>
<option value="">PM</option>
</select>
<div class="span2">
<%= label_tag("color", t("calendar.color")) %>
<%= f.text_field :color, :class => "color-picker miniColors span5", :size => "7", :maxlength => "7", :autocomplete=>"off",:value=>"FFCC00" %>
</div>
</div>
<div class="row-fluid">
<label for="" class="control-label span3">Calendars</label>
<div class="row-fluid span9">
<select name="" id="" class="span12">
<option value="">calendar 1</option>
<option value="">calendar 2</option>
<option value="">calendar 3</option>
</select>
</div>
<div>
<%= f.fields_for :name_translations do |name| %>
<% @site_valid_locales.each_with_index do |locale, i| %>
<div class="control-group">
<%= label_tag(locale, t("calendar.name")+"-"+I18nVariable.from_locale(locale)) %>
<div class="controls">
<%= name.text_field locale, :class => "input-xxlarge", :size=>"30" %>
</div>
</div>
<% end %>
<% end %>
</div>
<div class="row-fluid">
<label for="" class="control-label span3">Note</label>
<div class="row-fluid span9">
<textarea name="" id="" cols="30" rows="3" class="span12"></textarea>
</div>
</div>
<div class="row-fluid">
<div class="span9 offset3">
<button class="btn">Delete</button>
<button class="btn">Cancel</button>
<button class="btn">Create</button>
</div>
</div>
</form>
</div>
<div class="form-actions pagination-right">
<%= f.submit t("calendar.save"), :class=>"btn btn-primary" %>
</div>
<% end %>
</div>
<script type="text/javascript">
var calendar = new calendarAPI()
calendar.newCalendars();
</script>

View File

@ -0,0 +1,120 @@
<div class="modal-body">
<div class="event_controller">
<form class="form-horizontal">
<div class="row-fluid">
<button type="button" class="close btn-close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="row-fluid">
<input class="span12" type="text" placeholder="Event name">
</div>
<div class="row-fluid">
<input class="span12" type="text" placeholder="Location">
</div>
<div class="row-fluid">
<label class="checkbox inline">
<input type="checkbox" for="all_day"> All day
</label>
<label class="checkbox inline">
<input type="checkbox"> Repeat
</label>
</div>
<div id="non_all_day">
<div class="row-fluid">
<label class="control-label span3">From</label>
<div class="row-fluid span9">
<input class="span5" type="text" placeholder="09/12/2012">
<select name="" id="" class="span4">
<option value="">1:00</option>
<option value="">1:30</option>
<option value="">2:00</option>
<option value="">2:30</option>
<option value="">3:00</option>
<option value="">3:30</option>
<option value="">4:00</option>
<option value="">4:30</option>
<option value="">5:00</option>
<option value="">5:30</option>
<option value="">6:00</option>
<option value="">6:30</option>
<option value="">7:00</option>
<option value="">7:30</option>
<option value="">8:00</option>
<option value="">8:30</option>
<option value="">9:00</option>
<option value="">9:30</option>
<option value="">10:00</option>
<option value="">10:30</option>
<option value="">11:00</option>
<option value="">11:30</option>
<option value="">12:00</option>
<option value="">12:30</option>
</select>
<select name="" id="" class="span3">
<option value="">AM</option>
<option value="">PM</option>
</select>
</div>
</div>
<div class="row-fluid">
<label class="control-label span3">To</label>
<div class="row-fluid span9">
<input class="span5" type="text" placeholder="09/12/2012">
<select name="" id="" class="span4">
<option value="">1:00</option>
<option value="">1:30</option>
<option value="">2:00</option>
<option value="">2:30</option>
<option value="">3:00</option>
<option value="">3:30</option>
<option value="">4:00</option>
<option value="">4:30</option>
<option value="">5:00</option>
<option value="">5:30</option>
<option value="">6:00</option>
<option value="">6:30</option>
<option value="">7:00</option>
<option value="">7:30</option>
<option value="">8:00</option>
<option value="">8:30</option>
<option value="">9:00</option>
<option value="">9:30</option>
<option value="">10:00</option>
<option value="">10:30</option>
<option value="">11:00</option>
<option value="">11:30</option>
<option value="">12:00</option>
<option value="">12:30</option>
</select>
<select name="" id="" class="span3">
<option value="">AM</option>
<option value="">PM</option>
</select>
</div>
</div>
</div>
<div class="row-fluid">
<label for="" class="control-label span3">Calendars</label>
<div class="row-fluid span9">
<select name="" id="" class="span12">
<option value="">calendar 1</option>
<option value="">calendar 2</option>
<option value="">calendar 3</option>
</select>
</div>
</div>
<div class="row-fluid">
<label for="" class="control-label span3">Note</label>
<div class="row-fluid span9">
<textarea name="" id="" cols="30" rows="3" class="span12"></textarea>
</div>
</div>
<div class="row-fluid">
<div class="span9 offset3">
<button class="btn">Delete</button>
<button class="btn btn-close">Cancel</button>
<button class="btn">Create</button>
</div>
</div>
</form>
</div>
</div>

View File

@ -0,0 +1,13 @@
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h3>Event Name</h3>
</div>
<div class="modal-body">
<div class="event_summary">
Thu, September 13
</div>
</div>
<div class="modal-footer">
<a href="#" class="btn">Delete</a>
<a href="#" class="btn btn-primary">Edit</a>
</div>

View File

@ -1,3 +1,6 @@
en:
calendar:
calendars: Calendars
calendars: Calendars
color: Color
name: Name
save: Save

View File

@ -7,8 +7,8 @@ Rails.application.routes.draw do
match 'cals/month_view' => 'cals#month_view', :via => :get
match 'cals/day_view' => 'cals#day_view', :via => :get
match 'cals/week_view' => 'cals#week_view', :via => :get
resources :cals
resources :calendar_categories
resources :cals
resources :events
end
end