@live-change/task-frontend 0.8.27 → 0.8.29

package/front/src/Index.vue

@@ -1,13 +1,57 @@
 <template>
-  <div>
-    <h1>Hello world!</h1>
-    <p>{{ currentTime }}</p>
-    <Clock :time="currentTime" />
+  <div class="flex flex-row w-full justify-content-evenly">
+    <div class="surface-card shadow-1 border-round px-3 py-1">
+      <h2>Built shelters</h2>
+
+      <div>
+
+      </div>
+
+      <command-form service="testTasks" action="buildShelter" reset-on-done v-slot="{ data, definition }">
+        <pre>{{ definition.properties }}</pre>
+        <pre>{{data}}</pre>
+
+        <div class="text text-xl">
+          Size:
+        </div>
+        <div class="pl-2">
+          <div class="flex flex-row align-items-center">
+            <label for="role" class="mr-2 w-5rem text-right">Width:</label>
+            <InputNumber v-model="data.size.width" mode="decimal"
+                         showButtons :min="3" :max="9" />
+          </div>
+          <div class="flex flex-row align-items-center">
+            <label for="role" class="mr-2 w-5rem text-right">Height:</label>
+            <InputNumber v-model="data.size.height" mode="decimal" showButtons :min="3" :max="9" />
+          </div>
+          <div class="flex flex-row align-items-center">
+            <label for="role" class="mr-2 w-5rem text-right">Length:</label>
+            <InputNumber v-model="data.size.length" mode="decimal" showButtons :min="3" :max="9" />
+          </div>
+
+          <div class="flex flex-row align-items-center">
+            <label for="role" class="mr-2 w-5rem">Wood type:</label>
+            <Dropdown id="role" class="w-14rem" v-model="data.woodType" placeholder="Select a Wood type"
+                      :options="definition.properties.woodType.options" />
+          </div>
+
+          <div class="text-right">
+            <Button type="submit" icon="pi pi-play" label="Build" class="mt-2" />
+          </div>
+        </div>
+
+      </command-form>
+    </div>
+    <div class="surface-card shadow-1 border-round px-3 py-1">
+      <h2>Tasks</h2>
+
+    </div>
   </div>
 </template>
 
 <script setup>
-  import { currentTime } from "@live-change/frontend-base";
+
+
 
 </script>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/task-frontend",
-  "version": "0.8.27",
+  "version": "0.8.29",
   "scripts": {
     "memDev": "node server/start.js memDev --enableSessions --initScript ./init.js --dbAccess",
     "localDevInit": "rm tmp.db; node server/start.js localDev --enableSessions --initScript ./init.js",
@@ -35,41 +35,41 @@
     "@codemirror/language": "6.10.1",
     "@dotenvx/dotenvx": "0.27.0",
     "@fortawesome/fontawesome-free": "^6.4.2",
-    "@live-change/access-control-frontend": "^0.8.27",
-    "@live-change/access-control-service": "^0.8.27",
-    "@live-change/backup-service": "^0.8.27",
-    "@live-change/blog-frontend": "^0.8.27",
-    "@live-change/blog-service": "^0.8.27",
-    "@live-change/cli": "^0.8.27",
-    "@live-change/content-frontend": "^0.8.27",
-    "@live-change/content-service": "^0.8.27",
-    "@live-change/dao": "^0.8.27",
-    "@live-change/dao-vue3": "^0.8.27",
-    "@live-change/dao-websocket": "^0.8.27",
-    "@live-change/db-client": "^0.8.27",
-    "@live-change/email-service": "^0.8.27",
-    "@live-change/framework": "^0.8.27",
-    "@live-change/frontend-auto-form": "^0.8.27",
-    "@live-change/frontend-base": "^0.8.27",
-    "@live-change/geoip-service": "^0.8.27",
-    "@live-change/image-frontend": "^0.8.27",
-    "@live-change/locale-settings-service": "^0.8.27",
-    "@live-change/password-authentication-service": "^0.8.27",
-    "@live-change/prosemirror-service": "^0.8.27",
-    "@live-change/secret-code-service": "^0.8.27",
-    "@live-change/secret-link-service": "^0.8.27",
-    "@live-change/session-service": "^0.8.27",
-    "@live-change/task-service": "^0.8.27",
-    "@live-change/upload-frontend": "^0.8.27",
-    "@live-change/url-frontend": "^0.8.27",
-    "@live-change/url-service": "^0.8.27",
-    "@live-change/user-frontend": "^0.8.27",
-    "@live-change/user-identification-service": "^0.8.27",
-    "@live-change/user-service": "^0.8.27",
-    "@live-change/vote-service": "^0.8.27",
-    "@live-change/vue3-components": "^0.8.27",
-    "@live-change/vue3-ssr": "^0.8.27",
-    "@live-change/wysiwyg-frontend": "^0.8.27",
+    "@live-change/access-control-frontend": "^0.8.29",
+    "@live-change/access-control-service": "^0.8.29",
+    "@live-change/backup-service": "^0.8.29",
+    "@live-change/blog-frontend": "^0.8.29",
+    "@live-change/blog-service": "^0.8.29",
+    "@live-change/cli": "^0.8.29",
+    "@live-change/content-frontend": "^0.8.29",
+    "@live-change/content-service": "^0.8.29",
+    "@live-change/dao": "^0.8.29",
+    "@live-change/dao-vue3": "^0.8.29",
+    "@live-change/dao-websocket": "^0.8.29",
+    "@live-change/db-client": "^0.8.29",
+    "@live-change/email-service": "^0.8.29",
+    "@live-change/framework": "^0.8.29",
+    "@live-change/frontend-auto-form": "^0.8.29",
+    "@live-change/frontend-base": "^0.8.29",
+    "@live-change/geoip-service": "^0.8.29",
+    "@live-change/image-frontend": "^0.8.29",
+    "@live-change/locale-settings-service": "^0.8.29",
+    "@live-change/password-authentication-service": "^0.8.29",
+    "@live-change/prosemirror-service": "^0.8.29",
+    "@live-change/secret-code-service": "^0.8.29",
+    "@live-change/secret-link-service": "^0.8.29",
+    "@live-change/session-service": "^0.8.29",
+    "@live-change/task-service": "^0.8.29",
+    "@live-change/upload-frontend": "^0.8.29",
+    "@live-change/url-frontend": "^0.8.29",
+    "@live-change/url-service": "^0.8.29",
+    "@live-change/user-frontend": "^0.8.29",
+    "@live-change/user-identification-service": "^0.8.29",
+    "@live-change/user-service": "^0.8.29",
+    "@live-change/vote-service": "^0.8.29",
+    "@live-change/vue3-components": "^0.8.29",
+    "@live-change/vue3-ssr": "^0.8.29",
+    "@live-change/wysiwyg-frontend": "^0.8.29",
     "@vueuse/core": "^10.9.0",
     "codeceptjs-assert": "^0.0.5",
     "compression": "^1.7.4",
@@ -91,7 +91,7 @@
     "vue3-scroll-border": "0.1.6"
   },
   "devDependencies": {
-    "@live-change/codeceptjs-helper": "^0.8.27",
+    "@live-change/codeceptjs-helper": "^0.8.29",
     "codeceptjs": "^3.5.12",
     "generate-password": "1.7.1",
     "playwright": "^1.41.2",
@@ -102,5 +102,5 @@
   "author": "Michał Łaszczewski <michal@laszczewski.pl>",
   "license": "ISC",
   "description": "",
-  "gitHead": "9a84f91121fb5fc2c9fd2acb9a7e5a0a952d611e"
+  "gitHead": "9bc23973964b33f2e837db9fbf8dfb51916752a8"
 }

package/server/app.config.js

@@ -94,6 +94,9 @@ app.config = {
       name: 'backup',
       port: 8007
     },
+    {
+      name: 'testTasks'
+    }
   ]
 }
 

package/server/services.list.js

@@ -47,3 +47,8 @@ export {
   task,
   init
 }
+
+import testTasks from './testTasks.js'
+export {
+  testTasks
+}

package/server/testTasks.js

@@ -0,0 +1,287 @@
+import App from '@live-change/framework'
+const app = App.app()
+
+import relationsPlugin from '@live-change/relations-plugin'
+import accessControlService from '@live-change/access-control-service'
+
+const definition = app.createServiceDefinition({
+  name: "testTasks",
+  use: [ relationsPlugin, accessControlService ]
+})
+
+import { task } from '@live-change/task-service'
+
+import PQueue from 'p-queue'
+
+const workersCount = 2
+const workDuration = 1000
+const pauseDuration = 500
+
+
+const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
+
+const workerQueue = new PQueue({ concurrency: workersCount })
+
+const getWood = task({
+  name: 'getWood',
+  properties: {
+    woodType: {
+      type: String,
+      validation: ['nonEmpty']
+    },
+  },
+  returns: {
+    type: 'Wood',
+    properties: {
+      type: {
+        type: String
+      }
+    }
+  },
+  async execute({ woodType }, { service, task }, emit) {
+    await sleep(workDuration)
+    return {
+      type: 'Wood',
+      woodType
+    }
+  }
+})
+
+const cutWood = task({
+  name: 'cutWood',
+  properties: {
+    wood: {
+      type: 'Wood',
+      properties: {
+        woodType: {
+          type: String
+        }
+      }
+    },
+  },
+  returns: {
+    type: Array,
+    of: {
+      type: 'Plank',
+      properties: {
+        type: {
+          type: String
+        }
+      }
+    }
+  },
+  async execute({ wood }, { service, task }, emit) {
+    await sleep(workDuration)
+    return Array(4).fill(0).map(() => ({
+      type: 'Plank',
+      woodType: wood.woodType
+    }))
+  }
+})
+
+const makePlanks = task({
+  name: 'makePlanks',
+  properties: {
+    woodType: {
+      type: String,
+      validation: ['nonEmpty']
+    },
+  },
+  returns: {
+    type: Array,
+    of: {
+      type: 'Plank',
+      properties: {
+        type: {
+          type: String
+        }
+      }
+    }
+  },
+  async execute({ type }, { service, task }, emit) {
+    const wood = await workerQueue.add(task.run(getWood, { type }))
+    await sleep(pauseDuration)
+    const planks = await workerQueue.add(task.run(cutWood, { wood }))
+    await sleep(pauseDuration)
+    return planks
+  }
+})
+
+const buildShelter = task({
+  name: "buildShelter",
+  properties: {
+    size: {
+      type: Object,
+      properties: {
+        width: { type: Number },
+        height: { type: Number },
+        length: { type: Number }
+      },
+      validation: ['nonEmpty']
+    },
+    woodType: {
+      type: String,
+      options: ['acacia', 'oak', 'birch', 'spruce'],
+      validation: ['nonEmpty']
+    },
+  },
+  returns: {
+    type: 'Shelter',
+    properties: {
+      walls: {
+        type: Array,
+        of: {
+          type: 'Wall'
+        }
+      },
+      roof: {
+        type: 'Roof'
+      }
+    }
+  },
+  async execute({ size: { width, height, length }, woodType }, { service, task }, emit) {
+    //// Probably useless
+    // compute wall sizes
+    const wall1Size = width * height
+    const wall2Size = length * height
+    // compute roof size
+    const roofSize = width * length
+    // compute total plank blocks amount
+    const howManyPlanks = wall1Size * 2 + wall2Size * 2 + roof
+
+    let planksCounter = 0
+    task.progress(planksCounter, howManyPlanks)
+    // gather planks
+    const planks = await Promise.all( // do planks in parallel
+      Array(howManyPlanks / 4)
+        .fill(0)
+        .map(
+          () => workerQueue.add(async () => {
+            const planks = await task.run(makePlanks, { woodType })
+            planksCounter += 4
+            task.progress(planksCounter, howManyPlanks)
+            return planks
+          })
+        )
+    )
+
+    await sleep(pauseDuration)
+
+    let placedPlanks = 0
+    // build walls
+    const walls = await Promise.all( // do walls in parallel
+      [wall1, wall2, wall1, wall2].map(
+        async (wallSize) => {
+          const wall = await workerQueue.add(task.run(buildWall, { planks, wallSize }))
+          placedPlanks += wallSize
+          task.progress(planksCounter, howManyPlanks)
+          return wall
+        }
+      )
+    )
+    
+    await sleep(pauseDuration)
+
+    // build roof
+    const roof = await workerQueue.add(
+      async () => {
+        const roof = await task.run(buildRoof, { planks })
+        placedPlanks += roofSize
+        return roof
+      }
+    )
+    
+    await sleep(pauseDuration)
+
+    return {
+      type: 'Shelter',
+      walls,
+      roof
+    }
+  }
+})
+
+definition.action({
+  name: "buildShelter",
+  properties: {
+    size: {
+      type: Object,
+      properties: {
+        width: {
+          type: Number,
+          default: 4
+        },
+        height: {
+          type: Number,
+          default: 3
+        },
+        length: {
+          type: Number,
+          default: 4
+        }
+      },
+      validation: ['nonEmpty']
+    },
+    woodType: {
+      type: String,
+      validation: ['nonEmpty'],
+      options: ['acacia', 'oak', 'birch', 'spruce'],
+      default: 'oak'
+    },
+    place: {
+      type: String,
+      validation: ['nonEmpty'],
+      default: 'forest'
+    }
+  },
+  async execute({ size, woodType, place }, { service, client, command }, emit) {
+    await buildShelter.start({ size, woodType, place }, 'userAction', command.id)
+
+  }
+})
+
+const Shelter = definition.model({
+  name: "Shelter",
+  properties: {
+    size: {
+      type: Object,
+      properties: {
+        width: { type: Number },
+        height: { type: Number },
+        length: { type: Number }
+      },
+      validation: ['nonEmpty']
+    },
+    woodType: {
+      type: String,
+      options: ['acacia', 'oak', 'birch', 'spruce'],
+      validation: ['nonEmpty']
+    },
+    walls: {
+      type: Array,
+      of: {
+        type: 'Wall'
+      }
+    },
+    roof: {
+      type: 'Roof'
+    }
+  }
+})
+
+definition.trigger({
+  name: 'taskBuildShelterDone',
+  properties: {
+    shelter: {
+      type: 'Shelter'
+    }
+  },
+  async execute(props, { service, client }, emit) {
+    console.log("Task done", props)
+    const { result } = props
+    console.log("Shelter built", result)
+  }
+})
+
+
+export default definition

package/front/src/components/Clock.vue

@@ -1,22 +0,0 @@
-
-<template>
-  <div class="surface-card p-3 shadow-2 border-round">
-    {{ d(new Date(), 'long') }}
-  </div>
-</template>
-
-<script setup lang="ts">
-  import { defineProps, toRefs } from 'vue'
-  import { useI18n } from 'vue-i18n'
-  const { t, d, n } = useI18n()
-
-  const props = defineProps<{
-    time: number
-  }>()
-
-  const { time } = toRefs(props)
-</script>
-
-<style scoped>
-
-</style>