feat: academic calendar popup

app/Http/Controllers/API/V0/AcademicCalendarController.php

@@ -26,23 +26,25 @@ public function __construct() {
  ];
  }
 
- public function getCalendars() {
- $calendars = AcademicCalendar::all();
+ public function getCalendars($campus = null) {
+ $calendars = AcademicCalendar::where('title', 'LIKE', '%' . $campus . '%')->get();
 
  return $calendars;
  }
 
- public function getCurrentMonthCalendar() {
+ public function getCurrentMonthCalendar($campus = null) {
  $currentMonth = $this->months[(int) date('n') - 1];
  $currentYear = (int) date('Y');
- $calendar = $this->getCalendars();
+ $calendar = $this->getCalendars($campus);
 
  $currentMonthCalendar = $this->getCalendarEventsByMonth($calendar, $currentMonth, $currentYear);
 
  return $currentMonthCalendar;
  }
 
- public function getCalendarEventsByMonth($calendars, $month, $year) {
+ public function getCalendarEventsByMonth($month, $year, $campus = null) {
+ $calendars = $this->getCalendars($campus);
+
  $currentMonthEvents = [];
  foreach ($calendars as $calendar) {
  foreach ($calendar['data'] as $key => $calendarMonth) {
@@ -68,11 +70,11 @@ public function getCurrentDateEvents() {
  }
 
  // Recebe uma data no formato y-m-d
- public function getCalendarEventsByDate($date) {
+ public function getCalendarEventsByDate($date, $campus = null) {
  $dateCalendar = [];
  $date = strtotime($date);
 
- $calendar = $this->getCalendars();
+ $calendar = $this->getCalendars($campus);
  $month = $this->months[(int) date('n', $date) - 1];
  $year = date('Y', $date);
  $monthCalendars = $this->getCalendarEventsByMonth($calendar, $month, $year);

app/Http/Livewire/AuraAcademicCalendar.php

@@ -0,0 +1,122 @@
+<?php
+
+namespace App\Http\Livewire;
+use App\Http\Controllers\API\V0\AcademicCalendarController;
+
+
+use Livewire\Component;
+
+class AuraAcademicCalendar extends Component
+{
+ public $months;
+ public $calendar;
+ public $academicCalendar;
+ public $campus;
+ public $widgetSettings;
+
+ public function render()
+ {
+ return view('livewire.aura-academic-calendar', [
+ 'year' => $this->calendar['year'],
+ 'month' => $this->calendar['month'],
+ 'theme' => $this->widgetSettings['theme'],
+ 'type' => $this->widgetSettings['type']
+ ]);
+ }
+
+ public function mount($widgetSettings)
+ {
+ $this->months = [
+ "Janeiro",
+ "Fevereiro",
+ "Março",
+ "Abril",
+ "Maio",
+ "Junho",
+ "Julho",
+ "Agosto",
+ "Setembro",
+ "Outubro",
+ "Novembro",
+ "Dezembro"
+ ];
+
+ $this->calendar = [
+ 'year' => date('Y'),
+ 'month' => date('n') - 1,
+ 'array' => []
+ ];
+
+ $this->campus = 'chapeco';
+ $this->widgetSettings = $widgetSettings;
+
+ $this->getCalendarEvents();
+ $this->generateCalendar(date('m'), date('Y'));
+ }
+
+ public function generateCalendar($month, $year)
+ {
+ $date = $year.'-'.$month.'-01';
+
+ $monthArray = [];
+ while (date('m', strtotime($date)) == $month) {
+ $week = [];
+
+ for ($i = 0; $i < 7; $i++) {
+ $day = ['', $i]; 
+ if ($i == date('w', strtotime($date)) && date('m', strtotime($date)) == $month) {
+ $day[0] = date('d', strtotime($date));
+
+ $date = date('Y-m-d', strtotime("+1 days",strtotime($date)));
+ }
+ array_push($week, $day);
+ }
+ array_push($monthArray, $week);
+ }
+ $this->calendar['array'] = $monthArray;
+ }
+
+ public function closePopup()
+ {
+ $this->emitUp('toggleCalendarPopup');
+ }
+
+ public function changeMonth($direction)
+ {
+ if ($direction == 'prev') {
+ $this->calendar['month'] -= 1;
+ if ($this->calendar['month'] < 0) {
+ $this->calendar['year'] -= 1;
+ $this->calendar['month'] = 11;
+ }
+
+ } else {
+ $this->calendar['month'] += 1;
+
+ if ($this->calendar['month'] > 11) {
+ $this->calendar['year'] += 1;
+ $this->calendar['month'] = 0;
+ }
+ }
+ $this->getCalendarEvents();
+ $this->generateCalendar($this->calendar['month'] + 1, $this->calendar['year']);
+ }
+
+ public function getCalendarEvents() {
+ $acController = new AcademicCalendarController();
+
+ $campus = [
+ 'chapeco' => 'Chapecó',
+ 'laranjeiras_do_sul' => 'Laranjeiras do Sul',
+ 'erechim' => 'Erechim',
+ 'cerro_largo' => 'Cerro Largo',
+ 'realeza' => 'Realeza',
+ 'passo_fundo' => 'Passo Fundo'
+ ];
+
+ $this->academicCalendar = $acController->getCalendarEventsByMonth($this->months[$this->calendar['month']], $this->calendar['year'], $campus[$this->campus]);
+ if (count($this->academicCalendar)) {
+ $this->academicCalendar = $this->academicCalendar[0];
+ }
+ }
+}

app/Http/Livewire/AuraWidget.php

@@ -16,6 +16,9 @@ class AuraWidget extends Component
  public $password;
  public $widgetSettings;
  public $user;
+ public $academicCalendar;
+
+ protected $listeners = ['toggleCalendarPopup'];
 
  public function mount()
  {
@@ -70,15 +73,17 @@ public function mount()
  $this->user['token'] = null;
  }
  }
+
+ $this->academicCalendar = [
+ 'display-popup' => false
+ ];
  }
 
  public function render()
  { 
  return view('livewire.aura-widget');
  }
 
-
-
  public function sendMessage(){
 
  if ($this->inputMessage == ""){
@@ -293,5 +298,8 @@ public function loadHistory(){
  }
  $this->widgetSettings['history_loaded'] = true;
  }
-
+
+ public function toggleCalendarPopup() {
+ $this->academicCalendar['display-popup'] = !$this->academicCalendar['display-popup'];
+ }
 }

public/css/aura-calendar.css

@@ -0,0 +1,160 @@
+.page {
+ background-color: #ECECEC;
+ height: 100%;
+ width: 100%;
+ padding: 10px 0 0 10px;
+}
+
+.page--dark {
+ background-color: #041C26;
+}
+
+.popup-body {
+ box-sizing: border-box;
+ max-height: 90%;
+ overflow-y: auto;
+ padding-right: 10px;
+}
+
+.title {
+ color: #2F7B9A;
+ font-size: 28px;
+ padding-top: 10px;
+}
+
+.calendar {
+ background-color: #D9D9D9;
+ border-radius: 5px;
+ padding: 15px;
+ margin-top: 25px;
+ max-width: 400px;
+}
+
+.calendar--dark {
+ background-color: #153E4B;
+ color: #ECECEC;
+}
+
+.calendar-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding-bottom: 3px;
+ border-bottom: 1px solid #888;
+}
+
+.calendar-info {
+ font-weight: bold;
+}
+
+.calendar-week-days {
+ margin-top: 12px;
+}
+
+.calendar-week-days, .week {
+ display: flex;
+ justify-content: space-around;
+}
+
+.day {
+ flex: 1;
+ padding: 5px;
+ width: 100%;
+ margin: 5px;
+ border-radius: 5px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding-top: 10.52%;
+ position: relative;
+}
+
+.day span {
+ position: absolute;
+ top:50%; 
+ left:50%; 
+ transform:translate(-50%, -50%); 
+ color: #333333;
+ font-weight: 600;
+}
+
+.calendar--dark .day span {
+ color: #e1e1e1;
+}
+
+.day--weekend span {
+ color: #777;
+}
+
+.calendar--dark .day--weekend span {
+ color: #999;
+}
+
+.change-month {
+ background-color: transparent;
+ border: none;
+ cursor: pointer;
+ margin: 5px;
+}
+
+.change-month:active, .change-month:focus {
+ outline: none;
+}
+
+.events {
+ margin-top: 20px;
+}
+
+.event {
+ padding: 5px 0;
+}
+
+.event span {
+ font-weight: bold;
+}
+
+.calendar--dark .change-month, .page--dark .select_label {
+ color: #ECECEC;
+}
+
+.events--dark {
+ color: #ECECEC;
+}
+
+.select_campus {
+ display: block;
+ max-width: 400px;
+ width: 100%;
+ padding: 8px;
+ border: none;
+ border-radius: 5px;
+ background-color: #D9D9D9;
+}
+
+.page--dark .select_campus {
+ display: block;
+ max-width: 400px;
+ width: 100%;
+ padding: 8px;
+ background-color: #153E4B;
+ color: #ECECEC;
+}
+
+.popup-header {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+}
+
+.close-btn {
+ font-size: 20px;
+ padding: 0 10px;
+ margin-right: 10px;
+ color: #2F7B9A;
+ background-color: transparent;
+ border: none;
+}
+
+.page--dark .close-btn {
+ color: #D9D9D9;
+}

resources/views/layouts/app.blade.php

@@ -13,6 +13,7 @@
  <!-- Styles -->
 
  <link type="text/css" rel="stylesheet" href="{{asset('/css/aura.css')}}">
+ <link type="text/css" rel="stylesheet" href="{{asset('/css/aura-calendar.css')}}">
  <link type="text/css" rel="stylesheet" href="{{asset('/css/analytics.css')}}">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>