implements a modular view system

resources/assets/js/app.js

@@ -161,63 +161,38 @@ $(function() {
         }
     });
 
-    // Sortable components.
-    var componentList = document.getElementById("component-list");
-    if (componentList) {
-        new Sortable(componentList, {
-            group: "omega",
-            handle: ".drag-handle",
+    // Sortable models.
+    var orderableLists = document.querySelectorAll('[data-orderable-list]');
+
+    $.each(orderableLists, function (k, list) {
+        var url = $(list).data('orderableList');
+        var notifier = new Cachet.Notifier();
+
+        new Sortable(list, {
+            group: 'omega',
+            handle: '.drag-handle',
             onUpdate: function() {
-                var orderedComponentIds = $.map($('#component-list .striped-list-item'), function(elem) {
-                    return $(elem).data('component-id');
+                var orderedIds = $.map(list.querySelectorAll('[data-orderable-id]'), function(elem) {
+                    return $(elem).data('orderable-id');
                 });
 
                 $.ajax({
                     async: true,
-                    url: '/dashboard/api/components/order',
+                    url: url,
                     type: 'POST',
                     data: {
-                        ids: orderedComponentIds
+                        ids: orderedIds
                     },
                     success: function() {
-                        (new Cachet.Notifier()).notify('Component orders updated.', 'success');
+                        notifier.notify('Ordering updated.', 'success');
                     },
                     error: function() {
-                        (new Cachet.Notifier()).notify('Component orders not updated.', 'error');
+                        notifier.notify('Ordering not updated.', 'error');
                     }
                 });
             }
         });
-    }
-
-    // Sortable Component Groups
-    var componentGroupList = document.getElementById("component-group-list");
-    if (componentGroupList) {
-        new Sortable(componentGroupList, {
-            group: "omega",
-            handle: ".drag-handle",
-            onUpdate: function() {
-                var orderedComponentGroupsIds = $.map(
-                    $('#component-group-list .striped-list-item'),
-                    function(elem) {
-                        return $(elem).data('group-id');
-                    }
-                );
-                $.ajax({
-                    async: true,
-                    url: '/dashboard/api/components/groups/order',
-                    type: 'POST',
-                    data: {ids: orderedComponentGroupsIds},
-                    success: function() {
-                        (new Cachet.Notifier()).notify('Component groups order has been updated.', 'success');
-                    },
-                    error: function() {
-                        (new Cachet.Notifier()).notify('Component groups order could not be updated.', 'error');
-                    }
-                });
-            }
-        });
-    }
+    });
 
     // Toggle inline component statuses.
     $('form.component-inline').on('click', 'input[type=radio]', function() {

resources/views/dashboard/components/groups/index.blade.php

@@ -17,9 +17,9 @@
         </div>
         @include('dashboard.partials.errors')
         <div class="row">
-            <div class="col-sm-12 striped-list" id="component-group-list">
+            <div class="col-sm-12 striped-list" data-orderable-list="/dashboard/api/components/groups/order">
                 @forelse($groups as $group)
-                <div class="row striped-list-item" data-group-id="{{ $group->id }}">
+                <div class="row striped-list-item" data-orderable-id="{{ $group->id }}">
                     <div class="col-xs-6">
                         <h4>
                             @if($groups->count() > 1)

resources/views/dashboard/components/index.blade.php

@@ -17,9 +17,9 @@
         </div>
         @include('dashboard.partials.errors')
         <div class="row">
-            <div class="col-sm-12 striped-list" id="component-list">
+            <div class="col-sm-12 striped-list" data-orderable-list="/dashboard/api/components/order">
                 @forelse($components as $component)
-                <div class="row striped-list-item {{ !$component->enabled ? 'bg-warning' : null }}" data-component-id="{{ $component->id }}">
+                <div class="row striped-list-item {{ !$component->enabled ? 'bg-warning' : null }}" data-orderable-id="{{ $component->id }}">
                     <div class="col-xs-6">
                         <h4>
                             @if($components->count() > 1)

resources/views/index.blade.php

@@ -1,60 +1,5 @@
 @extends('layout.master')
 
 @section('content')
-<div class="section-messages">
-    @include('dashboard.partials.errors')
-</div>
-
-<div class="section-status">
-    <div class="alert alert-{{ $system_status }}">{{ $system_message }}</div>
-</div>
-
-@include('partials.about-app')
-
-@if(!$component_groups->isEmpty() || !$ungrouped_components->isEmpty())
-<div class="section-components">
-    @include('partials.components')
-</div>
-@endif
-
-@if($display_metrics && $app_graphs)
-<div class="section-metrics">
-    @include('partials.metrics')
-</div>
-@endif
-
-@if(!$scheduled_maintenance->isEmpty())
-<div class="section-scheduled">
-    @include('partials.schedule')
-</div>
-@endif
-
-@if($days_to_show > 0)
-<div class="section-timeline">
-    <h1>{{ trans('cachet.incidents.past') }}</h1>
-    @foreach($all_incidents as $date => $incidents)
-    @include('partials.incidents', [compact($date), compact($incidents)])
-    @endforeach
-</div>
-
-<nav>
-    <ul class="pager">
-        @if($can_page_backward)
-        <li class="previous">
-            <a href="{{ route('status-page') }}?start_date={{ $previous_date }}" class="links">
-                <span aria-hidden="true">&larr;</span> {{ trans('cachet.incidents.previous_week') }}
-            </a>
-        </li>
-        @endif
-        @if($can_page_forward)
-        <li class="next">
-            <a href="{{ route('status-page') }}?start_date={{ $next_date }}" class="links">
-                {{ trans('cachet.incidents.next_week') }} <span aria-hidden="true">&rarr;</span>
-            </a>
-        </li>
-        @endif
-    </ul>
-</nav>
-@endif
-
+    @modules
 @stop

resources/views/partials/modules/components.blade.php

@@ -0,0 +1,5 @@
+@if(!$component_groups->isEmpty() || !$ungrouped_components->isEmpty())
+<div class="section-components">
+    @include('partials.components')
+</div>
+@endif

resources/views/partials/modules/messages.blade.php

@@ -0,0 +1,3 @@
+<div class="section-messages">
+    @include('dashboard.partials.errors')
+</div>

resources/views/partials/modules/metrics.blade.php

@@ -0,0 +1,5 @@
+@if($display_metrics && $app_graphs)
+<div class="section-metrics">
+    @include('partials.metrics')
+</div>
+@endif

resources/views/partials/modules/scheduled.blade.php

@@ -0,0 +1,5 @@
+@if(!$scheduled_maintenance->isEmpty())
+<div class="section-scheduled">
+    @include('partials.schedule')
+</div>
+@endif

resources/views/partials/modules/status.blade.php

@@ -0,0 +1,3 @@
+<div class="section-status">
+    <div class="alert alert-{{ $system_status }}">{{ $system_message }}</div>
+</div>

resources/views/partials/modules/timeline.blade.php

@@ -0,0 +1,27 @@
+@if($days_to_show > 0)
+<div class="section-timeline">
+    <h1>{{ trans('cachet.incidents.past') }}</h1>
+    @foreach($all_incidents as $date => $incidents)
+    @include('partials.incidents', [compact($date), compact($incidents)])
+    @endforeach
+</div>
+
+<nav>
+    <ul class="pager">
+        @if($can_page_backward)
+        <li class="previous">
+            <a href="{{ route('status-page') }}?start_date={{ $previous_date }}" class="links">
+                <span aria-hidden="true">&larr;</span> {{ trans('cachet.incidents.previous_week') }}
+            </a>
+        </li>
+        @endif
+        @if($can_page_forward)
+        <li class="next">
+            <a href="{{ route('status-page') }}?start_date={{ $next_date }}" class="links">
+                {{ trans('cachet.incidents.next_week') }} <span aria-hidden="true">&rarr;</span>
+            </a>
+        </li>
+        @endif
+    </ul>
+</nav>
+@endif