Add monitors simple dashboard and complete the CRUD operations of monitors

Author: ali-shakeel-dev

app/controllers/monitors_controller.rb

@@ -1,6 +1,6 @@
 class MonitorsController < ApplicationController
   before_action :authenticate_user!
-  before_action :set_monitor, only: [:edit]
+  before_action :set_monitor, only: [:edit, :show, :update, :destroy]
 
 
   def index
@@ -28,16 +28,16 @@ def edit
   end
 
   def update
+    @pulse = current_user.pulses.find(params[:id])
     @pulse.update(monitor_params)
-    redirect_to @pulse
+    redirect_to monitors_path
   end
 
   def destroy 
     @pulse.destroy
     redirect_to monitors_path
   end
 
-
   private 
 
   def monitor_params

app/models/pulse.rb

@@ -1,4 +1,5 @@
 class Pulse < ApplicationRecord
   belongs_to :user
   # has_one :status_page
+  validates :url, :pulse_type, :pulse_interval, presence: true
 end

app/views/monitors/_form.html.erb

@@ -2,18 +2,18 @@
   <%= render "partials/sidebar" %>
 
   <div class="flex justify-center flex-1 p-8">
-    <div class="max-w-xl h-fit bg-white border border-secondary/10 rounded-lg p-6">
+    <div class="max-w-xl h-fit bg-white border border-secondary/10 p-6">
 
-      <h2 class="text-xl font-semibold mb-6">Create Monitor</h2>
+      <h2 class="text-xl font-semibold mb-6"><%= @pulse.persisted? ? "Update Monitor" : "Create Monitor" %></h2>
 
-      <%= form_with model: @pulse, url: monitors_path, class: "space-y-6" do |f| %>
+      <%= form_with model: @pulse, url: @pulse.persisted? ? monitor_path(@pulse) : monitors_path, class: "space-y-6" do |f| %>
 
         <!-- Website URL -->
         <div>
           <%= f.label :url, "Website URL", class: "block text-sm font-medium text-gray-700 mb-1" %>
           <%= f.text_field :url,
             placeholder: "https://example.com",
-            class: "w-full border border-secondary/10 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-secondary/20" %>
+            class: "w-full border border-secondary/10 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-secondary/20", required: true %>
           <p class="text-xs text-gray-500 mt-1">
             Enter the full URL you want to monitor.
           </p>
@@ -60,8 +60,8 @@
 
         <!-- Submit -->
         <div class="pt-4">
-          <%= f.submit "Create Monitor",
-            class: "bg-black text-white px-5 py-2 rounded-md hover:bg-gray-800 transition cursor-pointer" %>
+          <%= f.submit (@pulse.persisted? ? "Update Monitor" : "Create Monitor"),
+            class: "inline-flex items-center bg-secondary hover:bg-black border-0 py-2 px-4 focus:outline-none text-white font-bold mt-4 md:mt-0 cursor-pointer" %>
         </div>
 
       <% end %>

app/views/monitors/edit.html.erb

@@ -1 +1 @@
-<%= render "form" %>
+<%= render "form", pulse: @pulse %>

app/views/monitors/index.html.erb

@@ -3,6 +3,35 @@
 
   <div class="flex-1 p-6">
 
+  <section class="text-gray-600 body-font pb-4">
+      <div class="flex flex-wrap -m-4">
+        <div class="xl:w-1/4 md:w-1/2 p-4">
+          <div class="bg-background/50 border border-secondary/10 p-6">
+            <h3 class="tracking-widest text-indigo-500 text-xs font-medium title-font">SUBTITLE</h3>
+            <h2 class="text-lg text-gray-900 font-medium title-font mb-4">Chichen Itza</h2>
+          </div>
+        </div>
+        <div class="xl:w-1/4 md:w-1/2 p-4">
+          <div class="bg-background/50 border border-secondary/10 p-6">
+            <h3 class="tracking-widest text-indigo-500 text-xs font-medium title-font">SUBTITLE</h3>
+            <h2 class="text-lg text-gray-900 font-medium title-font mb-4">Chichen Itza</h2>
+          </div>
+        </div>
+        <div class="xl:w-1/4 md:w-1/2 p-4">
+          <div class="bg-background/50 border border-secondary/10 p-6">
+            <h3 class="tracking-widest text-indigo-500 text-xs font-medium title-font">SUBTITLE</h3>
+            <h2 class="text-lg text-gray-900 font-medium title-font mb-4">Chichen Itza</h2>
+          </div>
+        </div>
+        <div class="xl:w-1/4 md:w-1/2 p-4">
+          <div class="bg-background/50 border border-secondary/10 p-6">
+            <h3 class="tracking-widest text-indigo-500 text-xs font-medium title-font">SUBTITLE</h3>
+            <h2 class="text-lg text-gray-900 font-medium title-font mb-4">Chichen Itza</h2>
+          </div>
+        </div>
+      </div>
+  </section>  
+
     <!-- Top Bar -->
     <div class="flex flex-wrap flex-col md:flex-row items-center justify-between mb-6 gap-4">
 
@@ -11,7 +40,7 @@
         <input
           type="text"
           placeholder="Search by URL"
-          class="w-full border border-secondary/10 rounded-md px-3 py-2 focus:ring-2 focus:ring-secondary/10 focus:outline-none"
+          class="w-full border border-secondary/10 px-3 py-2 focus:ring-2 focus:ring-secondary/10 focus:outline-none"
         >
       </div>
 
@@ -21,12 +50,12 @@
 
 
     <!-- Monitors Table -->
-    <div class="bg-white border border-secondary/10 rounded-lg overflow-hidden">
+    <div class="bg-white border border-secondary/10 overflow-hidden">
 
       <table class="w-full text-sm">
 
         <!-- Table Header -->
-        <thead class="bg-gray-50 border-b border-secondary/10 text-gray-600">
+        <thead class="bg-background border-b border-secondary/10 text-gray-600">
           <tr>
             <th class="text-left px-6 py-3 font-medium">Monitor</th>
             <th class="text-left px-6 py-3 font-medium">Type</th>
@@ -42,7 +71,7 @@
           <% if @pulses.any? %>
             <% @pulses.each do |pulse| %>
 
-              <tr class="hover:bg-gray-50 transition">
+              <tr class="hover:bg-background/40 transition">
 
                 <!-- URL -->
                 <td class="px-6 py-4">

app/views/monitors/new.html.erb

@@ -1 +1 @@
-<%= render "form" %>
+<%= render "form", pulse: @pulse %>