Calendar is shown

app/assets/stylesheets/application.tailwind.css

@@ -18,4 +18,7 @@ body  {
 
 toastui-calendar-time {
     height: 100% !important;
-}
+}
+
+.toastui-calendar-timegrid { height: 100%;  }
+.toastui-calendar-panel.toastui-calendar-time { overflow-y: inherit; }

app/controllers/reservations_controller.rb

@@ -6,7 +6,8 @@ class ReservationsController < ApplicationController
   # GET /reservations or /reservations.json
   def index
 
-    @reservations = Reservation.all
+    @reservations = Reservation.all.includes(:team, :customer).where(company: @company)
+    @reservations = ActiveModelSerializers::SerializableResource.new(@reservations).as_json
   end
 
   # GET /reservations/1 or /reservations/1.json
@@ -16,7 +17,7 @@ class ReservationsController < ApplicationController
   # GET /reservations/new
   def new
     @reservation = Reservation.new
-    @reservation.place = @company.places.first
+    @reservation.team = @company.teams.first
   end
 
   # GET /reservations/1/edit
@@ -70,7 +71,7 @@ class ReservationsController < ApplicationController
 
     # Only allow a list of trusted parameters through.
     def reservation_params
-      params.require(:reservation).permit(:company_id, :customer_id, :place_id, :title, :description, :start_time, :end_time)
+      params.require(:reservation).permit(:company_id, :customer_id, :team_id, :title, :description, :start_time, :end_time)
     end
 
     def determine_layout

app/controllers/teams_controller.rb

@@ -22,6 +22,7 @@ class TeamsController < ApplicationController
   # POST /teams or /teams.json
   def create
     @team = Team.new(team_params)
+    @team.company = Company.first
 
     respond_to do |format|
       if @team.save
@@ -36,6 +37,7 @@ class TeamsController < ApplicationController
 
   # PATCH/PUT /teams/1 or /teams/1.json
   def update
+    @team.company = Company.first
     respond_to do |format|
       if @team.update(team_params)
         format.html { redirect_to team_url(@team), notice: "Team was successfully updated." }
@@ -65,6 +67,6 @@ class TeamsController < ApplicationController
 
     # Only allow a list of trusted parameters through.
     def team_params
-      params.fetch(:team, {})
+      params.require(:team).permit(:name)
     end
 end

app/javascript/controllers/main_calendar_controller.js

@@ -3,14 +3,20 @@ import {Controller} from "@hotwired/stimulus"
 
 export default class extends Controller {
   connect() {
-    const calendar = new tui.Calendar(this.element, {
+    const calendar = new tui.Calendar(document.getElementById('main-calendar'), {
       defaultView: 'week',
       usageStatistics: false,
       week: {
         taskView: false,
-        eventView: true,
-        milestone: false,
-        scheduleView: ['time'], // This will hide the all-day section
+        scheduleView: false,
+        eventView: ['time'],
+        hourStart: 4,
+        hourEnd: 21,
+      },
+      template: {
+        timegridDisplayPrimaryTime({time}) {
+          return `${time.getHours()} sati`;
+        }
       },
       calendars: [
         {
@@ -21,6 +27,27 @@ export default class extends Controller {
       ],
     });
 
+    this.calendar = calendar;
+    this.getCalendardata();
     calendar.render();
   }
+
+  getCalendardata() {
+    var reservations = JSON.parse(document.querySelector("#main-calendar").dataset.reservations);
+    window.reservations = reservations;
+    reservations.forEach(reservation => {
+      this.calendar.createSchedules([
+        {
+          id: reservation.id,
+          calendarId: 'cal1',
+          title: reservation.customer,
+          category: 'time',
+          dueDateClass: reservation.dueDateClass,
+          location: reservation.team.name,
+          start: reservation.start_time,
+          end: reservation.end_time
+        }
+      ])
+    });
+  }
 }

app/models/reservation.rb

@@ -1,9 +1,9 @@
 class Reservation < ApplicationRecord
   belongs_to :company
   belongs_to :customer
-  belongs_to :place
+  belongs_to :team
 
   validates :company_id, presence: true
   validates :customer_id, presence: true
-  validates :place_id, presence: true
+  validates :team_id, presence: true
 end

app/models/team.rb

@@ -1,2 +1,7 @@
 class Team < ApplicationRecord
+  belongs_to :company
+  has_many :reservations, dependent: :destroy
+
+  validates :name, presence: true
+  validates :company_id, presence: true
 end

app/serializers/reservatiopn_serializer.rb

@@ -0,0 +1,6 @@
+class ReservationSerializer < ActiveModel::Serializer
+  attributes :id, :company_id, :customer_id, :team_id, :title, :description, :start_time, :end_time
+
+  belongs_to :team
+  belongs_to :customer
+end

app/views/layouts/application.html.erb

@@ -14,7 +14,7 @@
   </head>
 
   <body>
-    <main class="container mx-auto mt-28 px-5" style="height: 100vh;">
+    <main class="container mx-auto mt-28 px-5 flex">
       <%= yield %>
     </main>
   </body>

app/views/reservations/_form.html.erb

@@ -13,23 +13,14 @@
 
   <div class="my-5">
     <%= form.label :customer_id %>
-    <%= form.collection_select :customer_id,  class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
+    <%= form.collection_select :customer_id, @company.customers, :id, :name, class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
   </div>
 
   <div class="my-5">
     <%= form.label :team_id %>
-    <%= form.collection_select :place_id, @company.teams, :id, :name, prompt: "Select a Team", class:"block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"  %>
+    <%= form.collection_select :team_id, @company.teams, :id, :name, prompt: "Select a Team", class:"block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"  %>
   </div>
 
-  <div class="my-5">
-    <%= form.label :title %>
-    <%= form.text_field :title, class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
-  </div>
-
-  <div class="my-5">
-    <%= form.label :description %>
-    <%= form.text_area :description, rows: 4, class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
-  </div>
 
   <div class="my-5">
     <%= form.label :start_time %>`

app/views/reservations/_reservation.html.erb

@@ -10,18 +10,8 @@
   </p>
 
   <p class="my-5">
-    <strong class="block font-medium mb-1">Place:</strong>
-    <%= reservation.place_id %>
-  </p>
-
-  <p class="my-5">
-    <strong class="block font-medium mb-1">Title:</strong>
-    <%= reservation.title %>
-  </p>
-
-  <p class="my-5">
-    <strong class="block font-medium mb-1">Description:</strong>
-    <%= reservation.description %>
+    <strong class="block font-medium mb-1">Team:</strong>
+    <%= reservation.team.name %>
   </p>
 
   <p class="my-5">

app/views/reservations/index.html.erb

@@ -10,8 +10,7 @@
     <%= link_to "New reservation", new_reservation_path, class: "rounded-lg py-3 px-5 bg-blue-600 text-white block font-medium" %>
   </div>
 
-  <div data-controller="main-calendar" class="min-w-full" style="height: 100%"  >
-
-
+  <div data-controller="main-calendar" class="min-w-full" style="height: 90vh;"  >
+    <%= tag.div nil, data: {reservations: @reservations.to_json}, id: "main-calendar"%>
   </div>
 </div>

app/views/teams/_form.html.erb

@@ -2,7 +2,6 @@
   <% if team.errors.any? %>
     <div id="error_explanation" class="bg-red-50 text-red-500 px-3 py-2 font-medium rounded-lg mt-3">
       <h2><%= pluralize(team.errors.count, "error") %> prohibited this team from being saved:</h2>
-
       <ul>
         <% team.errors.each do |error| %>
           <li><%= error.full_message %></li>
@@ -11,6 +10,11 @@
     </div>
   <% end %>
 
+  <div class="my-5">
+    <%= form.label :name %>
+    <%= form.text_field :name, class: "block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full" %>
+  </div>
+
   <div class="inline">
     <%= form.submit class: "rounded-lg py-3 px-5 bg-blue-600 text-white inline-block font-medium cursor-pointer" %>
   </div>