outsource modal, introduce peaktime page

modal uses a separate template file now
the weekdays edit modal is WIP

lib/NGCP/Panel/Controller/Billing.pm

@@ -7,8 +7,11 @@ BEGIN { extends 'Catalyst::Controller'; }
 use NGCP::Panel::Form::BillingProfile;
 use NGCP::Panel::Form::BillingFee;
 use NGCP::Panel::Form::BillingZone;
+use NGCP::Panel::Form::BillingPeaktimeWeekdays;
 use NGCP::Panel::Utils;
 
+my @WEEKDAYS = qw(Monday Tuesday Wednesday Thursday Friday Saturday Sunday);
+
 sub profile_list :Chained('/') :PathPart('billing') :CaptureArgs(0) :Args(0) {
     my ( $self, $c ) = @_;
     
@@ -326,6 +329,60 @@ sub zones_delete :Chained('zones_base') :PathPart('delete') :Args(0) {
     $c->response->redirect($c->stash->{zones_root_uri});
 }
 
+sub peaktimes_list :Chained('base') :PathPart('peaktimes') :CaptureArgs(0) {
+    my ($self, $c) = @_;
+    
+    my @weekdays;
+    for(0 .. 6) {
+        $weekdays[$_] = {
+            name => $WEEKDAYS[$_],
+            ranges => [],
+            edit_link => $c->uri_for_action("/billing/peaktime_weekdays_edit",
+                [$c->req->captures->[0], $_]),
+        };
+    }
+    
+    my $rs = $c->stash->{profile_result}->billing_peaktime_weekdays;
+    
+    foreach my $range ($rs->all) {
+        push @{ $weekdays[$range->weekday]->{ranges} }, {
+            start => $range->start,
+            end => $range->end,
+            id => $range->id,
+        }
+    }
+    
+    $c->stash(weekdays => \@weekdays);
+    $c->stash(template => 'billing/peaktimes.tt');
+}
+
+sub peaktimes :Chained('peaktimes_list') :PathPart('') :Args(0) {
+    my ($self, $c) = @_;
+}
+
+sub peaktime_weekdays_base :Chained('peaktimes_list') :PathPart('weekday') :CaptureArgs(1) {
+    my ($self, $c, $weekday_id) = @_;
+    unless (defined $weekday_id && $weekday_id >= 0 && $weekday_id <= 6) {
+        $c->flash(messages => [{
+            type => 'error',
+            text => 'This weekday does not exist.'
+        }]);
+        $c->response->redirect($c->uri_for_action(
+            "/billing/peaktimes", [$c->req->captures->[0]],
+        ));
+    }
+    $c->stash(weekday => $c->stash->{weekdays}->[$weekday_id]);
+}
+
+sub peaktime_weekdays_edit :Chained('peaktime_weekdays_base') :PathPart('edit') :Args(0) {
+    my ($self, $c) = @_;
+    
+    my $form = NGCP::Panel::Form::BillingPeaktimeWeekdays->new;
+    
+    $c->stash(form => $form);
+    $c->stash(edit_flag => 1);
+}
+
 __PACKAGE__->meta->make_immutable;
 
 1;

lib/NGCP/Panel/Form/BillingPeaktimeWeekdays.pm

@@ -0,0 +1,57 @@
+package NGCP::Panel::Form::BillingPeaktimeWeekdays;
+
+use HTML::FormHandler::Moose;
+use Moose;
+extends 'HTML::FormHandler';
+use Moose::Util::TypeConstraints;
+
+has_field 'weekday' => (
+    type => 'Hidden',
+);
+
+has_field 'start' => ( 
+    type => 'Text',
+    do_label => 0,
+    do_wrapper => 0,
+);
+
+has_field 'end' => (
+    type => 'Text',
+    do_label => 0,
+    do_wrapper => 0,
+);
+
+has_field 'add' => (
+    type => 'Submit',
+    value => 'Add',
+    element_class => [qw/btn btn-primary/],
+    do_label => 0,
+    do_wrapper => 0,
+);
+
+1;
+
+__END__
+
+=head1 NAME
+
+NGCP::Panel::Form::BillingPeaktimeWeekdays
+
+=head1 DESCRIPTION
+
+Preferences Form.
+
+=head1 METHODS
+
+=head1 AUTHOR
+
+Gerhard Jungwirth
+
+=head1 LICENSE
+
+This library is free software. You can redistribute it and/or modify
+it under the same terms as Perl itself.
+
+=cut
+
+# vim: set tabstop=4 expandtab:

share/static/css/main.css

@@ -80,6 +80,7 @@ table.ngcp-datatable .headerSortUp:after {
 }
 
 .ngcp-actions-column { /* TODO: use responsive design */
+    width: 10px;
     white-space: nowrap;
 }
 

share/templates/billing/peaktimes.tt

@@ -0,0 +1,76 @@
+[% site_config.title = 'Off-peak-times for ' _ profile.name -%]
+
+<a href="[% c.uri_for() %]">&lt; Back</a>
+
+[% IF messages -%]
+<div class="row">
+    [% FOREACH m IN messages -%]
+        <div class="alert alert-[% m.type %]">[% m.text %]</div>
+    [% END -%]
+</div>
+[% END -%]
+
+<div class="ngcp-separator"></div>
+
+<h3>Weekdays</h3>
+
+<table class="table table-bordered table-striped table-highlight table-hover">
+    <thead>
+        <tr>
+            <th>Weekday</th>
+            <th>Start - End</th>
+            <th class="ngcp-actions-column"></th>[% #Actions %]
+        </tr>
+    </thead>
+    <tbody>
+    [% FOR w IN weekdays %]
+        <tr class="sw_action_row">
+            <td>[% w.name %]</td>
+            <td>
+            [% FOR r IN w.ranges %]
+                [% r.start %] – [% r.end %] <br/>
+            [% END %]
+            </td>
+            <td class="ngcp-actions-column">
+            [% IF w.edit_link %]
+                <div class="sw_actions pull-right">
+                    <a class="btn btn-small btn-primary" href="[% w.edit_link %]">
+                        <i class="icon-edit"></i> Edit
+                    </a>
+                </div>
+            [% END %]
+            </td>
+        </tr>
+    [% END %]
+    </tbody>
+</table>
+
+<h3>Dates</h3>
+
+
+[% IF edit_flag -%]
+[% 
+    PROCESS "helpers/modal.tt";
+    modal_header(m.name = weekday.name);
+-%]
+
+<div class="modal-body">
+    [% FOREACH r IN weekday.ranges %]
+        <input type="text" value="[% r.start %]" disabled="disabled"> –
+        <input type="text" value="[% r.end %]" disabled="disabled">
+        <a href="?delete=[% r.id %]"><i class="icon-trash"></i></a>
+        <br />
+    [% END %]
+    <form action="[% form.action || c.uri_for(c.action,c.req.captures) %]" method="POST">
+        [% form.field('start').render %] –
+        [% form.field('end').render %]
+        [% form.field('add').render %]
+    </form>
+</div>
+
+[%        
+    modal_footer();
+    modal_script(m.close_target = c.uri_for_action('/billing/peaktimes', [c.req.captures.0]));
+-%]
+[% END -%]
+[% # vim: set tabstop=4 syntax=html expandtab: -%]

share/templates/helpers/datatables.tt

@@ -110,28 +110,14 @@ $(document).ready(function() {
 </table>
 
 [% IF helper.edit_flag || helper.create_flag == 1 -%]
-<div id="mod_edit" class="modal hide ngcp-modal">
+[%
-    <div class="modal-header">
+    PROCESS "helpers/modal.tt";
-        <button id="mod_close" type="button" class="close">×</button>
+    modal_header(m.create_flag=helper.create_flag,
-        <h3>[% helper.create_flag == 1 ? 'Create' : 'Edit' %] [% helper.name %]</h3>
+                 m.name = helper.name);
-    </div>
+        helper.form_object.render;
-    [% helper.form_object.render -%]
+    modal_footer();
-</div>
+    modal_script(m.close_target = helper.close_target);
-<script>
+-%]
-    $(function () {
-        $('#mod_edit').modal({keyboard: false, backdrop: 'static'});
-        $('#mod_close').click(function(event) {
-            window.location.href="[% helper.close_target ? helper.close_target : c.uri_for() %]";
-        });
-
-        // on clicking a button within the form, add a hidden field "submitid"
-        // determining the name of the button being clicked
-        $('input[type=button]').click(function() {
-            $(this).parents('form').find('#submitid').attr('value', $(this).attr('name'));
-            $(this).parents('form').submit();
-        });
-    });
-</script>
 [% END -%]
 [% # vim: set tabstop=4 syntax=html expandtab: -%]
 

share/templates/helpers/modal.tt

@@ -0,0 +1,34 @@
+[% MACRO modal_header BLOCK -%]
+
+<div id="mod_edit" class="modal hide ngcp-modal">
+    <div class="modal-header">
+        <button id="mod_close" type="button" class="close">×</button>
+        <h3>[% m.create_flag == 1 ? 'Create' : 'Edit' %] [% m.name %]</h3>
+    </div>
+
+[% END -%]
+
+[% MACRO modal_footer BLOCK -%]
+</div>
+[% END -%]
+
+[% MACRO modal_script BLOCK %]
+<script>
+    $(function () {
+        $('#mod_edit').modal({keyboard: false, backdrop: 'static'});
+        $('#mod_close').click(function(event) {
+            window.location.href="[% m.close_target ? m.close_target : c.uri_for() %]";
+        });
+
+        // on clicking a button within the form, add a hidden field "submitid"
+        // determining the name of the button being clicked
+        $('input[type=button]').click(function() {
+            $(this).parents('form').find('#submitid').attr('value', $(this).attr('name'));
+            $(this).parents('form').submit();
+        });
+    });
+</script>
+[% END -%]
+
+[% # vim: set tabstop=4 syntax=html expandtab: -%]
+

share/templates/helpers/pref_table.tt

@@ -102,11 +102,13 @@ $(function() {
 </script>
 
 [% IF helper.edit_preference -%]
-<div id="mod_edit" class="modal hide ngcp-modal">
+
-    <div class="modal-header">
+[%
-        <button id="mod_close" type="button" class="close">×</button>
+    PROCESS "helpers/modal.tt";
-        <h3>Edit Preference [% helper.preference_meta.attribute %]</h3>
+    modal_header(m.create_flag=0,
-    </div>
+                 m.name = "Preference " _ helper.preference_meta.attribute);
+-%]
+
     [% IF helper.preference_meta.max_occur != 1 %]
         <div class="modal-body">
         [% FOREACH v IN helper.preference.all %]
@@ -131,7 +133,9 @@ $(function() {
     [% ELSE %]
         [% helper.form.render -%]
     [% END %]
-</div>
+[%
+    modal_footer();
+-%]
 <script>
     $(function () {
         $('#mod_edit').modal({keyboard: false, backdrop: 'static'});