calendar updated for week

This commit is contained in:
Harry Bomrah 2012-10-16 21:50:46 +08:00
parent 189fa553c5
commit 0971e00511
10 changed files with 417 additions and 127 deletions

View File

@ -135,7 +135,14 @@ var calendarAPI = function(){
} }
}) })
$("button#today_btn").click(function(){ $("button#today_btn").click(function(){
c.loadMonthView(); switch (c.view){
case "week":
c.loadWeekView();
break;
case "month":
c.loadMonthView();
break;
}
}) })
} }
} }
@ -231,13 +238,13 @@ var calendarAPI = function(){
$eventrow.html('<td colspan="'+colspan+'" class="main_td" pos="'+pos+'"><div class="event" link="'+evnt.show_link+'" style="background-color: '+evnt.color+';">'+evnt.title+'</div></td>'); $eventrow.html('<td colspan="'+colspan+'" class="main_td" pos="'+pos+'"><div class="event" link="'+evnt.show_link+'" style="background-color: '+evnt.color+';">'+evnt.title+'</div></td>');
}else{ }else{
if($eventrow.html()==""){ if($eventrow.html()==""){
$eventrow.append('<td colspan="'+(pos-1)+'">'); $eventrow.append('<td colspan="'+(pos-1)+'"></td>');
}else{ }else{
if((lastno+1)!=thisno){ if((lastno+1)!=thisno){
var inposition = parseInt($eventrow.find("td.main_td:last").attr("pos")); var inposition = parseInt($eventrow.find("td.main_td:last").attr("pos"));
var curcolspan = $eventrow.find("td.main_td:last").attr("colspan"); var curcolspan = $eventrow.find("td.main_td:last").attr("colspan");
var colspan = pos - (inposition+parseInt(curcolspan)); var colspan = pos - (inposition+parseInt(curcolspan));
$eventrow.append('<td colspan="'+colspan+'">'); $eventrow.append('<td colspan="'+colspan+'"></td>');
} }
} }
var colspan = 0; var colspan = 0;
@ -297,7 +304,41 @@ var calendarAPI = function(){
} }
this.getEventsForWeek = function(week,year){ this.getEventsForWeek = function(week,year){
$.getJSON("cals/getWeekEvents",{"week":week,"year":year},function(events){ $.getJSON("cals/getWeekEvents",{"week":week,"year":year},function(events){
$.each(events,function(i,evnt){
if(evnt.all_day){
$(".week_day_header[date="+evnt.start_date+"]").append('<div class="event half" link="'+evnt.show_link+'" style="background-color: '+evnt.color+';color:#fff;"><dl><dt>'+evnt.title+'</dt><dd></dd></dl></div>');
}else{
var starttime,endtime,displaystarttime,displayendtime;
if(evnt.start_am_pm == "AM")
starttime = evnt.start_time;
else
starttime = evnt.start_time + 12;
if(evnt.end_am_pm == "AM")
endtime = evnt.end_time;
else
endtime = evnt.end_time + 12;
var temp = parseInt(evnt.start_time);
if (evnt.start_time > temp)
displaystarttime = temp + ":30 " + evnt.start_am_pm;
else
displaystarttime = temp + ":00 " + evnt.start_am_pm;
temp = parseInt(evnt.end_time);
if (evnt.end_time > temp)
displayendtime = temp + ":30 " + evnt.end_am_pm;
else
displayendtime = temp + ":00 " + evnt.end_am_pm;
var toppx = ((starttime * 2) * 19) + starttime;
var eventdom = $('<div class="event" link="'+evnt.show_link+'" style="background-color: '+evnt.color+';color:#fff; top:'+toppx+'px;"><dl><dt>'+displaystarttime+' - '+displayendtime+'</dt><dd>'+evnt.title+'</dd></dl></div>');
$(".week_day_body[date="+evnt.start_date+"] .inner").append(eventdom);
}
})
}) })
} }
this.loadDayView = function(){ this.loadDayView = function(){
@ -306,7 +347,7 @@ var calendarAPI = function(){
}) })
} }
this.loadAgendaView = function(){ this.loadAgendaView = function(){
$('#view_holder').load("cals/week_view", function() { $('#view_holder').load("cals/agenda_view", function() {
$('.current_day_title').text('September 2, 2012'); $('.current_day_title').text('September 2, 2012');
}) })
} }

View File

@ -30,10 +30,21 @@ class Panel::Calendar::BackEnd::CalsController < OrbitBackendController
end end
def week_view def week_view
week = params[:week] week = params[:week].to_i
year = params[:year] year = params[:year].to_i
@dates = week_dates(week,year) @dates = week_dates(week,year)
@range = week_range(week,year) @range = week_range(week,year)
@d = getWeekDataSet(week,year)
t = Time.now
dt = Date.new(t.year,t.month,t.day)
today_cur_week = dt.strftime("%U").to_i
if week == today_cur_week && t.year == year
@today = @d.index(t.day.to_s)
else
@today = 20
end
@hours = getHours(12)
render :layout => false render :layout => false
end end
@ -97,10 +108,31 @@ class Panel::Calendar::BackEnd::CalsController < OrbitBackendController
end end
def get_week_events def get_week_events
week = params[:week] week = params[:week].to_i
year = params[:year] year = params[:year].to_i
events = Event.where(:start_week => week).and(:start_year => year) @d = getWeekDataSet(week,year)
render :json => events.to_json events = Event.where(:start_week.lte => week).and(:start_year => year).and(:end_week.gte => week).and(:start_year => year)
@events = Array.new
events.each_with_index do |event,i|
# @temp = Array.new
no_of_days = event.total_days
startdt = event.start_date
if event.start_week < week
startdt = @d[0].to_i
event.all_day = true
end
no_of_days = no_of_days.to_i
no_of_days += 1
all_day = event.all_day
if no_of_days > 1
all_day = true
end
color = Cal.find(event.cal_id).color
@events << {"id"=>event.id,"index"=>i,"start_date"=>startdt,"all_day"=>all_day, "start_week" => event.start_week, "end_week" => event.end_week, "total_days" => no_of_days, "title" => event.title,"color"=>color,"show_link"=>panel_calendar_back_end_event_path(event),"start_time"=>event.start_time,"end_time"=>event.end_time,"start_am_pm"=>event.start_am_pm,"end_am_pm"=>event.end_am_pm}
end
render :json => @events.to_json
end end
def week_number_test def week_number_test

View File

@ -42,6 +42,13 @@ class Panel::Calendar::BackEnd::EventsController < OrbitBackendController
# if end_am_pm == "PM" # if end_am_pm == "PM"
# temp_end_time = $endtime + 12 # temp_end_time = $endtime + 12
# end # end
if params[:all_day]
all_day = true
$starttime = 0
$endtime = 0
else
all_day = false
end
final_start_time = Date.new(start_year.to_i,start_month.to_i,start_date.to_i) final_start_time = Date.new(start_year.to_i,start_month.to_i,start_date.to_i)
final_end_time = Date.new(end_year.to_i,end_month.to_i,end_date.to_i) final_end_time = Date.new(end_year.to_i,end_month.to_i,end_date.to_i)
@ -67,6 +74,7 @@ class Panel::Calendar::BackEnd::EventsController < OrbitBackendController
@event.total_days = total_days @event.total_days = total_days
@event.start_week = start_week @event.start_week = start_week
@event.end_week = end_week @event.end_week = end_week
@event.all_day = all_day
@event.save! @event.save!
respond_to do |h| respond_to do |h|
@ -81,6 +89,12 @@ class Panel::Calendar::BackEnd::EventsController < OrbitBackendController
@end_day_name = getDayName(@event.end_date,@event.end_month,@event.end_year) @end_day_name = getDayName(@event.end_date,@event.end_month,@event.end_year)
render :layout=>false render :layout=>false
end end
def destroy
event = Event.find(params[:id])
event.delete
render :json => {"success"=>"true"}.to_json
end
end end

View File

@ -131,6 +131,55 @@ module Panel::Calendar::BackEnd::CalsHelper
end end
range range
end end
def getWeekDataSet(week_num,year)
year = year.to_i
week_num = week_num.to_i
dates = Array.new
if week_num == 1
weekstartday = monthStartDay(1,year)
d = 31
x = 0
for i in d - (weekstartday - 2)..d
dates << i.to_s
x = x + 1
end
for i in 1..8 - weekstartday
dates << i.to_s
x = x + 1
end
else
week_start = Date.commercial(year, week_num-1, 7)
month = week_start.strftime("%m")
month_days = getMonthDays(year)
date = week_start.strftime("%d")
x = date.to_i
for i in 0..6
d = x + i
if d > month_days[month.to_i]
d = d - month_days[month.to_i]
end
dates << d.to_s
end
end
dates
end
def getHours(format)
hours = Array.new
if format == 12
hours << 12
for i in 1..11
hours << i
end
elsif format == 24
for i in 0..23
hours << i
end
end
hours
end
end end

View File

@ -19,6 +19,7 @@ class Event
field :final_start_time, type: Date field :final_start_time, type: Date
field :final_end_time, type: Date field :final_end_time, type: Date
field :total_days, type: Integer field :total_days, type: Integer
field :all_day, type: Boolean
belongs_to :cal belongs_to :cal

View File

@ -1,4 +1,4 @@
<div id="calendar_agenda"> <!-- <div id="calendar_agenda">
<table class="table"> <table class="table">
<thead> <thead>
<tr> <tr>
@ -45,4 +45,202 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> -->
<div id="calendar_week">
<table class="table header">
<tr>
<th style="width: 44px;"></th>
<th>Sun 9/11</th>
<th>Mon 9/12</th>
<th class="today">Tue 9/13</th>
<th>Wed 9/14</th>
<th>Thu 9/15</th>
<th>Fri 9/16</th>
<th>Sat 9/17</th>
</tr>
<tr>
<td style="border: 0; background: none;"></td>
<td class="all_day_event week_day">
<div class="event half" style="background-color: #ccffee;">
<dl>
<dt>10:30am - template</dt>
<dd></dd>
</dl>
</div>
</td>
<td class="all_day_event week_day">
</td>
<td class="all_day_event week_day"></td>
<td class="all_day_event week_day">
<div class="event half" style="background-color: #ccffee;">
<dl>
<dt>10:30am - template</dt>
<dd></dd>
</dl>
</div>
</td>
<td class="all_day_event week_day"></td>
<td class="all_day_event week_day"></td>
<td class="all_day_event week_day"></td>
</tr>
</table>
<div class="event_list">
<table class="table cell_map">
<tr height="1">
<td style="width: 60px;"></td>
<td colspan="7" style="position: relative;">
<div class="cell_wrapper">
<div class="cell">
<div class="divide"></div>
</div>
<div class="cell">
<div class="divide"></div>
</div>
<div class="cell">
<div class="divide"></div>
</div>
<div class="cell">
<div class="divide"></div>
</div>
<div class="cell">
<div class="divide"></div>
</div>
<div class="cell">
<div class="divide"></div>
</div>
<div class="cell">
<div class="divide"></div>
</div>
<div class="cell">
<div class="divide"></div>
</div>
<div class="cell">
<div class="divide"></div>
</div>
<div class="cell">
<div class="divide"></div>
</div>
<div class="cell">
<div class="divide"></div>
</div>
<div class="cell">
<div class="divide"></div>
</div>
<div class="cell">
<div class="divide"></div>
</div>
<div class="cell">
<div class="divide"></div>
</div>
<div class="cell">
<div class="divide"></div>
</div>
<div class="cell">
<div class="divide"></div>
</div>
<div class="cell">
<div class="divide"></div>
</div>
<div class="cell">
<div class="divide"></div>
</div>
<div class="cell">
<div class="divide"></div>
</div>
<div class="cell">
<div class="divide"></div>
</div>
<div class="cell">
<div class="divide"></div>
</div>
<div class="cell">
<div class="divide"></div>
</div>
<div class="cell">
<div class="divide"></div>
</div>
<div class="cell">
<div class="divide"></div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="day_time">12am</div>
<div class="day_time">1am</div>
<div class="day_time">2am</div>
<div class="day_time">3am</div>
<div class="day_time">4am</div>
<div class="day_time">5am</div>
<div class="day_time">6am</div>
<div class="day_time">7am</div>
<div class="day_time">8am</div>
<div class="day_time">9am</div>
<div class="day_time">10am</div>
<div class="day_time">11am</div>
<div class="day_time">12am</div>
<div class="day_time">1pm</div>
<div class="day_time">2pm</div>
<div class="day_time">3pm</div>
<div class="day_time">4pm</div>
<div class="day_time">5pm</div>
<div class="day_time">6pm</div>
<div class="day_time">7pm</div>
<div class="day_time">8pm</div>
<div class="day_time">9pm</div>
<div class="day_time">10pm</div>
<div class="day_time">11pm</div>
</td>
<td class="week_day">
<div class="event_holder">
<div class="inner">
</div>
</div>
</td>
<td class="week_day">
<div class="event_holder">
<div class="inner">
</div>
</div>
</td>
<td class="week_day today">
<div class="event_holder">
<div class="inner">
<div class="event" style="background-color: #ccffee; top: 117px;">
<dl>
<dt>10:30am - 11:00am</dt>
<dd>template</dd>
</dl>
</div>
</div>
</div>
</td>
<td class="week_day">
<div class="event_holder">
<div class="inner">
</div>
</div>
</td>
<td class="week_day">
<div class="event_holder">
<div class="inner">
</div>
</div>
</td>
<td class="week_day">
<div class="event_holder">
<div class="inner">
</div>
</div>
</td>
<td class="week_day">
<div class="event_holder">
<div class="inner">
</div>
</div>
</td>
</tr>
</table>
</div>
</div> </div>

View File

@ -9,28 +9,33 @@
</tr> </tr>
<tr> <tr>
<td style="border: 0; background: none;"></td> <td style="border: 0; background: none;"></td>
<td class="all_day_event week_day"> <% @d.each_with_index do |dt,i| %>
<% if @today == i %>
<td class="all_day_event week_day week_day_header today" date='<%= dt %>'></td>
<% else %>
<td class="all_day_event week_day week_day_header" date='<%= dt %>'></td>
<% end %>
<% end %>
<!-- <div class="event half" style="background-color: #ccffee;"> <!-- <div class="event half" style="background-color: #ccffee;">
<dl> <dl>
<dt>10:30am - template</dt> <dt>10:30am - template</dt>
<dd></dd> <dd></dd>
</dl> </dl>
</div> --> </div> -->
</td> <!-- <td class="all_day_event week_day">
<td class="all_day_event week_day">
</td> </td>
<td class="all_day_event week_day"></td> <td class="all_day_event week_day"></td>
<td class="all_day_event week_day"> <td class="all_day_event week_day">
<!-- <div class="event half" style="background-color: #ccffee;"> <div class="event half" style="background-color: #ccffee;">
<dl> <dl>
<dt>10:30am - template</dt> <dt>10:30am - template</dt>
<dd></dd> <dd></dd>
</dl> </dl>
</div> --> </div>
</td> </td>
<td class="all_day_event week_day"></td> <td class="all_day_event week_day"></td>
<td class="all_day_event week_day"></td> <td class="all_day_event week_day"></td>
<td class="all_day_event week_day"></td> <td class="all_day_event week_day"></td> -->
</tr> </tr>
</table> </table>
<div class="event_list"> <div class="event_list">
@ -39,84 +44,26 @@
<td style="width: 60px;"></td> <td style="width: 60px;"></td>
<td colspan="7" style="position: relative;"> <td colspan="7" style="position: relative;">
<div class="cell_wrapper"> <div class="cell_wrapper">
<div class="cell"> <% @hours.each do |hour| %>
<div class="divide"></div> <div class="cell">
</div> <div class="divide"></div>
<div class="cell"> </div>
<div class="divide"></div> <div class="cell">
</div> <div class="divide"></div>
<div class="cell"> </div>
<div class="divide"></div> <% end %>
</div>
<div class="cell">
<div class="divide"></div>
</div>
<div class="cell">
<div class="divide"></div>
</div>
<div class="cell">
<div class="divide"></div>
</div>
<div class="cell">
<div class="divide"></div>
</div>
<div class="cell">
<div class="divide"></div>
</div>
<div class="cell">
<div class="divide"></div>
</div>
<div class="cell">
<div class="divide"></div>
</div>
<div class="cell">
<div class="divide"></div>
</div>
<div class="cell">
<div class="divide"></div>
</div>
<div class="cell">
<div class="divide"></div>
</div>
<div class="cell">
<div class="divide"></div>
</div>
<div class="cell">
<div class="divide"></div>
</div>
<div class="cell">
<div class="divide"></div>
</div>
<div class="cell">
<div class="divide"></div>
</div>
<div class="cell">
<div class="divide"></div>
</div>
<div class="cell">
<div class="divide"></div>
</div>
<div class="cell">
<div class="divide"></div>
</div>
<div class="cell">
<div class="divide"></div>
</div>
<div class="cell">
<div class="divide"></div>
</div>
<div class="cell">
<div class="divide"></div>
</div>
<div class="cell">
<div class="divide"></div>
</div>
</div> </div>
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td>
<div class="day_time">12am</div> <% @hours.each do |hour| %>
<div class="day_time"><%= hour %>am</div>
<% end %>
<% @hours.each do |hour| %>
<div class="day_time"><%= hour %>pm</div>
<% end %>
<!-- <div class="day_time">12am</div>
<div class="day_time">1am</div> <div class="day_time">1am</div>
<div class="day_time">2am</div> <div class="day_time">2am</div>
<div class="day_time">3am</div> <div class="day_time">3am</div>
@ -128,7 +75,7 @@
<div class="day_time">9am</div> <div class="day_time">9am</div>
<div class="day_time">10am</div> <div class="day_time">10am</div>
<div class="day_time">11am</div> <div class="day_time">11am</div>
<div class="day_time">12am</div> <div class="day_time">12pm</div>
<div class="day_time">1pm</div> <div class="day_time">1pm</div>
<div class="day_time">2pm</div> <div class="day_time">2pm</div>
<div class="day_time">3pm</div> <div class="day_time">3pm</div>
@ -139,15 +86,22 @@
<div class="day_time">8pm</div> <div class="day_time">8pm</div>
<div class="day_time">9pm</div> <div class="day_time">9pm</div>
<div class="day_time">10pm</div> <div class="day_time">10pm</div>
<div class="day_time">11pm</div> <div class="day_time">11pm</div> -->
</td> </td>
<td class="week_day"> <% @d.each_with_index do |dt,i| %>
<div class="event_holder"> <% if i == @today %>
<div class="inner"> <td class="week_day today week_day_body" date='<%= dt %>'>
<% else %>
<td class="week_day week_day_body" date='<%= dt %>'>
<% end %>
<div class="event_holder">
<div class="inner">
</div>
</div> </div>
</div> </td>
</td> <% end %>
<td class="week_day"> <!-- <td class="week_day">
<div class="event_holder"> <div class="event_holder">
<div class="inner"> <div class="inner">
</div> </div>
@ -188,7 +142,7 @@
<div class="inner"> <div class="inner">
</div> </div>
</div> </div>
</td> </td> -->
</tr> </tr>
</table> </table>
</div> </div>

View File

@ -11,7 +11,7 @@
<div class="row-fluid"> <div class="row-fluid">
<% if !@all_day_disabled %> <% if !@all_day_disabled %>
<label class="checkbox inline"> <label class="checkbox inline">
<input type="checkbox" for="all_day"> All day <input type="checkbox" name="all_day" for="all_day"> All day
</label> </label>
<% end %> <% end %>
<label class="checkbox inline"> <label class="checkbox inline">
@ -25,29 +25,29 @@
<input class="span5" type="text" value="<%= @placeholder %>" name="start_date" placeholder="<%= @placeholder %>"> <input class="span5" type="text" value="<%= @placeholder %>" name="start_date" placeholder="<%= @placeholder %>">
<select name="start_time" class="span4"> <select name="start_time" class="span4">
<option value="1.00">1:00</option> <option value="1.00">1:00</option>
<option value="1.30">1:30</option> <option value="1.50">1:30</option>
<option value="2.00">2:00</option> <option value="2.00">2:00</option>
<option value="2.30">2:30</option> <option value="2.50">2:30</option>
<option value="3.00">3:00</option> <option value="3.00">3:00</option>
<option value="3.30">3:30</option> <option value="3.50">3:30</option>
<option value="4.00">4:00</option> <option value="4.00">4:00</option>
<option value="4.30">4:30</option> <option value="4.50">4:30</option>
<option value="5.00">5:00</option> <option value="5.00">5:00</option>
<option value="5.30">5:30</option> <option value="5.50">5:30</option>
<option value="6.00">6:00</option> <option value="6.00">6:00</option>
<option value="6.30">6:30</option> <option value="6.50">6:30</option>
<option value="7.00">7:00</option> <option value="7.00">7:00</option>
<option value="7.30">7:30</option> <option value="7.50">7:30</option>
<option value="8.00">8:00</option> <option value="8.00">8:00</option>
<option value="8.30">8:30</option> <option value="8.50">8:30</option>
<option value="9.00">9:00</option> <option value="9.00">9:00</option>
<option value="9.30">9:30</option> <option value="9.50">9:30</option>
<option value="10.00">10:00</option> <option value="10.00">10:00</option>
<option value="10.30">10:30</option> <option value="10.50">10:30</option>
<option value="11.00">11:00</option> <option value="11.00">11:00</option>
<option value="11.30">11:30</option> <option value="11.50">11:30</option>
<option value="12.00">12:00</option> <option value="12.00">12:00</option>
<option value="12.30">12:30</option> <option value="12.50">12:30</option>
</select> </select>
<select name="start_am_pm" class="span3"> <select name="start_am_pm" class="span3">
<option value="AM">AM</option> <option value="AM">AM</option>
@ -61,29 +61,29 @@
<input class="span5" type="text" name="end_date" value="<%= @placeholder %>" placeholder="<%= @placeholder %>"> <input class="span5" type="text" name="end_date" value="<%= @placeholder %>" placeholder="<%= @placeholder %>">
<select name="end_time" class="span4"> <select name="end_time" class="span4">
<option value="1.00">1:00</option> <option value="1.00">1:00</option>
<option value="1.30">1:30</option> <option value="1.50">1:30</option>
<option value="2.00">2:00</option> <option value="2.00">2:00</option>
<option value="2.30">2:30</option> <option value="2.50">2:30</option>
<option value="3.00">3:00</option> <option value="3.00">3:00</option>
<option value="3.30">3:30</option> <option value="3.50">3:30</option>
<option value="4.00">4:00</option> <option value="4.00">4:00</option>
<option value="4.30">4:30</option> <option value="4.50">4:30</option>
<option value="5.00">5:00</option> <option value="5.00">5:00</option>
<option value="5.30">5:30</option> <option value="5.50">5:30</option>
<option value="6.00">6:00</option> <option value="6.00">6:00</option>
<option value="6.30">6:30</option> <option value="6.50">6:30</option>
<option value="7.00">7:00</option> <option value="7.00">7:00</option>
<option value="7.30">7:30</option> <option value="7.50">7:30</option>
<option value="8.00">8:00</option> <option value="8.00">8:00</option>
<option value="8.30">8:30</option> <option value="8.50">8:30</option>
<option value="9.00">9:00</option> <option value="9.00">9:00</option>
<option value="9.30">9:30</option> <option value="9.50">9:30</option>
<option value="10.00">10:00</option> <option value="10.00">10:00</option>
<option value="10.30">10:30</option> <option value="10.50">10:30</option>
<option value="11.00">11:00</option> <option value="11.00">11:00</option>
<option value="11.30">11:30</option> <option value="11.50">11:30</option>
<option value="12.00">12:00</option> <option value="12.00">12:00</option>
<option value="12.30">12:30</option> <option value="12.50">12:30</option>
</select> </select>
<select name="end_am_pm" class="span3"> <select name="end_am_pm" class="span3">
<option value="AM">AM</option> <option value="AM">AM</option>

View File

@ -13,6 +13,6 @@
</div> </div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<a href="#" class="btn">Delete</a> <%= link_to "Delete", panel_calendar_back_end_event_path(@event),:class => "btn", :method => :delete, :remote => true %>
<a href="#" class="btn btn-primary">Edit</a> <a href="#" class="btn btn-primary">Edit</a>
</div> </div>

View File

@ -1,3 +1,4 @@
<!-- <form class="form-horizontal"> --> <!-- <form class="form-horizontal"> -->
<%= form_for @newlocation, :url=>{:action => "create"}, :remote => true, :class=>"form-horizontal" do |f| %> <%= form_for @newlocation, :url=>{:action => "create"}, :remote => true, :class=>"form-horizontal" do |f| %>
<div class="control-group"> <div class="control-group">