@fleetbase/fleetops-engine 0.3.1 → 0.3.2

package/addon/components/driver-form-panel.js

@@ -11,6 +11,16 @@ export default class DriverFormPanelComponent extends Component {
      */
     @service store;
 
+    /**
+     * @service fetch
+     */
+    @service fetch;
+
+    /**
+     * @service currentUser
+     */
+    @service currentUser;
+
     /**
      * @service notifications
      */
@@ -37,6 +47,12 @@ export default class DriverFormPanelComponent extends Component {
      */
     @tracked context;
 
+    /**
+     * Status options for drivers.
+     * @type {Array}
+     */
+    @tracked driverStatusOptions = ['active', 'pending'];
+
     /**
      * Indicates whether the component is in a loading state.
      * @type {boolean}
@@ -97,6 +113,31 @@ export default class DriverFormPanelComponent extends Component {
         }
     }
 
+    /**
+     * Uploads a new photo for the driver.
+     *
+     * @param {File} file
+     * @memberof DriverFormPanelComponent
+     */
+    @action onUploadNewPhoto(file) {
+        this.fetch.uploadFile.perform(
+            file,
+            {
+                path: `uploads/${this.currentUser.companyId}/drivers/${this.driver.id}`,
+                subject_uuid: this.driver.id,
+                subject_type: 'driver',
+                type: 'driver_photo',
+            },
+            (uploadedFile) => {
+                this.driver.setProperties({
+                    photo_uuid: uploadedFile.id,
+                    photo_url: uploadedFile.url,
+                    photo: uploadedFile,
+                });
+            }
+        );
+    }
+
     /**
      * View the details of the driver.
      *

package/addon/components/driver-panel/details.hbs

@@ -33,12 +33,12 @@
                 <div class="field-name">City</div>
                 <div class="field-value">{{n-a @driver.city}}</div>
             </div>
-            {{!-- <div class="field-info-container">
+            <div class="field-info-container">
                 <div class="field-name">Country</div>
                 <div class="field-value">
                     <CountryName @country={{@driver.country}} />
                 </div>
-            </div> --}}
+            </div>
             <div class="field-info-container md:col-span-3">
                 <div class="field-name">Coordinates</div>
                 <div class="field-value">{{point-coordinates @driver.location}}</div>

package/addon/components/driver-panel.hbs

@@ -1,5 +1,5 @@
 <Overlay @onLoad={{this.setOverlayContext}} @position="right" @noBackdrop={{true}} @fullHeight={{true}} @isResizeble={{or this.isResizable @isResizable}} @width={{or this.width @width "600px"}}>
-     <Overlay::Header @hideLeftSection={{true}} @actionsWrapperClass="flex-1 flex-col py-3" class="h-auto-i min-h-[127px]">
+    <Overlay::Header @hideLeftSection={{true}} @actionsWrapperClass="flex-1 flex-col py-3" class="h-auto-i min-h-[127px]">
         <div class="flex flex-row items-center justify-between w-full mb-4">
             <div class="flex flex-1 space-x-2">
                 {{!-- <Button @type="default" @icon="location-arrow" @helpText="Locate driver" @onClick={{@onPressCancel}} /> --}}
@@ -12,23 +12,25 @@
         <div class="flex flex-row justify-between w-full">
             <div class="flex flex-col flex-1 w-3/4">
                 <div class="flex flex-row">
-                    <div class="w-14 flex items-center justify-start">
-                        <Image src={{this.driver.photo_url}} @fallbackSrc={{config "defaultValues.driverImage"}} alt={{this.driver.name}} height="48" width="48" class="h-12 w-12 rounded-lg shadow-sm" />
-                        <Attach::Tooltip @class="clean" @animation="scale" @placement={{"top"}}>
-                            <InputInfo @text={{this.driver.public_id}} />
-                        </Attach::Tooltip>
+                    <div class="w-14">
+                        <div class="w-12 h-12 flex items-center justify-start rounded-lg">
+                            <Image src={{this.driver.photo_url}} @fallbackSrc={{config "defaultValues.driverImage"}} alt={{this.driver.name}} height="48" width="48" class="h-12 w-12 rounded-lg shadow-sm" />
+                            <Attach::Tooltip @class="clean" @animation="scale" @placement="top">
+                                <InputInfo @text={{this.driver.name}} />
+                            </Attach::Tooltip>
+                        </div>
                     </div>
                     <div class="flex flex-col">
                         <h1 class="text-gray-900 dark:text-white text-2xl">{{this.driver.name}}</h1>
                         <div class="-mt-1">
                             {{#if this.driver.vehicle}}
                                 <div class="flex flex-row items-center">
-                                    <span class="text-sm dark:text-gray-500 text-gray-700 mr-3">{{this.driver.vehicle.displayName}}</span>
+                                    <a href="javascript:;" class="text-sm dark:text-blue-400 text-blue-600 hover:opacity-50" {{on "click" this.onClickDriverVehicle}}>{{this.driver.vehicle.displayName}}</a>
                                 </div>
                             {{else}}
                                 <div class="flex flex-row items-center">
                                     <span class="text-sm dark:text-gray-500 text-gray-700 mr-3">No vehicle assigned</span>
-                                    {{!-- <Button @icon="plus" @size="xs" @helpText="Assign a vehicle to driver" /> --}}
+                                    {{! <Button @icon="plus" @size="xs" @helpText="Assign a vehicle to driver" /> }}
                                 </div>
                             {{/if}}
                         </div>
@@ -45,7 +47,7 @@
             <div class="ui-tabs mt-4">
                 <nav>
                     {{#each this.tabs as |tab|}}
-                        <a href="javascript:;" class="ui-tab {{if (eq this.tab.slug tab.slug) 'active' }}" {{on "click" (fn this.onTabChanged tab.slug)}}>
+                        <a href="javascript:;" class="ui-tab {{if (eq this.tab.slug tab.slug) 'active'}}" {{on "click" (fn this.onTabChanged tab.slug)}}>
                             <FaIcon @icon={{tab.icon}} class="mr-1" />
                             <span>{{tab.title}}</span>
                         </a>
@@ -54,7 +56,7 @@
             </div>
         </div>
         <div class="tab-content tab-{{this.tab.slug}}">
-            {{component this.tab.component driver=this.driver tabOptions=this.tab params=this.tab.componentParams}}
+            {{component this.tab.component driver=this.driver tabOptions=this.tab options=this.tab.componentParams}}
         </div>
     </Overlay::Body>
 </Overlay>

package/addon/components/driver-panel.js

@@ -145,6 +145,19 @@ export default class DriverPanelComponent extends Component {
         return contextComponentCallback(this, 'onPressCancel', this.driver);
     }
 
+    /**
+     * View the driver's assigned vehicle.
+     *
+     * @memberof DriverPanelComponent
+     */
+    @action onClickDriverVehicle() {
+        const { vehicle } = this.driver;
+
+        if (vehicle) {
+            this.contextPanel.focus(vehicle);
+        }
+    }
+
     /**
      * Finds and returns a tab based on its slug.
      *

package/addon/components/fleet-form-panel.hbs

@@ -1,44 +1,44 @@
-<Overlay @position="right" @noBackdrop={{true}} @fullHeight={{true}} @width="700">
-    <Overlay::Header @title={{if @fleet.public_id "Update Fleet" "New Fleet"}} @status={{@fleet.public_id}} @hideStatusDot={{true}} @createdAt={{@fleet.createdAt}} @onPressCancel={{@onPressCancel}}>
-        {{#if @fleet.id}}
-            <Button @icon="save" @type="primary" @text="Save Fleet" @onClick={{@onUpdateFleet}} />
-        {{else}}
-            <Button @icon="check" @type="primary" @text="Create Fleet" @onClick={{@onCreateFleet}} />
-        {{/if}}
+<Overlay @onLoad={{this.setOverlayContext}} @position="right" @noBackdrop={{true}} @fullHeight={{true}} @isResizeble={{or this.isResizable @isResizable}} @width={{or this.width @width "600px"}}>
+    <Overlay::Header @title={{if this.fleet.public_id this.fleet.name "New Fleet"}} @status={{this.fleet.public_id}} @hideStatusDot={{true}} @createdAt={{this.fleet.createdAt}} @titleWrapperClass="leading-5">
+        <div class="flex flex-1 justify-end">
+            <Button @icon={{if this.fleet.id "save" "check"}} @type="primary" @text={{if this.fleet.id "Save Fleet" "Create Fleet"}} @onClick={{this.save}} @wrapperClass="mr-2" />
+            {{#if this.fleet.id}}
+                <Button @type="default" @icon="id-card" @helpText="View fleet details" @onClick={{this.onViewDetails}} @wrapperClass="mr-2" />
+            {{/if}}
+            <Button @type="default" @icon="times" @helpText={{if this.fleet.id "Cancel edit fleet" "Cancel new fleet"}} @onClick={{this.onPressCancel}} />
+        </div>
     </Overlay::Header>
 
     <Overlay::Body @wrapperClass="new-service-rate-overlay-body px-4 space-y-4 pt-4" @increaseInnerBodyHeightBy={{1000}}>
         <div class="modal-body-container">
-            <div class="grid grid-cols-2 gap-2 text-xs dark:text-gray-100">
-                <div class="col-span-2 mb-2">
-                    <InputGroup @name="Fleet Name" @value={{@fleet.name}} />
-                </div>
-                <InputGroup @name="Assign to Service Area" @value={{@fleet.service_area}}>
-                    <ModelSelect @modelName="service-area" @selectedModel={{@fleet.service_area}} @placeholder="Select service area to assign fleet to" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut @fleet.service_area)}} as |model|>
+            <div class="flex flex-col text-xs dark:text-gray-100">
+                <InputGroup @name="Fleet Name" @value={{this.fleet.name}} />
+                <InputGroup @name="Parent Fleet" @value={{this.fleet.parent_fleet}}>
+                    <ModelSelect @modelName="fleet" @selectedModel={{this.fleet.parent_fleet}} @placeholder="Select parent fleet to assign fleet to" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn this.updateRelationship "parent_fleet"}} @allowClear={{true}} as |model|>
                         {{model.name}}
                     </ModelSelect>
                 </InputGroup>
-                {{#if @fleet.service_area}}
-                    <InputGroup @name="Assign to Zone" @value={{@fleet.zone}}>
-                        <ModelSelect @modelName="zone" @selectedModel={{@fleet.zone}} @query={{hash service_area_uuid=@fleet.service_area.id}} @placeholder="Select zone to assign fleet to" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut @fleet.zone)}} as |model|>
-                            {{model.name}}
-                        </ModelSelect>
-                    </InputGroup>
-                {{/if}}
-                <InputGroup @name="Task/ Mission" @helpText="Give a description of this fleet's primary task or mission if applicable." @value={{@fleet.task}} />
-                <InputGroup @name="Status" @helpText="Select the status of the fleet.">
-                    <Select this={{@statusOptions}} @value={{@fleet.status}} @onSelect={{fn (mut @fleet.status)}} @placeholder="Select status" class="w-full" />
-                </InputGroup>
-                <InputGroup @name="Vendor" @value={{@fleet.vendor}}>
-                    <ModelSelect @modelName="vendor" @selectedModel={{@fleet.vendor}} @placeholder="Select vendor to assign fleet to" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut @fleet.vendor)}} as |model|>
+                <InputGroup @name="Vendor" @value={{this.fleet.vendor}}>
+                    <ModelSelect @modelName="vendor" @selectedModel={{this.fleet.vendor}} @placeholder="Select vendor to assign fleet to" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn this.updateRelationship "vendor"}} @allowClear={{true}} as |model|>
                         {{model.name}}
                     </ModelSelect>
                 </InputGroup>
-                <InputGroup @name="Fleet" @value={{@fleet.parent_fleet}}>
-                    <ModelSelect @modelName="fleet" @selectedModel={{@fleet.parent_fleet}} @placeholder="Select parent fleet to assign fleet to" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn (mut @fleet.parent_fleet)}} as |model|>
+                <InputGroup @name="Assign to Service Area" @value={{this.fleet.service_area}}>
+                    <ModelSelect @modelName="service-area" @selectedModel={{this.fleet.service_area}} @placeholder="Select service area to assign fleet to" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn this.updateRelationship "service_area"}} @allowClear={{true}} as |model|>
                         {{model.name}}
                     </ModelSelect>
                 </InputGroup>
+                {{#if this.fleet.service_area}}
+                    <InputGroup @name="Assign to Zone" @value={{this.fleet.zone}}>
+                        <ModelSelect @modelName="zone" @selectedModel={{this.fleet.zone}} @query={{hash service_area_uuid=this.fleet.service_area.id}} @placeholder="Select zone to assign fleet to" @triggerClass="form-select form-input" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{fn this.updateRelationship "zone"}} @allowClear={{true}} as |model|>
+                            {{model.name}}
+                        </ModelSelect>
+                    </InputGroup>
+                {{/if}}
+                <InputGroup @name="Status" @helpText="Select the status of the fleet.">
+                    <Select @options={{this.statusOptions}} @value={{this.fleet.status}} @onSelect={{fn (mut this.fleet.status)}} @placeholder="Select status" class="w-full" />
+                </InputGroup>
+                <InputGroup @name="Task/ Mission" @helpText="Give a description of this fleet's primary task or mission if applicable." @value={{this.fleet.task}} />
             </div>
         </div>
         {{yield}}

package/addon/components/fleet-form-panel.js

@@ -1,3 +1,152 @@
 import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import { underscore } from '@ember/string';
+import contextComponentCallback from '../utils/context-component-callback';
+import applyContextComponentArguments from '../utils/apply-context-component-arguments';
 
-export default class FleetFormPanelComponent extends Component {}
+export default class FleetFormPanelComponent extends Component {
+    /**
+     * @service store
+     */
+    @service store;
+
+    /**
+     * @service notifications
+     */
+    @service notifications;
+
+    /**
+     * @service hostRouter
+     */
+    @service hostRouter;
+
+    /**
+     * @service loader
+     */
+    @service loader;
+
+    /**
+     * @service contextPanel
+     */
+    @service contextPanel;
+
+    /**
+     * Overlay context.
+     * @type {any}
+     * @memberof FleetFormPanelComponent
+     */
+    @tracked context;
+
+    /**
+     * Indicates whether the component is in a loading state.
+     * @type {boolean}
+     * @memberof FleetFormPanelComponent
+     */
+    @tracked isLoading = false;
+
+    /**
+     * All possible order status options
+     *
+     * @var {String}
+     * @memberof FleetFormPanelComponent
+     */
+    @tracked statusOptions = ['active', 'disabled', 'decommissioned'];
+
+    /**
+     * Constructs the component and applies initial state.
+     */
+    constructor() {
+        super(...arguments);
+        this.fleet = this.args.fleet;
+        applyContextComponentArguments(this);
+    }
+
+    /**
+     * Sets the overlay context.
+     *
+     * @action
+     * @param {OverlayContextObject} overlayContext
+     * @memberof FleetFormPanelComponent
+     */
+    @action setOverlayContext(overlayContext) {
+        this.context = overlayContext;
+        contextComponentCallback(this, 'onLoad', ...arguments);
+    }
+
+    /**
+     * Saves the fleet changes.
+     *
+     * @action
+     * @returns {Promise<any>}
+     * @memberof FleetFormPanelComponent
+     */
+    @action save() {
+        const { fleet } = this;
+
+        this.loader.showLoader('.next-content-overlay-panel-container', { loadingMessage: 'Saving fleet...', preserveTargetPosition: true });
+        this.isLoading = true;
+
+        contextComponentCallback(this, 'onBeforeSave', fleet);
+
+        try {
+            return fleet
+                .save()
+                .then((fleet) => {
+                    this.notifications.success(`Fleet (${fleet.name}) saved successfully.`);
+                    contextComponentCallback(this, 'onAfterSave', fleet);
+                })
+                .catch((error) => {
+                    this.notifications.serverError(error);
+                })
+                .finally(() => {
+                    this.loader.removeLoader('.next-content-overlay-panel-container');
+                    this.isLoading = false;
+                });
+        } catch (error) {
+            this.loader.removeLoader('.next-content-overlay-panel-container');
+            this.isLoading = false;
+        }
+    }
+
+    /**
+     * View the details of the fleet.
+     *
+     * @action
+     * @memberof FleetFormPanelComponent
+     */
+    @action onViewDetails() {
+        const isActionOverrided = contextComponentCallback(this, 'onViewDetails', this.fleet);
+
+        if (!isActionOverrided) {
+            this.contextPanel.focus(this.fleet, 'viewing');
+        }
+    }
+
+    /**
+     * Handles cancel button press.
+     *
+     * @action
+     * @returns {any}
+     * @memberof FleetFormPanelComponent
+     */
+    @action onPressCancel() {
+        return contextComponentCallback(this, 'onPressCancel', this.fleet);
+    }
+
+    /**
+     * Update relation on a model.
+     *
+     * @param {String} relation
+     * @param {Model|null} value
+     * @memberof FleetFormPanelComponent
+     */
+    @action updateRelationship(relation, value) {
+        this.fleet.set(relation, value);
+
+        if (!value) {
+            this.fleet.set(underscore(relation) + '_uuid', null);
+        }
+    }
+}

package/addon/components/fleet-listing-panel.hbs

@@ -0,0 +1,8 @@
+<Layout::Sidebar::Panel @open={{or @open true}} @title={{this.fleet.name}} @wrapperClass="next-fleet-summary-fleet fleet-depth-{{@depth}}">
+    {{#each this.fleet.subfleets as |subFleet|}}
+        <FleetListingPanel @fleet={{subFleet}} @onVehicleClicked={{this.onVehicleClicked}} @depth={{add @depth 1}} />
+    {{/each}}
+    {{#each this.fleet.vehicles as |vehicle|}}
+        <Layout::Sidebar::Item @icon="circle" @iconSize="2xs" @iconClass={{if vehicle.online "text-green-500" "text-yellow-200"}} @onClick={{fn this.onVehicleClicked vehicle}}>{{vehicle.displayName}}</Layout::Sidebar::Item>
+    {{/each}}
+</Layout::Sidebar::Panel>

package/addon/components/fleet-listing-panel.js

@@ -0,0 +1,34 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class FleetListingPanelComponent extends Component {
+    /**
+     * The fleet the listing is for.
+     *
+     * @type {Fleetmodel}
+     * @memberof FleetListingPanelComponent
+     */
+    @tracked fleet;
+
+    /**
+     * Creates an instance of FleetListingPanelComponent.
+     * @memberof FleetListingPanelComponent
+     */
+    constructor() {
+        super(...arguments);
+        this.fleet = this.args.fleet;
+    }
+
+    /**
+     * Handle when fleet vehicle clicked.
+     *
+     * @param {VehicleModel} vehicle
+     * @memberof FleetListingPanelComponent
+     */
+    @action onVehicleClicked(vehicle) {
+        if (typeof this.args.onVehicleClicked === 'function') {
+            this.args.onVehicleClicked(vehicle);
+        }
+    }
+}

package/addon/components/fleet-panel/details.hbs

@@ -0,0 +1,30 @@
+<div class="p-4">
+    <ContentPanel @title="Details" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-900">
+        <div class="grid grid-cols-2 gap-2 text-xs md:mb-6 dark:text-gray-100">
+            <div class="field-info-container">
+                <div class="field-name">Name</div>
+                <div class="field-value">{{n-a @fleet.name}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Service Area</div>
+                <div class="field-value">{{n-a @fleet.serviceArea.name}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Zone</div>
+                <div class="field-value">{{n-a @fleet.zone.name}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Task</div>
+                <div class="field-value">{{n-a @fleet.task}}</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Active Manpower</div>
+                <div class="field-value">{{@fleet.drivers_online_count}} of {{@fleet.drivers_count}} Online</div>
+            </div>
+            <div class="field-info-container">
+                <div class="field-name">Date Created</div>
+                <div class="field-value">{{@fleet.createdAtShort}}</div>
+            </div>
+        </div>
+    </ContentPanel>
+</div>

package/addon/components/fleet-panel/driver-listing.hbs

@@ -0,0 +1,72 @@
+<div class={{or @wrapperClass @options.wrapperClass}}>
+    <div class="fleet-driver-listing" ...attributes>
+        <div class="mb-3 flex items-center justify-between">
+            <div class="flex items-center">
+                <div class="fleet-driver-listing-search">
+                    <Input @type="text" {{on "input" this.onInput}} placeholder="Search drivers in fleet" class="w-64 form-input form-input-sm" />
+                </div>
+                {{#if this.search.isRunning}}
+                    <div class="mx-2">
+                        <Spinner @iconClass="text-sky-500 fa-spin-800ms" />
+                    </div>
+                {{/if}}
+            </div>
+            <div class="w-56">
+                <ModelSelect @modelName="driver" @selectedModel={{this.selectedDriver}} @placeholder="Add driver to fleet" @triggerClass="form-select form-input form-select-sm form-input-sm" @infiniteScroll={{false}} @renderInPlace={{true}} @onChange={{this.onAddDriver}} as |model|>
+                    {{model.name}}
+                </ModelSelect>
+            </div>
+        </div>
+        <div class="bg-white border border-gray-200 rounded shadow-sm dark:bg-gray-800 dark:border-gray-900 text-xs">
+            <div class="w-full">
+                <div class="grid grid-cols-12 text-xs p-3 font-bold text-gray-800 dark:text-gray-100 border-b border-gray-900 shadow">
+                    {{#if this.selectable}}
+                        <div></div>
+                    {{/if}}
+                    <div class="col-span-4 flex items-center">Driver</div>
+                    <div class="col-span-7 flex items-center"></div>
+                </div>
+            </div>
+            <div class="h-48 overflow-y-scroll">
+                {{#if this.search.isRunning}}
+                    <div class="flex items-center justify-center p-4 dark:text-gray-100">
+                        <div class="mr-2">
+                            <Spinner @iconClass="text-sky-500" />
+                        </div>
+                        <span>Loading fleet drivers...</span>
+                    </div>
+                {{/if}}
+                {{#each this.drivers as |driver|}}
+                    <div class="flex flex-row items-center justify-between text-xs py-2 px-3 text-gray-800 border-b border-gray-200 dark:border-gray-900 dark:text-gray-100">
+                        <div class="flex flex-row items-center">
+                            {{#if this.selectable}}
+                                <div class="flex items-center mr-2">
+                                    <Checkbox @value={{includes driver this.selected}} @onToggle={{fn this.onSelect driver}} />
+                                </div>
+                            {{/if}}
+                            <div class="flex items-center">
+                                <div class="flex flex-row items-start">
+                                    <div class="mr-2">
+                                        <div class="relative">
+                                            <Image src={{driver.photo_url}} alt={{driver.name}} class="w-5 h-5 rounded-md" @fallbackSrc={{config "defaultValues.driverImage"}} />
+                                            <FaIcon @icon="circle" class="absolute right-0 top-0 -mr-1 -mt-1 {{if driver.online "text-green-500" "text-yellow-200"}}" />
+                                        </div>
+                                    </div>
+                                    <div>
+                                        <div class="font-semibold">{{driver.name}}</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="flex items-center justify-end">
+                            <a href="javascript:;" class="text-danger text-opacity-75" {{on "click" (fn this.onRemoveDriver driver)}}>
+                                <FaIcon @icon="times" @prefix="fas" class="mr-1" />
+                                <span>Remove</span>
+                            </a>
+                        </div>
+                    </div>
+                {{/each}}
+            </div>
+        </div>
+    </div>
+</div>