moved old router. fetching factory

packages/graphql-server/modules/factory/index.js

@@ -5,7 +5,7 @@ const { factoryOptions, getElements } = require('@wcfactory/common/config')
  * SDK
  */
 const getFactories = () => factoryOptions().map(i => Object.assign({ name: i.name, location: i.value}))
-const getFactory = (name) => getFactories().find(i => i.name === name).map(i => Object.assign({}, i, { factory: name }))
+const getFactory = (name) => getFactories().find(i => i.name === name)
 
 /**
  * Define Schema

packages/ui/components/wcfactory-ui-factories.js

@@ -37,7 +37,7 @@ class WCFactoryUIFactories extends LitElement {
       listing of factories
       <ul>
         ${this.factories.map(factory => html`
-            <li>🏭 ${factory.name}</li>
+            <li><a href="/factories/${factory.name}">🏭 ${factory.name}</a></li>
           `)}
       </ul>
     `;

packages/ui/components/wcfactory-ui-factory.js

@@ -0,0 +1,73 @@
+import { LitElement, html } from 'lit-element';
+import gql from 'graphql-tag'
+import client from '../client.js'
+
+const query = gql`
+  query($name: ID!) {
+    factory(name: $name) {
+      name
+      location
+      elements {
+        name
+        location
+      }
+    }
+  }
+`;
+
+class WCFactoryUIFactory extends LitElement {
+  static get properties() {
+    return {
+      location: { type: Object },
+      loading: { type: Boolean },
+      factory: { type: Object }
+    }
+  }
+
+  constructor() {
+    super()
+    this.factory = null
+    this.loading = true
+  }
+
+  render() {
+    // notice location changed
+    const { factory } = this.location.params
+    // update factory
+    this.fetchFactory(factory)
+
+    // render
+    if (this.loading) {
+      return html`loading...`
+    }
+    else if (this.factory) {
+      return html`
+        Name: ${this.factory.name} <br>
+        Location: ${this.factory.location} <br>
+        Elements: (${this.factory.elements.length})
+          <ul>
+            ${this.factory.elements.map(element => html`
+                <li>${element.name}</li>
+              `)}
+          </ul>
+      `;
+    }
+  }
+
+  fetchFactory(factory) {
+    try {
+      client.watchQuery({
+        query,
+        variables: {
+          name: factory
+        }
+      }).subscribe(({ data: { factory }}) => {
+        this.loading = false
+        this.factory = factory
+      })
+    } catch (error) {
+    }
+  }
+}
+
+customElements.define('wcfactory-ui-factory', WCFactoryUIFactory);

packages/ui/components/wcfactory-ui.js

@@ -1,6 +1,7 @@
 import { LitElement, html } from 'lit-element';
 import {Router} from '@vaadin/router';
 import './wcfactory-ui-factories.js'
+import './wcfactory-ui-factory.js'
 import './wcfactory-ui-404.js'
 
 class WCFactoryUI extends LitElement {
@@ -22,6 +23,8 @@ class WCFactoryUI extends LitElement {
     const router = new Router(outlet);
     router.setRoutes([
       {path: '/', component: 'wcfactory-ui-factories'},
+      {path: '/factories', component: 'wcfactory-ui-factory'},
+      {path: '/factories/:factory', component: 'wcfactory-ui-factory'},
       {path: '(.*)', component: 'wcfactory-ui-404'},
     ]);
   }