zenn/planner.sori.studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.1.1

Browse Source
This commit is contained in:
zenn
2026-04-21 14:36:43 +09:00
parent 314dd7f649
commit f3b2c84758
7 changed files with 162 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
src/App.vue
View File

@@ -1,5 +1,5 @@
<script setup>
import { computed, reactive, ref, watch } from 'vue'
import { computed, reactive, ref, watch, nextTick } from 'vue'
import MiniCalendar from './components/MiniCalendar.vue'
import PlannerPage from './components/PlannerPage.vue'
import StatsDashboard from './components/StatsDashboard.vue'
@@ -7,6 +7,7 @@ import StatsDashboard from './components/StatsDashboard.vue'
const STORAGE_KEY = 'ten-minute-planner-state'
const screenMode = ref('planner')
const viewMode = ref('focus')
const printLayout = ref('single')
const selectedDate = ref(new Date())
const calendarViewDate = ref(new Date(selectedDate.value))
const statsRangeStart = ref(toKey(new Date(new Date().setDate(new Date().getDate() - 6))))
@@ -600,7 +601,9 @@ function clearTaskLabels(record) {
})
}
function printSelectedPlanner() {
async function printSelectedPlanner(layout = 'single') {
printLayout.value = layout
await nextTick()
window.print()
}
</script>
@@ -672,14 +675,25 @@ function printSelectedPlanner() {
NEXT DAY
</button>
</div>
<button
<div
v-if="screenMode === 'planner'"
type="button"
class="rounded-full border border-stone-200 bg-white px-4 py-3 text-xs font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
@click="printSelectedPlanner"
class="inline-flex items-center gap-2 rounded-full border border-stone-200 bg-white px-2 py-2"
>
PRINT DAY
</button>
<button
type="button"
class="rounded-full border border-stone-200 px-3 py-2 text-xs font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
@click="printSelectedPlanner('single')"
>
PRINT 1-UP
</button>
<button
type="button"
class="rounded-full border border-stone-200 px-3 py-2 text-xs font-bold tracking-[0.14em] text-stone-600 transition hover:border-stone-400 hover:text-ink"
@click="printSelectedPlanner('double')"
>
PRINT 2-UP
</button>
</div>
</div>
</div>
</header>
@@ -866,6 +880,77 @@ function printSelectedPlanner() {
@update:range-start="statsRangeStart = $event"
@update:range-end="statsRangeEnd = $event"
/>
<section class="print-only">
<div v-if="printLayout === 'single'" class="print-paper">
<div class="print-sheet-frame">
<PlannerPage
:date-main="selectedDateDisplay.main"
:date-weekday="selectedDateDisplay.weekday"
:date-weekday-tone="selectedDateDisplay.weekdayTone"
:dday="planner.dday"
:comment="planner.comment"
:total-time="formatTotalTime(planner)"
:tasks="planner.tasks"
:memo="planner.memo"
:hours="hours"
:timetable="planner.timetable"
@update:comment="updateComment(planner, $event)"
@update:task-label="updateTaskLabel(planner, $event)"
@update:task-title="updateTaskTitle(planner, $event)"
@toggle:task="toggleTask(planner, $event)"
@update:memo-label="updateMemoLabel(planner, $event)"
@update:memo="updateMemo(planner, $event)"
@update:timetable="updateTimetable(planner, $event)"
/>
</div>
</div>
<div v-else class="print-paper print-paper--double">
<div class="print-sheet-frame">
<PlannerPage
:date-main="selectedDateDisplay.main"
:date-weekday="selectedDateDisplay.weekday"
:date-weekday-tone="selectedDateDisplay.weekdayTone"
:dday="planner.dday"
:comment="planner.comment"
:total-time="formatTotalTime(planner)"
:tasks="planner.tasks"
:memo="planner.memo"
:hours="hours"
:timetable="planner.timetable"
@update:comment="updateComment(planner, $event)"
@update:task-label="updateTaskLabel(planner, $event)"
@update:task-title="updateTaskTitle(planner, $event)"
@toggle:task="toggleTask(planner, $event)"
@update:memo-label="updateMemoLabel(planner, $event)"
@update:memo="updateMemo(planner, $event)"
@update:timetable="updateTimetable(planner, $event)"
/>
</div>
<div class="print-sheet-frame">
<PlannerPage
:date-main="secondaryDateDisplay.main"
:date-weekday="secondaryDateDisplay.weekday"
:date-weekday-tone="secondaryDateDisplay.weekdayTone"
:dday="secondaryPlanner.dday"
:comment="secondaryPlanner.comment"
:total-time="formatTotalTime(secondaryPlanner)"
:tasks="secondaryPlanner.tasks"
:memo="secondaryPlanner.memo"
:hours="hours"
:timetable="secondaryPlanner.timetable"
@update:comment="updateComment(secondaryPlanner, $event)"
@update:task-label="updateTaskLabel(secondaryPlanner, $event)"
@update:task-title="updateTaskTitle(secondaryPlanner, $event)"
@toggle:task="toggleTask(secondaryPlanner, $event)"
@update:memo-label="updateMemoLabel(secondaryPlanner, $event)"
@update:memo="updateMemo(secondaryPlanner, $event)"
@update:timetable="updateTimetable(secondaryPlanner, $event)"
/>
</div>
</div>
</section>
</div>
</main>
</template>