Custom 404 and 505 pages

Gemfile

@@ -22,9 +22,9 @@ gem 'jbuilder', '~> 2.7'
 # Use Active Model has_secure_password
 gem 'bcrypt'
 
-gem 'bootstrap', '~> 4.0.0'
-gem 'jquery-rails'
-gem 'jquery-ui-rails'
+# gem 'bootstrap', '~> 4.0.0'
+# gem 'jquery-rails'
+# gem 'jquery-ui-rails'
 
 # Use Active Storage variant
 # gem 'image_processing', '~> 1.2'

app/assets/stylesheets/application.scss

@@ -1,4 +1,4 @@
-/*
+    /*
  * This is a manifest file that'll be compiled into application.css, which will include all the files
  * listed below.
  *
@@ -13,13 +13,15 @@
  *= require_tree .
  *= require_self
  */
-
-@import "bootstrap";
-
-.form-control {
-  width: inherit;s
-
-  &.inline {
-    display: inline;
-  }
-}
+
+    @import "bootstrap/scss/bootstrap";
+    .form-control {
+        width: inherit;
+        &.inline {
+            display: inline;
+        }
+    }
+
+    .alert.fade {
+        opacity: 0;
+    }

app/assets/stylesheets/errors.scss

@@ -0,0 +1,3 @@
+// Place all the styles related to the errors controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: https://sass-lang.com/

app/assets/stylesheets/organizations.scss

@@ -1,3 +1,9 @@
 // Place all the styles related to the Organizations controller here.
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: https://sass-lang.com/
+.form-control {
+    width: inherit;
+    &.inline {
+        display: inline;
+    }
+}

app/controllers/errors_controller.rb

@@ -0,0 +1,11 @@
+class ErrorsController < ApplicationController
+  def page_not_found
+    render status: 404
+  end
+end
+
+
+def internal_server_error
+  render status: 500
+end
+end

app/controllers/organizations_controller.rb

@@ -1,15 +1,19 @@
 class OrganizationsController < ApplicationController
   before_action :logged_in_user, only: %i[show new create edit update]
   before_action :set_organization, only: %i[show edit update]
-  before_action :verify_access, only: %i[show edit update]
+  before_action :verify_access, only: %i[ edit update]
   rescue_from ActiveRecord::RecordNotFound, with: :render_not_found
 
 
   def index
   end
 
   def show
-    @org_shifts = Shift.where(organization_id: @organization.id).order("updated_at DESC")
+    if current_user.id == @organization.user_id
+      @org_shifts = Shift.where(organization_id: @organization.id).order("updated_at DESC")
+    else 
+      @organization_bio = Organization.where(id: params[:id]).select(:org_name, :org_address, :org_description, :org_city, :org_state).first
+    end
   end
 
   def new

app/controllers/shifts_controller.rb

@@ -25,6 +25,10 @@ def new
   end
 
   def edit
+    unless @shift.shift_open?
+        flash[:danger] = "This shift is taken; cannot edit it!"
+        redirect_to shifts_path
+    end
   end
 
   def create

app/helpers/errors_helper.rb

@@ -0,0 +1,2 @@
+module ErrorsHelper
+end

app/javascript/packs/application.js

@@ -8,12 +8,16 @@ require("turbolinks").start()
 require("@rails/activestorage").start()
 require("channels")
 require('jquery')
-//= require jquery
-//= require jquery_ujs
+import 'bootstrap'
+import 'bootstrap/dist/js/bootstrap'
+import 'bootstrap/dist/css/bootstrap'
+require("../../assets/stylesheets/application.scss")
+    //= require jquery
+    //= require jquery_ujs
 
 // Uncomment to copy all static images under ../images to the output folder and reference
 // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
 // or the `imagePath` JavaScript helper below.
 //
 // const images = require.context('../images', true)
-// const imagePath = (name) => images(name, true)
+// const imagePath = (name) => images(name, true)

public/500.html → app/views/errors/internal_server_error.html.erb

@@ -63,4 +63,4 @@ <h1>We're sorry, but something went wrong.</h1>
     <p>If you are the application owner check the logs for more information.</p>
   </div>
 </body>
-</html>
+</html>

app/views/errors/page_not_found.html.erb

@@ -0,0 +1,11 @@
+<div class="jumbotron text-center">
+		            <h1 class="display-3 mb-5">Oops! Page Not Found</h1>
+<p class="lead text-monospace">Sorry but the page you are looking for does not exist.</p>
+<p class="text-center"><%= link_to "Go Back Home", root_path, class: "btn btn-info pl-5 pr-5" %></p>
+</div>
+
+
+
+
+
+

app/views/layouts/_navigation.html.erb

@@ -1,19 +1,28 @@
-<nav>
-  <div>
-    <div>
-      <%= link_to "HOME", root_path %>
+<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
+   <div class="container">
+    <div class="navbar-brand">
+      <%= link_to "ShiftWork", root_path %>
     </div>
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+  </button>
     <% if logged_in? %>
-      <ul>
-      <li><%= link_to "View Profile", user_path(current_user) %></li> 
-      <li><%= link_to "Edit Account", edit_user_path(current_user) %></li> 
-      <li><%= link_to "Log out", logout_path, method: :delete %></li> 
+    <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
+      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+      <li class="nav-item"><%= link_to "Home", root_path, class: "nav-link" %></li> 
+      <li class="nav-item"><%= link_to "View Profile", user_path(current_user), class: "nav-link" %></li> 
+      <li class="nav-item"><%= link_to "Edit Account", edit_user_path(current_user), class: "nav-link" %></li> 
+      <li class="nav-item"><%= link_to "Log out", logout_path, method: :delete, class: "nav-link" %></li> 
       </ul>
+      </div>
     <% else %>
-      <ul>
-        <li><%= link_to "Log in", login_path %></li> 
-        <li><%= link_to "Sign up", new_user_path %></li>
+    <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
+      <ul class="navbar-nav me-auto mb-2 mb-lg-0 ">
+        <li class="nav-item"><%= link_to "Home", root_path, class: "nav-link" %></li> 
+        <li class="nav-item"><%= link_to "Log in", login_path, class: "nav-link" %></li> 
+        <li class="nav-item"><%= link_to "Sign up", new_user_path, class: "nav-link" %></li>
       </ul>
+    </div>
     <% end %>
   </div>
-</nav>
+</nav>

app/views/layouts/application.html.erb

@@ -6,8 +6,9 @@
 
     <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
     <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
-
-    <title>Shiftwork App</title>
+    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
+<title>Shiftwork App</title>
   </head>
 
   <body>

app/views/organizations/show.html.erb

@@ -1,4 +1,5 @@
 <div class="container-fluid p-5">
+<% if @org_shifts %>
   <h3>Your Shifts</h3>
 
    <p><%= link_to "Create Shift", new_shift_path, class: "btn btn-primary" %></p>
@@ -33,11 +34,41 @@
                         <div class="col-7"><% unless shift.shift_open %>Worker Name<% end %></div>
                     </div>
                     <div class="text-right">
-                        <%= link_to "Edit", edit_shift_path(shift.id), class: "btn" %>
-                        <%= link_to "Delete", shift_path(shift.id), method: :delete, data: { confirm: "Are you sure?" }, class: "btn" %>
-                    </div>                  
+                       <% if shift.shift_open %>
+                            <%= link_to "Edit", edit_shift_path(shift.id), class: "btn btn-primary" %>
+                            <%= link_to "Delete", shift_path(shift.id), method: :delete, data: { confirm: "Are you sure?" }, class: "btn btn-danger" %>
+                        <% else %>
+                            <p class="mt-4 text-muted">Your shift has been filled and cannot be edited or deleted</p>
+                        <% end %> 
+                    </div>          
                 </div>
             </div>
         <% end %>
     </div> 
+<% else %>
+
+  <div class="card m-auto">
+    <h3 class="card-header"><%= @organization_bio.org_name %></h3>
+    <div class="card-block">
+        <div class="row">
+            <div class="col-4">
+            <ul class="list-group list-group-flush">
+            <li class="list-group-item border-white"><b>Address </b></li>
+            <li class="list-group-item border-white"><b>City </b></li>
+            <li class="list-group-item border-white"><b>State </b></li>
+            <li class="list-group-item border-white"><b>Description </b></li>
+            </ul>   
+            </div>
+            <div class="col-8">
+            <ul class="list-group list-group-flush">
+            <li class="list-group-item"><%= @organization_bio.org_address %></li>
+            <li class="list-group-item"><%= @organization_bio.org_city %></li>
+            <li class="list-group-item"><%= @organization_bio.org_state %></li>
+            <li class="list-group-item"><%= @organization_bio.org_description %></li>
+            </ul>
+            </div>
+        </div>
+    </div>
+  </div>
+<% end %>
 </div>

app/views/shifts/index.html.erb

@@ -1,56 +1,54 @@
 <section class="shifts-list m-4">
-<h2>List of Shifts</h2>
-<% if current_user.has_org? %>
-  <p><%= link_to 'Create Shift', new_shift_path, class: "btn btn-primary" %></p>
-<% end %>
+<h2>List of All Shifts</h2>
 
-
-<div class="row ml-0">
-  <% @shifts.each do |shift| %>
-    <div class="shift col-12 col-lg-6 col-xl-4 pl-0 my-2">
-      <div class="border bg-light p-4">
-      <h3 class="text-info mb-4"><%= shift.shift_role %></h3>
-      <div class="row mb-3">
-        <div class="col-4 font-weight-bold">Organization Name</div>
-        <div class="col-8"><%= shift.shift_org_name %></div>
-      </div>
-      <div class="row mb-3">
-        <div class="col-4 font-weight-bold">Shift Starts</div>
-        <div class="col-8"><%= shift.shift_start.httpdate %></div>
-      </div>
-      <div class="row mb-3">
-        <div class="col-4 font-weight-bold">Shift Ends</div>
-        <div class="col-8"><%= shift.shift_end.httpdate %></div>
-      </div>
-      <div class="row mb-3">
-        <div class="col-4 font-weight-bold">Pay Rate</div>
-        <div class="col-8"><%= shift.shift_pay %></div>
-      </div>
-      <div class="row mb-3">
-        <div class="col-4 font-weight-bold">Shift Description</div>
-        <div class="col-8"><%= shift.shift_description %></div>
-      </div>
-      <div class="row">
-        <div class="col-4 font-weight-bold">Shift Status</div>
-        <div class="col-8<% if shift.shift_open %> text-success">OPEN<% else %> text-danger">Filled<% end %></div>
-      </div>
-      <% if current_user.has_org? %>
-        <div class="text-right">
-          <span class="m-1"><%= link_to 'Edit', edit_shift_path(shift.id), class: "btn btn-primary" %></span>
-          <span class="m-1"><%= link_to 'Delete', shift_path(shift.id), method: :delete, data: { confirm: 'Are you sure?' }, class: "btn btn-primary" %></span>
-        </div>
-      <% end %>
-      <% if current_user.worker? && shift.shift_open %>
-        <div class="text-right">
-          <%= link_to 'Take Shift', take_shift_path(shift), method: :put, data: { confirm: 'You will be assigned to work this shift. Proceed?' }, class: "btn btn-primary" %>
-        </div>
-      <% end %>
-      <% if !shift.shift_open && shift.worker_id == current_user.id %>
-        <div class="text-right">
-          <%= link_to 'Drop Shift', drop_shift_path(shift), method: :put, data: { confirm: 'You are about to DROP this shift. Proceed?' }, class: "btn btn-danger" %>
-        </div>
-      <% end %>
-      </div>
+  <div class="row ml-0">
+    <% @shifts.each do |shift| %>
+      <div class="shift col-12 col-lg-6 col-xl-4 pl-0 my-2">
+        <div class="border bg-light p-4">
+        <h3 class="text-info mb-4"><%= shift.shift_role %></h3>
+        <div class="row mb-3">
+          <div class="col-4 font-weight-bold">Organization Name</div>
+          <div class="col-8"><%= link_to shift.shift_org_name, organization_path(shift.organization_id) %></div>
+        </div>
+        <div class="row mb-3">
+          <div class="col-4 font-weight-bold">Shift Starts</div>
+          <div class="col-8"><%= in_user_timezone(shift.shift_start) %></div>
+        </div>
+        <div class="row mb-3">
+          <div class="col-4 font-weight-bold">Shift Ends</div>
+          <div class="col-8"><%= in_user_timezone(shift.shift_end) %></div>
+        </div>
+        <div class="row mb-3">
+            <div class="col-4 font-weight-bold">Shift Duration</div>
+            <div class="col-8"><%= distance_of_time_in_words(shift.shift_start, shift.shift_end) %></div>
+        </div>
+        <div class="row mb-3">
+          <div class="col-4 font-weight-bold">Pay Rate</div>
+          <div class="col-8">$<%= shift.shift_pay %>/hour</div>
+        </div>
+        <div class="row mb-3">
+          <div class="col-4 font-weight-bold">Shift Description</div>
+          <div class="col-8"><%= shift.shift_description %></div>
+        </div>
+        <div class="row">
+          <div class="col-4 font-weight-bold">Shift Status</div>
+          <div class="col-8<% if shift.shift_open %> text-success">OPEN<% else %> text-danger">Filled <% if shift.filled_by(current_user) %>(by you 😄)<% end %><% end %></div>
+        </div>
+        <% if current_user.worker? && shift.shift_open %>
+          <div class="text-right">
+            <%= link_to "Take Shift", take_shift_path(shift), method: :put, data: { confirm: "You will be assigned to work this shift. Proceed?" }, class: "btn btn-primary" %>
+          </div>
+        <% end %>
+        <% if !shift.shift_open && shift.filled_by(current_user) %>
+          <div class="text-right">
+            <% if shift.can_be_dropped? %>
+              <%= link_to "Drop Shift", drop_shift_path(shift), method: :put, data: { confirm: "You are about to DROP this shift. Proceed?" }, class: "btn btn-danger" %>
+            <% else %>
+              <p class="mt-4 text-muted">Your shift starts in less than 24 hours and cannot be dropped</p>
+            <% end %>
+          </div>
+        <% end %>
+        </div>
     </div>
   <% end %>
 </div> 

app/views/users/index.html.erb

@@ -5,10 +5,10 @@
 </div>
 <div class="jumbotron text-center">
   <h1 class="display-3 mb-5">ShiftWork App</h1>
-  <p class="lead text-monospace" style="font-size: 1.55rem;">Are you a shiftworker looking for last-minute gigs? 
+  <p class="lead text-monospace">Are you a shiftworker looking for last-minute gigs? 
     Or a business owner with open shifts to fill?</p>
   <hr class="my-4">
-  <p class="lead mb-5 text-monospace" style="font-size: 1.55rem;">The Shiftwork app can connect you to shift opportunities or shiftworkers!</p>
+  <p class="lead mb-5 text-monospace">The Shiftwork app can connect you to shift opportunities or shiftworkers!</p>
   <p class="text-center"><%= link_to "Sign up", new_user_path, class: "btn btn-info pl-5 pr-5" %></p>
 </div>
 

config/application.rb

@@ -10,8 +10,12 @@ module Shiftwork2
   class Application < Rails::Application
     # Initialize configuration defaults for originally generated Rails version.
     config.load_defaults 6.0
+    config.exceptions_app = self.routes
+
+    # Set official app timezone
+    config.time_zone = "UTC"
 
-    # Settings in config/environments/* take precedence over those specified here.
+# Settings in config/environments/* take precedence over those specified here.
     # Application configuration can go into files in config/initializers
     # -- all .rb files in that directory are automatically loaded after loading
     # the framework and any gems in your application.

config/environments/development.rb

@@ -10,7 +10,7 @@
   config.eager_load = false
 
   # Show full error reports.
-  config.consider_all_requests_local = true
+  config.consider_all_requests_local = false
 
   # Enable/disable caching. By default caching is disabled.
   # Run rails dev:cache to toggle caching.