@fleetbase/solid-engine 0.0.2 → 0.0.4

package/addon/controllers/pods/explorer.js

@@ -0,0 +1,149 @@
+import Controller from '@ember/controller';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { task, timeout } from 'ember-concurrency';
+
+export default class PodsExplorerController extends Controller {
+    @service hostRouter;
+    @service fetch;
+    @service notifications;
+    @service explorerState;
+    @service modalsManager;
+    @service crud;
+    @tracked cursor = '';
+    @tracked pod = '';
+    @tracked query = '';
+    queryParams = ['cursor', 'pod', 'query'];
+    columns = [
+        {
+            label: 'Name',
+            valuePath: 'name',
+            width: '75%',
+            cellComponent: 'table/cell/pod-content-name',
+            onClick: this.viewContents,
+        },
+        {
+            label: 'Type',
+            valuePath: 'type',
+            cellClassNames: 'capitalize',
+            width: '5%',
+        },
+        {
+            label: 'Size',
+            valuePath: 'size',
+            width: '5%',
+        },
+        {
+            label: 'Created At',
+            valuePath: 'created_at',
+            width: '15%',
+        },
+        {
+            label: '',
+            cellComponent: 'table/cell/pod-content-actions',
+            ddButtonText: false,
+            ddButtonIcon: 'ellipsis-h',
+            ddButtonIconPrefix: 'fas',
+            ddMenuLabel: 'Actions',
+            cellClassNames: 'overflow-visible',
+            wrapperClass: 'flex items-center justify-end mx-2',
+            width: '10%',
+            actions: (content) => {
+                return [
+                    {
+                        label: content.type === 'folder' ? 'Browse Folder' : 'View Contents',
+                        fn: this.viewContents,
+                    },
+                    {
+                        separator: true,
+                    },
+                    {
+                        label: 'Delete',
+                        fn: this.deleteSomething,
+                    },
+                ];
+            },
+            sortable: false,
+            filterable: false,
+            resizable: false,
+            searchable: false,
+        },
+    ];
+
+    @action reload() {
+        this.hostRouter.refresh();
+    }
+
+    @action back() {
+        if (typeof this.cursor === 'string' && this.cursor.length && this.cursor !== this.model.id) {
+            const current = this.reverseCursor();
+            return this.hostRouter.transitionTo('console.solid-protocol.pods.explorer', current, { queryParams: { cursor: this.cursor, pod: this.pod } });
+        }
+
+        this.hostRouter.transitionTo('console.solid-protocol.pods.index');
+    }
+
+    @action viewContents(content) {
+        if (content.type === 'folder') {
+            return this.hostRouter.transitionTo('console.solid-protocol.pods.explorer', content, { queryParams: { cursor: this.trackCursor(content), pod: this.pod } });
+        }
+
+        if (content.type === 'file') {
+            return this.hostRouter.transitionTo('console.solid-protocol.pods.explorer.content', content);
+        }
+
+        return this.hostRouter.transitionTo('console.solid-protocol.pods.explorer', this.pod, { queryParams: { cursor: this.trackCursor(content), pod: this.pod } });
+    }
+
+    @action deleteSomething() {
+        this.modalsManager.confirm({
+            title: 'Are you sure you want to delete this content?',
+            body: 'Deleting this Content will remove this content from this pod. This is irreversible!',
+            acceptButtonText: 'Delete Forever',
+            confirm: () => {},
+        });
+    }
+
+    @action deleteSelected() {
+        const selected = this.table.selectedRows;
+
+        this.crud.bulkDelete(selected, {
+            modelNamePath: 'name',
+            acceptButtonText: 'Delete All',
+            onSuccess: () => {
+                return this.hostRouter.refresh();
+            },
+        });
+    }
+
+    trackCursor(content) {
+        if (typeof this.cursor === 'string' && this.cursor.includes(content.id)) {
+            const segments = this.cursor.split(':');
+            const currentIndex = segments.findIndex((segment) => segment === content.id);
+
+            if (currentIndex > -1) {
+                const retainedSegments = segments.slice(0, currentIndex + 1);
+                this.cursor = retainedSegments.join(':');
+                return this.cursor;
+            }
+        }
+
+        this.cursor = this.cursor ? `${this.cursor}:${content.id}` : content.id;
+        return this.cursor;
+    }
+
+    reverseCursor() {
+        const segments = this.cursor.split(':');
+        segments.pop();
+        const current = segments[segments.length - 1];
+        this.cursor = segments.join(':');
+        return current;
+    }
+
+    @task({ restartable: true }) *search(event) {
+        yield timeout(300);
+        const query = typeof event.target.value === 'string' ? event.target.value : '';
+        this.hostRouter.transitionTo('console.solid-protocol.pods.explorer', this.model.id, { queryParams: { cursor: this.cursor, query } });
+    }
+}

package/addon/controllers/pods/index/pod.js

@@ -0,0 +1,12 @@
+import Controller from '@ember/controller';
+import { action } from '@ember/object';
+
+export default class PodsIndexPodController extends Controller {
+    @action setOverlayContext(overlayContextApi) {
+        this.overlayContextApi = overlayContextApi;
+    }
+
+    @action onPressClose() {
+        window.history.back();
+    }
+}

package/addon/controllers/pods/index.js

@@ -0,0 +1,137 @@
+import Controller from '@ember/controller';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { task, timeout } from 'ember-concurrency';
+
+export default class PodsIndexController extends Controller {
+    @service hostRouter;
+    @service notifications;
+    @service filters;
+    @service modalsManager;
+    @service crud;
+    @tracked query = '';
+
+    columns = [
+        {
+            label: 'Pod',
+            valuePath: 'name',
+            width: '80%',
+            cellComponent: 'table/cell/anchor',
+            onClick: this.explorePod,
+        },
+        {
+            label: 'Size',
+            valuePath: 'size',
+            width: '5%',
+        },
+        {
+            label: 'Created At',
+            valuePath: 'created_at',
+            width: '15%',
+        },
+        {
+            label: '',
+            cellComponent: 'table/cell/dropdown',
+            ddButtonText: false,
+            ddButtonIcon: 'ellipsis-h',
+            ddButtonIconPrefix: 'fas',
+            ddMenuLabel: 'Pod Actions',
+            cellClassNames: 'overflow-visible',
+            wrapperClass: 'flex items-center justify-end mx-2',
+            width: '10%',
+            actions: [
+                {
+                    label: 'Browse',
+                    fn: this.openPod,
+                },
+                {
+                    label: 'Backup',
+                    fn: this.backupPod,
+                },
+                {
+                    label: 'Re-sync',
+                    fn: this.resyncPod,
+                },
+                {
+                    separator: true,
+                },
+                {
+                    label: 'Delete',
+                    fn: this.deletePod,
+                },
+            ],
+            sortable: false,
+            filterable: false,
+            resizable: false,
+            searchable: false,
+        },
+    ];
+
+    @action reload() {
+        this.hostRouter.refresh();
+    }
+
+    @action openPod(pod) {
+        this.hostRouter.transitionTo('console.solid-protocol.pods.index.pod', pod);
+    }
+
+    @action explorePod(pod) {
+        this.hostRouter.transitionTo('console.solid-protocol.pods.explorer', pod, { queryParams: { cursor: pod.id, pod: pod.id } });
+    }
+
+    @action createPod() {
+        this.modalsManager.show('modals/create-pod', {
+            title: 'Create a new Pod',
+            acceptButtonText: 'Create Pod',
+            pod: {
+                name: null,
+            },
+            confirm: () => {},
+        });
+    }
+
+    @action backupPod() {
+        this.modalsManager.confirm({
+            title: 'Are you sure you want to create a backup?',
+            body: 'Running a backup will create a duplicate Pod with the same contents.',
+            acceptButtonText: 'Start Backup',
+            confirm: () => {},
+        });
+    }
+
+    @action resyncPod() {
+        this.modalsManager.confirm({
+            title: 'Are you sure you want to re-sync?',
+            body: 'Running a re-sync will update all data from Fleetbase to this pod, overwriting the current contents with the latest.',
+            acceptButtonText: 'Start Sync',
+            confirm: () => {},
+        });
+    }
+
+    @action deletePod() {
+        this.modalsManager.confirm({
+            title: 'Are you sure you want to delete this Pod?',
+            body: "Deleting this Pod will destroy this pod and all it's contents. This is irreversible!",
+            acceptButtonText: 'Delete Forever',
+            confirm: () => {},
+        });
+    }
+
+    @action deleteSelectedPods() {
+        const selected = this.table.selectedRows;
+
+        this.crud.bulkDelete(selected, {
+            modelNamePath: 'name',
+            acceptButtonText: 'Delete All',
+            onSuccess: () => {
+                return this.hostRouter.refresh();
+            },
+        });
+    }
+
+    @task({ restartable: true }) *search(event) {
+        yield timeout(300);
+        this.query = typeof event.target.value === 'string' ? event.target.value : '';
+    }
+}

package/addon/routes/account.js

@@ -0,0 +1,3 @@
+import Route from '@ember/routing/route';
+
+export default class AccountRoute extends Route {}

package/addon/routes/home.js

@@ -0,0 +1,3 @@
+import Route from '@ember/routing/route';
+
+export default class HomeRoute extends Route {}

package/addon/routes/pods/explorer/content.js

@@ -0,0 +1,10 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+
+export default class PodsExplorerContentRoute extends Route {
+    @service fetch;
+
+    model({ slug }) {
+        return this.fetch.get('pods', { slug }, { namespace: 'solid/int/v1' });
+    }
+}

package/addon/routes/pods/explorer.js

@@ -0,0 +1,44 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+
+export default class PodsExplorerRoute extends Route {
+    @service fetch;
+    @service explorerState;
+
+    queryParmas = {
+        query: {
+            refreshModel: true,
+        },
+        pod: {
+            refreshModel: false,
+        },
+        cursor: {
+            refreshModel: false,
+        },
+    };
+
+    @action willTransition(transition) {
+        const pod = transition.to.queryParams.pod;
+        const cursor = transition.to.queryParams.cursor;
+        if (pod && cursor) {
+            this.explorerState.trackWithCursor(pod, cursor);
+        }
+    }
+
+    beforeModel(transition) {
+        const pod = transition.to.queryParams.pod;
+        const cursor = transition.to.queryParams.cursor;
+        if (pod && cursor) {
+            this.explorerState.trackWithCursor(pod, cursor);
+        }
+    }
+
+    model({ id, query }) {
+        return this.fetch.get('pods', { id, query }, { namespace: 'solid/int/v1' });
+    }
+
+    afterModel(model, transition) {
+        this.explorerState.track(transition.to.queryParams.pod, model);
+    }
+}

package/addon/routes/pods/index/pod.js

@@ -0,0 +1,3 @@
+import Route from '@ember/routing/route';
+
+export default class PodsIndexPodRoute extends Route {}

package/addon/routes/pods/index.js

@@ -0,0 +1,21 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+
+export default class PodsIndexRoute extends Route {
+    @service fetch;
+    @service appCache;
+
+    queryParams = {
+        query: {
+            refreshModel: true,
+        },
+    };
+
+    model(params) {
+        return this.fetch.get('pods', params, { namespace: 'solid/int/v1' });
+    }
+
+    afterModel(model) {
+        this.appCache.set('solid:pods', model);
+    }
+}

package/addon/routes.js

@@ -1,3 +1,14 @@
 import buildRoutes from 'ember-engines/routes';
 
-export default buildRoutes(function () {});
+export default buildRoutes(function () {
+    this.route('home', { path: '/' });
+    this.route('account');
+    this.route('pods', function () {
+        this.route('explorer', { path: '/explorer/:id' }, function () {
+            this.route('content', { path: '/~/:slug' });
+        });
+        this.route('index', { path: '/' }, function () {
+            this.route('pod', { path: '/pod/:slug' });
+        });
+    });
+});

package/addon/services/explorer-state.js

@@ -0,0 +1,101 @@
+import Service from '@ember/service';
+import Evented from '@ember/object/evented';
+import { inject as service } from '@ember/service';
+import { isArray } from '@ember/array';
+
+export default class ExplorerStateService extends Service.extend(Evented) {
+    @service appCache;
+
+    trackWithCursor(id, cursor) {
+        const segments = typeof cursor === 'string' ? cursor.split(':') : [];
+        const state = this.get(id);
+        this.update(
+            id,
+            state.filter((content) => {
+                return segments.includes(content.id);
+            })
+        );
+        this.clean(id);
+        return this;
+    }
+
+    track(id, content) {
+        if (id === content.id) {
+            this.initialize(id, content);
+        } else {
+            this.push(id, content);
+        }
+
+        this.clean(id);
+        return this;
+    }
+
+    initialize(id, content) {
+        const state = this.get(id);
+        if (isArray(state) && state.length === 0) {
+            state.pushObject(content);
+            this.update(id, state);
+        }
+
+        return this;
+    }
+
+    push(id, content) {
+        const state = this.get(id);
+        if (isArray(state) && this.doesntHave(id, content)) {
+            state.pushObject(content);
+            this.update(id, state);
+        }
+
+        return this;
+    }
+
+    pop(id) {
+        const state = this.get(id);
+        if (isArray(state)) {
+            state.pop();
+            this.update(id, state);
+        }
+
+        return this;
+    }
+
+    has(id, content) {
+        const state = this.get(id);
+        return state.findIndex((_) => _.id === content.id) >= 0;
+    }
+
+    doesntHave(id, content) {
+        return !this.has(id, content);
+    }
+
+    get(id) {
+        return this.appCache.get(`${id}:explorer:state`, []);
+    }
+
+    update(id, state = []) {
+        this.appCache.set(`${id}:explorer:state`, state);
+        this.trigger('change', id, state);
+        return this;
+    }
+
+    clean(id) {
+        const state = this.get(id);
+        if (isArray(state)) {
+            const seenIds = new Set();
+            this.update(
+                id,
+                state.filter((_) => {
+                    if (seenIds.has(_.id)) {
+                        return false;
+                    }
+
+                    seenIds.add(_.id);
+                    return true;
+                })
+            );
+        }
+
+        return this;
+    }
+}

package/addon/styles/solid-engine.css

@@ -27,3 +27,49 @@ body[data-theme='dark'] .solid-fleetbase-home-container a:not([class*='text-']),
 .solid-fleetbase-home-container a:hover {
     opacity: 0.5;
 }
+
+.pod-explorer-breadcrumb-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.pod-explorer-breadcrumb-container > .pod-explorer-breadcrumb:first-child {
+    border-top-left-radius: 0.75rem;
+    border-bottom-left-radius: 0.75rem;
+}
+
+.pod-explorer-breadcrumb-container > .pod-explorer-breadcrumb:last-child {
+    border-top-right-radius: 0.75rem;
+    border-bottom-right-radius: 0.75rem;
+}
+
+.pod-explorer-breadcrumb {
+    font-size: 0.85rem;
+    border: 1px #111827 solid;
+    padding: 0 0.75rem;
+    line-height: 1.75rem;
+    background-color: #1f2937;
+    color: #fff;
+}
+
+.pod-explorer-breadcrumb:hover {
+    opacity: 0.75;
+}
+
+.pod-explorer-breadcrumb.active-breadcrumb {
+    background-color: #2563eb;
+    color: #eff6ff;
+}
+
+body[data-theme='light'] .pod-explorer-breadcrumb {
+    border: 1px #e5e7eb solid;
+    background-color: #e5e7eb;
+    color: #1f2937;
+}
+
+body[data-theme='light'] .pod-explorer-breadcrumb.active-breadcrumb {
+    background-color: #3b82f6;
+    color: #eff6ff;
+    border-color: #2563eb;
+}

package/addon/templates/account.hbs

@@ -0,0 +1,42 @@
+<Layout::Section::Header @title="Your Account" />
+
+<Layout::Section::Body class="overflow-y-scroll h-full">
+    <div class="container mx-auto h-screen">
+        <div class="max-w-3xl my-10 mx-auto">
+            <ContentPanel @title="Solid Identity" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
+                <form class="flex flex-col md:flex-row" {{on "submit" (perform this.saveProfile)}}>
+                    <div class="w-32 flex flex-col justify-center mb-6 mr-6">
+                        <Image src={{this.user.avatar_url}} @fallbackSrc={{config "defaultValues.userImage"}} alt={{this.user.name}} class="w-32 h-32 rounded-md" />
+                        <FileUpload @name={{t "console.account.index.photos"}} @accept="image/*" @onFileAdded={{this.uploadNewPhoto}} @labelClass="flex flex-row items-center justify-center" as |queue|>
+                            <a tabindex={{0}} class="flex items-center px-0 mt-2 text-xs no-underline truncate btn btn-sm btn-default" disabled={{queue.files.length}}>
+                                {{#if queue.files.length}}
+                                    <div class="mr-1.5">
+                                        <Spinner />
+                                    </div>
+                                    <span>
+                                        {{t "common.uploading"}}
+                                    </span>
+                                {{else}}
+                                    <FaIcon @icon="image" class="mr-1.5" />
+                                    <span>
+                                        {{t "console.account.index.upload-new"}}
+                                    </span>
+                                {{/if}}
+                            </a>
+                        </FileUpload>
+                    </div>
+                    <div class="flex-1">
+                        <div class="grid grid-cols-1 gap-2 text-xs dark:text-gray-100">
+                            <InputGroup @name={{t "common.name"}} @value={{this.user.name}} />
+                            <InputGroup @name={{t "common.email"}} @type="email" @value={{this.user.email}} />
+                        </div>
+                        <div class="mt-3 flex items-center justify-end">
+                            <Button @buttonType="submit" @type="primary" @size="lg" @icon="save" @text={{t "common.save-button-text"}} @onClick={{perform this.saveProfile}} @isLoading={{not this.saveProfile.isIdle}} />
+                        </div>
+                    </div>
+                </form>
+            </ContentPanel>
+        </div>
+    </div>
+    <Spacer @height="500px" />
+</Layout::Section::Body>

package/addon/templates/application.hbs

@@ -1,15 +1,20 @@
-<Layout::Section::Container class="solid-fleetbase-home">
-    <Layout::Section::Header @title="Solid for Fleetbase" />
+<EmberWormhole @to="sidebar-menu-items">
+    <Layout::Sidebar::Item @route="console.solid-protocol.home" @icon="home">Home</Layout::Sidebar::Item>
+    <Layout::Sidebar::Item @route="console.solid-protocol.pods" @icon="folder-tree">Pods</Layout::Sidebar::Item>
+    {{!-- <Layout::Sidebar::Panel @open={{true}} @title="Pods">
+        <Layout::Sidebar::Item @route="console.solid-protocol.pods" @icon="folder-tree">All</Layout::Sidebar::Item>
+        {{#each this.pods as |pod|}}
+            <LinkTo @route="pods.explorer" @model={{pod}} @query={{hash id=pod.id pod=pod.id}} class="next-nav-item">
+                <div class="next-nav-item-icon-container">
+                    <FaIcon @icon="folder" @size="xs" />
+                </div>
+                <div class="truncate w-10/12 ">{{pod.name}}</div>
+            </LinkTo>
+        {{/each}}
+    </Layout::Sidebar::Panel> --}}
+    <Layout::Sidebar::Item @route="console.solid-protocol.account" @icon="user">Account</Layout::Sidebar::Item>
+</EmberWormhole>
 
-    <Layout::Section::Body class="solid-fleetbase-home-container">
-        <h1>Welcome to Solid for Fleetbase</h1>
-        <h2>Getting Started</h2>
-        <div class="mt-2">
-            <p>
-                <a href="#" {{on "click" (perform this.authenticate)}}>Sign up for an account</a> to get started with your own Pod and WebID. Once you are logged in you can begin to manage your pods and sync data directly from Fleetbase to your Pods.
-            </p>
-        </div>
-        {{!-- <Button @text="Click to Test" @icon="magic" @onClick={{perform this.getAccountIndex}} @wrapperClass="mt-4" /> --}}
-    </Layout::Section::Body>
+<Layout::Section::Container class="solid-fleetbase-home">
     {{outlet}}
 </Layout::Section::Container>

package/addon/templates/home.hbs

@@ -0,0 +1,11 @@
+<Layout::Section::Header @title="Solid for Fleetbase" />
+<Layout::Section::Body class="solid-fleetbase-home-container">
+    <h1>Welcome to Solid for Fleetbase</h1>
+    <h2>Getting Started</h2>
+    <div class="mt-2">
+        <p>
+            <a href="#" {{on "click" (perform this.authenticate)}}>Sign up for an account</a> to get started with your own Pod and WebID. Once you are logged in you can begin to manage your pods and sync data directly from Fleetbase to your Pods.
+        </p>
+    </div>
+    {{!-- <Button @text="Click to Test" @icon="magic" @onClick={{perform this.getAccountIndex}} @wrapperClass="mt-4" /> --}}
+</Layout::Section::Body>

package/addon/templates/pods/explorer/content.hbs

@@ -0,0 +1,19 @@
+<Overlay @isOpen={{true}} @onLoad={{this.setOverlayContext}} @position="right" @noBackdrop={{true}} @fullHeight={{true}} @width="600px" @isResizable={{true}}>
+    <Overlay::Header @title={{@model.name}} @hideStatusDot={{true}} @titleWrapperClass="leading-5">
+        <div class="flex flex-1 justify-end">
+            <Button @type="default" @icon="times" @helpText={{t "common.close"}} @onClick={{this.onPressClose}} />
+        </div>
+    </Overlay::Header>
+
+    <Overlay::Body>
+        <div class="p-4 space-y-2">
+            <div>ID: {{@model.id}}</div>
+            <div>Name: {{@model.name}}</div>
+            <div>Size: {{@model.size}}</div>
+            <div class="mt-2 rounded-md border border-gray-700 p-3 bg-gray-800">
+                <div class="font-semibold">Contents:</div>
+                <div></div>
+            </div>
+        </div>
+    </Overlay::Body>
+</Overlay>