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

feat: make it a table

Browse Source
This commit is contained in:
Julien Calixte
2026-01-02 01:08:42 +01:00
parent e187e70f61
commit e7ca5f469b
2 changed files with 77 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
src/AppHeijunka.vue
View File

@@ -20,6 +20,21 @@ const orders = ref(
)
)
const batchPlanning: ProductType[] = [
'shirt',
'shirt',
'shirt',
'shirt',
'shirt',
'jeans',
'jeans',
'jeans',
'shoes',
'shoes',
'hat',
'hat'
]
const levelingPlanning: ProductType[] = [
'shirt',
'shirt',
@@ -57,11 +72,12 @@ const createdAt = new Date('2026-01-01').toLocaleDateString(undefined, {
<div class="text">
<p>
You're selling shirts, jeans and shoes in a little town that is quite
specific: every day someone get to your shop and buys 1 item.
specific: every hour someone get to your shop and buys 1 item and they
won't leave until they are satisfied!
</p>
<p>
You know, from your years of experience, that shirts sell twice as much
as
You know, from your years of experience, that in 3 days, you sell
approximately 5 shirts, 3 jeans, 2 pairs of shoes and 2 hats.
</p>
<section class="commands">
<button
@@ -102,19 +118,31 @@ const createdAt = new Date('2026-01-01').toLocaleDateString(undefined, {
reset
</button>
<button class="button-outline" @click="orders = levelingPlanning">
<button class="button-outline" @click="orders = [...levelingPlanning]">
levelling
</button>
<button class="button-outline" @click="orders = [...batchPlanning]">
batch
</button>
</section>
<section class="factory">
<h2>Factory</h2>
<ul>
<li v-for="(day, dayIndex) in days" :key="day">
Day {{ day }}
<div class="day-production-plan">
<table>
<thead>
<tr>
<th scope="col">Day</th>
<th scope="col">Hour 1</th>
<th scope="col">Hour 2</th>
<th scope="col">Hour 3</th>
<th scope="col">Hour 4</th>
</tr>
</thead>
<tbody>
<tr v-for="(day, dayIndex) in days" :key="day">
<th scope="row">Day {{ day }}</th>
<td v-for="(hour, hourIndex) in hours">
<select
v-for="(hour, hourIndex) in hours"
v-model="orders[orderIndex(dayIndex, hourIndex)]"
:name="`day-${day}-hour-${hour}`"
:id="`day-${day}-hour-${hour}`"
@@ -125,9 +153,14 @@ const createdAt = new Date('2026-01-01').toLocaleDateString(undefined, {
<option value="shoes">Shoes</option>
<option value="hat">Hat</option>
</select>
</div>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</section>
<section class="dashboard">
Mean lead time: {{ heijunkaStore.meanLeadTime }}
</section>
<section class="shop">
@@ -309,6 +342,26 @@ const createdAt = new Date('2026-01-01').toLocaleDateString(undefined, {
<section class="dashboard">
Mean lead time: {{ heijunkaStore.meanLeadTime }}
</section>
<p>
The longer the lead time is, the longer it takes to have return on
investment. You paid for the raw material, the workforce, the machines
but until the client receives the product you won't get paid.
</p>
<p>
The more stock there is, the more latent payments there are and the more
paymeents are still waiting, the more you need to be good at planning
batches.
</p>
<p>
Producing a bit of everything with small batches is the way to go and
that's the core of Heijunka
</p>
<h2>What heijunka needs: SMED</h2>
<p>
We didn't talk here about how we manage products that need different
time to be produced.
</p>
</div>
</article>
</template>
@@ -329,12 +382,6 @@ li {
align-items: center;
}
.day-production-plan {
display: flex;
gap: 0.5rem;
align-items: center;
}
.shop {
display: flex;

7
src/modules/heijkunka/heijunka-store.ts
View File

@@ -153,11 +153,6 @@ export const useHeijunkaStore = defineStore('heijunka', {
Math.ceil(state.meta.currentHour / NUMBER_OF_HOURS_PER_DAY),
gameEnded: (state) =>
state.meta.currentHour >= NUMBER_OF_DAYS * NUMBER_OF_HOURS_PER_DAY,
meanLeadTime: (state) =>
getMean(
state.orders
.filter((o) => o.status === 'received')
.map((o) => o.leadTime)
)
meanLeadTime: (state) => getMean(state.orders.map((o) => o.leadTime))
}
})