Skip to content

Commit

Permalink
Created Courses Show View (#73)
Browse files Browse the repository at this point in the history
* Created Courses Show View

Add style for actions buttons

Add style for h3 headers
  • Loading branch information
MatiasMercado committed Feb 3, 2017
1 parent d0e9d74 commit d1d97fc
Show file tree
Hide file tree
Showing 9 changed files with 224 additions and 4 deletions.
53 changes: 53 additions & 0 deletions app/scripts/controllers/courses/CoursesShowCtrl.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
'use strict';

define(['paw'], function(paw) {
paw.controller('CoursesShowCtrl', ['$routeParams', function($routeParams) {
var _this = this;
var courseId = $routeParams.courseId; // For future Service calls

this.formatDate = function(finalExamDate) {
var date = finalExamDate.split('T')[0];
var time = finalExamDate.split('T')[1];
return date.split('-')[2] + '/' + date.split('-')[1] + '/' + date.split('-')[0] + ' ' + time;
};

this.course = {
courseId: '93.42',
credits: 6,
name: 'Física II',
semester: 3,
correlatives: [
{
'courseId': '93.41',
'credits': 6,
'name': 'Física I',
'semester': 2
},
{
'courseId': '93.17',
'credits': 6,
'name': 'Matemática I',
'semester': 1
}
],
finalInscriptions: [
{
id: '1',
courseId: '93.42',
vacancy: '12',
maxVacancy: '50',
finalExamDate: '2017-01-20T18:45',
state: 'OPEN'
},
{
id: '2',
courseId: '93.42',
vacancy: '6',
maxVacancy: '50',
finalExamDate: '2017-02-15T14:00',
state: 'CLOSED'
}
]
};
}]);
});
15 changes: 13 additions & 2 deletions app/scripts/i18n/translations.es.js
Original file line number Diff line number Diff line change
Expand Up @@ -81,12 +81,23 @@ define([], function() {
i18nDoor: 'Dpto.',
i18nZipCode: 'Cód. Postal',

// Courses Index
// Course Show
i18nCourses: 'Materias',
i18nInformation: 'Información',
i18nCourseId: 'Código',
i18nCourseName: 'Nombre',
i18nCredits: 'Créditos',
i18nSemester: 'Cuatrimestre',

i18nCorrelatives: 'Correlativas',
i18nDeleteCorrelative: 'Eliminar correlatividad',
i18nNoCorrelativesFound: 'Esta materia no tiene correlativas',
i18nFinalExams: 'Exámenes Finales',
i18nVacancy: 'Cupos',
i18nState: 'Estado',
i18nFinalExamDate: 'Fecha del examen',
i18nNoFinalExamsFound: 'No se encontraron fechas de examen final',
i18nInscriptionOpen: 'Abierto',
i18nInscriptionClosed: 'Cerrado',

// Search filters
i18nSearchButton: 'Buscar',
Expand Down
5 changes: 5 additions & 0 deletions app/scripts/routes.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,11 @@ define([], function() {
templateUrl: 'views/courses/index.html',
controller: 'CoursesIndexCtrl',
relativePath: '/courses'
},
'/courses/:courseId': {
templateUrl: 'views/courses/show.html',
controller: 'CoursesShowCtrl',
relativePath: '/courses'
}
/* ===== yeoman hook ===== */
/* Do not remove these commented lines! Needed for auto-generation */
Expand Down
1 change: 1 addition & 0 deletions app/styles/main.scss
Original file line number Diff line number Diff line change
Expand Up @@ -17,3 +17,4 @@ $fa-font-path: '../bower_components/font-awesome/fonts';
@import 'partials/home';
@import 'partials/students/show';
@import 'partials/students/edit';
@import 'partials/courses/show';
6 changes: 6 additions & 0 deletions app/styles/modules/common.scss
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,12 @@ hr {
padding-bottom: 15px;
}

.page-sub-header {
margin: 0 0 15px;
padding-bottom: 15px;
padding-top: 15px;
}

.btn {
border-radius: 0;
outline: none !important;
Expand Down
37 changes: 37 additions & 0 deletions app/styles/partials/courses/_show.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
@import 'modules/variables/importer';

.courses-show-container {
.data-container {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;

.data-item {
width: 200px;
padding: 5px;

.break-words {
display: inline-block;
word-wrap: break-word; /* Internet Explorer 5.5+ */
width: 190; /* width is mandatory to make break-word work on Mozzila */
}
}
}
.table {
.actions-container {
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: flex-start;

.btn {
flex: 1;
min-width: 175px;
max-width: 200px;
margin: 10px;
margin-left: 0;
}
}
}
}
107 changes: 107 additions & 0 deletions app/views/courses/show.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
<div ng-controller='CoursesShowCtrl as controller' class='courses-show-container'>
<!-- Page Heading -->
<div class='page-header break-words'>
<h1 class='inline'>
<span translate='i18nCourses'></span>
</h1>
<h2 class='inline'>
<span> - </span>
<span> {{controller.course.name}}</span>
<small> - </small>
<small translate='i18nInformation'></small>
</h2>
</div>
<!-- /Page Heading -->

<!-- Course Data -->
<div class='data-container'>
<div class='data-item'>
<p class='bold static-label' translate='i18nCourseId'></p>
<p class='break-words'>{{controller.course.courseId}}</p>
</div>
<div class='data-item'>
<p class='bold static-label' translate='i18nCourseName'></p>
<p class='break-words'>{{controller.course.name}}</p>
</div>
<div class='data-item'>
<p class='bold static-label' translate='i18nCredits'></p>
<p class='break-words'>{{controller.course.credits}}</p>
</div>
<div class='data-item'>
<p class='bold static-label' translate='i18nSemester'></p>
<p class='break-words'>{{controller.course.semester}}</p>
</div>
</div>
<!-- /Course Data -->

<!-- Correlatives -->
<h3 translate='i18nCorrelatives' class='page-sub-header'></h3>
<div class='table-responsive'>
<table class='table table-hover'>
<thead>
<tr>
<th translate='i18nCourseId'></th>
<th translate='i18nCourseName'></th>
<th translate='i18nCredits'></th>
<th translate='i18nSemester'></th>
<th translate='i18nActions'></th>
</tr>
</thead>
<tbody>
<tr ng-hide='controller.course.correlatives.length > 0' class='bg-warning'>
<td colspan='5' class='text-danger text-center' translate='i18nNoCorrelativesFound'></td>
</tr>
<tr ng-repeat='course in controller.course.correlatives'>
<td>{{ course.courseId }}</td>
<td>{{ course.name }}</td>
<td>{{ course.credits }}</td>
<td>{{ course.semester }}</td>
<td class='actions-container'>
<a class='btn btn-default' role='button'>
<span class='fa fa-info-circle' aria-hidden='true'></span>
<span translate='i18nInformation'></span>
</a>
<a class='btn btn-danger' role='button'>
<span class='fa fa-trash' aria-hidden='true'></span>
<span translate='i18nDeleteCorrelative'></span>
</a>
</td>
</tr>
</tbody>
</table>
</div>
<!-- /Correlatives -->

<!-- Final Exams -->
<h3 translate='i18nFinalExams' class='page-sub-header'></h3>
<div class='table-responsive'>
<table class='table table-hover'>
<thead>
<tr>
<th translate='i18nFinalExamDate'></th>
<th translate='i18nVacancy'></th>
<th translate='i18nState'></th>
<th translate='i18nActions'></th>
</tr>
</thead>
<tbody>
<tr ng-hide='controller.course.finalInscriptions.length > 0' class='bg-warning'>
<td colspan='4' class='text-danger text-center' translate='i18nNoFinalExamsFound'></td>
</tr>
<tr ng-repeat='inscription in controller.course.finalInscriptions'>
<td>{{controller.formatDate(inscription.finalExamDate)}}</td>
<td>{{ inscription.vacancy }}/{{ inscription.maxVacancy }}</td>
<td ng-show="inscription.state == 'OPEN'" translate='i18nInscriptionOpen'></td>
<td ng-show="inscription.state == 'CLOSED'" translate='i18nInscriptionClosed'></td>
<td class='actions-container'>
<a class='btn btn-default' role='button'>
<span class='fa fa-info-circle' aria-hidden='true'></span>
<span translate='i18nInformation'></span>
</a>
</td>
</tr>
</tbody>
</table>
</div>
<!-- /Final Exams -->
</div>
4 changes: 2 additions & 2 deletions app/views/modals/delete_course.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@ <h4 class='modal-title' id='modal-title' translate='i18nCourseDelete'></h4>
</div>
<div class='modal-body'>
<p class='break-words'>
<span class='bold' translate='i18nId'></span>: {{ controller.id }}
<span class='bold' translate='i18nCourseId'></span>: {{ controller.id }}
</p>
<p class='break-words'>
<span class='bold' translate='i18nName'></span>: {{ controller.name }}
<span class='bold' translate='i18nCourseName'></span>: {{ controller.name }}
</p>
</div>
<div class='modal-footer'>
Expand Down

0 comments on commit d1d97fc

Please sign in to comment.