julien/tps
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ (article) add icons and multiple flow steps

Browse Source
This commit is contained in:
Julien Calixte
2023-07-29 22:49:32 +02:00
parent 77285713ea
commit 9f842c3b6e
13 changed files with 135 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
.vscode/settings.json vendored
View File

@@ -1,23 +1,4 @@
{
"typescript.tsdk": "node_modules/typescript/lib",
"workbench.colorCustomizations": {
"activityBar.activeBackground": "#0037c5",
"activityBar.background": "#0037c5",
"activityBar.foreground": "#e7e7e7",
"activityBar.inactiveForeground": "#e7e7e799",
"activityBarBadge.background": "#200009",
"activityBarBadge.foreground": "#e7e7e7",
"commandCenter.border": "#e7e7e799",
"sash.hoverBorder": "#0037c5",
"statusBar.background": "#002992",
"statusBar.foreground": "#e7e7e7",
"statusBarItem.hoverBackground": "#0037c5",
"statusBarItem.remoteBackground": "#002992",
"statusBarItem.remoteForeground": "#e7e7e7",
"titleBar.activeBackground": "#002992",
"titleBar.activeForeground": "#e7e7e7",
"titleBar.inactiveBackground": "#00299299",
"titleBar.inactiveForeground": "#e7e7e799"
},
"peacock.color": "#002992"
}

2
README.md
View File

@@ -30,7 +30,7 @@ The more the team investigate, the more the team learn and start to be extremely
### Stock
Blue bins are your security stock. It's to make sure the next team will always have material to transform. But it comes with a cost: overburden, stagnation (increase lead time) and duplicated mistakes (not simulated here).
Blue bins are your security stock, to make sure teams can work without any blockers. It's to make sure the next team will always have material to transform. But it comes with a cost: overburden, stagnation (increase lead time) and duplicated mistakes (not simulated here).
The less you have, the less your team has mental charge.

3
src/App.vue
View File

@@ -1,10 +1,13 @@
<script setup lang="ts">
import FlowArticle from '@/modules/FlowArticle.vue'
import { StarportCarrier } from 'vue-starport'
</script>
<template>
<main id="main-app">
<StarportCarrier>
<FlowArticle />
</StarportCarrier>
</main>
</template>

28
src/icons/BaseIcon.vue Normal file
View File

@@ -0,0 +1,28 @@
<script setup lang="ts">
withDefaults(defineProps<{ color: string }>(), {
color: 'var(--primary-color)'
})
</script>
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
class="icon icon-tabler icon-tabler-search"
width="20"
height="20"
viewBox="0 0 24 24"
stroke-width="3"
:stroke="color"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
>
<slot />
</svg>
</template>
<style>
svg {
vertical-align: text-bottom;
}
</style>

15
src/icons/ProblemSolvingIcon.vue Normal file
View File

@@ -0,0 +1,15 @@
<script setup lang="ts">
import BaseIcon from './BaseIcon.vue'
withDefaults(defineProps<{ color: string }>(), {
color: 'var(--primary-color)'
})
</script>
<template>
<BaseIcon :color="color">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" />
<path d="M21 21l-6 -6" />
</BaseIcon>
</template>

17
src/icons/PullSystemIcon.vue Normal file
View File

@@ -0,0 +1,17 @@
<script setup lang="ts">
import BaseIcon from './BaseIcon.vue'
withDefaults(defineProps<{ color: string }>(), {
color: 'var(--primary-color)'
})
</script>
<template>
<BaseIcon :color="color">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M20 12l-10 0" />
<path d="M20 12l-4 4" />
<path d="M20 12l-4 -4" />
<path d="M4 4l0 16" />
</BaseIcon>
</template>

17
src/icons/PushSystemIcon.vue Normal file
View File

@@ -0,0 +1,17 @@
<script setup lang="ts">
import BaseIcon from './BaseIcon.vue'
withDefaults(defineProps<{ color: string }>(), {
color: 'var(--primary-color)'
})
</script>
<template>
<BaseIcon :color="color">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<path d="M14 12l-10 0" />
<path d="M14 12l-4 4" />
<path d="M14 12l-4 -4" />
<path d="M20 4l0 16" />
</BaseIcon>
</template>

3
src/modules/FlowArticle.vue
View File

@@ -12,8 +12,9 @@ import SimulationDashboard from '@/modules/simulation/SimulationDashboard.vue'
<FlowIntro class="text" />
<hr />
<FlowHypothesis class="text" />
<FeatureSteps alias="introducing" />
<FlowDashboard />
<FeatureSteps />
<FeatureSteps alias="playground" />
<SimulationControls />
<SimulationDashboard />
</div>

16
src/modules/article/FlowIntro.vue
View File

@@ -1,11 +1,17 @@
<template>
<div class="flow-intro">
<p>
This article is here to plan ahead ourselves to what can be misconceptions
on how to be effective. Teams will overproduce. They will do everything
piece they can as they are autonomous. They will then struggle to get these
pieces to the very end when they will transfer them to the others teams.
Multitasking will drastically drop the productivity. So the fear of having
nothing to give to the next team pushes us to produce just in case. Bugs
lead to more bugs that lead to more bugs.
piece they can as they are autonomous. They will then struggle to get
these pieces to the very end when they will transfer them to the others
teams. Multitasking will drastically drop the productivity. So the fear of
having nothing to give to the next team pushes us to produce just in case.
Bugs lead to more bugs that lead to more bugs.
</p>
<p>
When money and pressure are in the game, fear, uncertainty, and doubt
spread out rapidly.
</p>
</div>
</template>

5
src/modules/feature/FeatureStep.vue
View File

@@ -6,6 +6,7 @@ import { computed } from 'vue'
import { Starport } from 'vue-starport'
const props = defineProps<{
prefix: string
step: FeatureStep
features: Feature[]
}>()
@@ -37,7 +38,7 @@ const isLive = computed(
<ul v-if="hasFeaturesInProgress">
<li v-for="feature in featuresInProgress" :key="feature.name">
<Starport
:port="feature.name"
:port="`${props.prefix}-${feature.name}`"
style="height: var(--feature-item-height)"
>
<FeatureItem :feature="feature" />
@@ -70,7 +71,7 @@ const isLive = computed(
<ul class="done-list">
<li v-for="feature in featuresDone" :key="feature.name">
<Starport
:port="feature.name"
:port="`${props.prefix}-${feature.name}`"
style="height: calc(var(--feature-item-height) + 0.2rem)"
>
<FeatureItem :feature="feature" :is-live="isLive" />

6
src/modules/feature/FeatureSteps.vue
View File

@@ -3,10 +3,11 @@ import FeatureStep from '@/modules/feature/FeatureStep.vue'
import { featureSteps } from '@/modules/feature/feature-steps'
import { useFeatureStore } from '@/modules/feature/feature-store'
import { onMounted } from 'vue'
import { StarportCarrier } from 'vue-starport'
const NUMBER_OF_FEATURES = 20
defineProps<{ alias: string }>()
const featureStore = useFeatureStore()
onMounted(() => featureStore.initBoard(NUMBER_OF_FEATURES))
@@ -14,14 +15,13 @@ onMounted(() => featureStore.initBoard(NUMBER_OF_FEATURES))
<template>
<ul class="features-steps">
<StarportCarrier>
<FeatureStep
v-for="step in featureSteps"
:prefix="alias"
:key="step.title"
:step="step"
:features="featureStore.featuresGroupedByStep[step.stepIndex] ?? []"
/>
</StarportCarrier>
</ul>
</template>

16
src/modules/feature/FlowDashboard.vue
View File

@@ -1,4 +1,7 @@
<script setup lang="ts">
import ProblemSolvingIcon from '@/icons/ProblemSolvingIcon.vue'
import PullSystemIcon from '@/icons/PullSystemIcon.vue'
import PushSystemIcon from '@/icons/PushSystemIcon.vue'
import { useFeatureStore } from '@/modules/feature/feature-store'
const featureStore = useFeatureStore()
@@ -12,7 +15,7 @@ const featureStore = useFeatureStore()
complexity : {{ featureStore.meanComplexity }} | mean lead time :
{{ featureStore.meanLeadTime }} days | Total days:
{{ featureStore.meta.totalDays }} | Team work experience:
{{ featureStore.meta.teamWorkExperience }}
{{ featureStore.meta.teamWorkExperience.toFixed(2) }}
</div>
<div class="row">
New feature live every {{ featureStore.taktTime }} days. Finishing in
@@ -21,10 +24,14 @@ const featureStore = useFeatureStore()
<template v-if="!featureStore.isProjectFinished">
<div class="row">Strategy of the day:</div>
<div class="row">
<button @click="featureStore.nextDay('push')">push system</button>
<button @click="featureStore.nextDay('pull')">pull system</button>
<button @click="featureStore.nextDay('push')">
<PushSystemIcon color="white" />
</button>
<button @click="featureStore.nextDay('pull')">
<PullSystemIcon color="white" />
</button>
<button @click="featureStore.nextDay('problem-solving')">
problem solving
<ProblemSolvingIcon color="white" />
</button>
</div>
</template>
@@ -34,5 +41,6 @@ const featureStore = useFeatureStore()
<style scoped lang="scss">
.flow-dashboard {
color: black;
font-size: 16pt;
}
</style>

28
src/modules/simulation/SimulationControls.vue
View File

@@ -19,18 +19,18 @@ const NUMBER_OF_SIMULATION = 1000
>
simulate pull system
</button>
<button
class="button button-outline"
@click="simulationStore.multiSimulation(1, 'pull-dps')"
>
simulate pull and problem solving
</button>
<button
class="button button-outline"
@click="simulationStore.multiSimulation(1, 'push-dps')"
>
simulate push and problem solving
</button>
<button
class="button button-outline"
@click="simulationStore.multiSimulation(1, 'pull-dps')"
>
simulate pull and problem solving
</button>
</div>
<div class="row">
<button
@@ -45,14 +45,6 @@ const NUMBER_OF_SIMULATION = 1000
>
simulate {{ NUMBER_OF_SIMULATION }} pull system
</button>
<button
class="button button-outline"
@click="
simulationStore.multiSimulation(NUMBER_OF_SIMULATION, 'pull-dps')
"
>
simulate {{ NUMBER_OF_SIMULATION }} pull and problem solving
</button>
<button
class="button button-outline"
@click="
@@ -61,6 +53,14 @@ const NUMBER_OF_SIMULATION = 1000
>
simulate {{ NUMBER_OF_SIMULATION }} push and problem solving
</button>
<button
class="button button-outline"
@click="
simulationStore.multiSimulation(NUMBER_OF_SIMULATION, 'pull-dps')
"
>
simulate {{ NUMBER_OF_SIMULATION }} pull and problem solving
</button>
<button
class="button button-clear"
@click="simulationStore.clearDashboard()"