MCP Server

← back |
<template>
  <BaseLayout title="Technician - Check Steps">
    <!-- Toolbar at top of screen -->
    <Toolbar :force-step3="true" @help-clicked="openInfoModal" />

    <div class="check-steps-container">
      <h2 class="check-steps-title">Are these the correct steps for the job?</h2>

      <div class="yes-no-buttons">
        <YesButton :disabled="!isButtonEnabled" @click="handleNext" />
        <button
          :disabled="!isButtonEnabled"
          @click="handleNo"
          class="no-button"
        >
          No
        </button>
      </div>

      <Divider />

      <div class="content-section">
        <h3 class="job-name">{{ problem?.name || "Loading..." }}</h3>
        <div class="steps-list">
          <ol>
            <li v-for="(step, index) in techHandbookSteps" :key="index">
              {{ step }}
            </li>
          </ol>
        </div>
      </div>

      <!-- Action Bar -->
      <ActionBar title="Confirm Job" :flash="true" :disabled="true" @next="handleNext" />
    </div>

    <!-- Info Modal -->
    <ion-modal :is-open="isInfoModalOpen" @didDismiss="closeInfoModal">
      <ion-header>
        <ion-toolbar>
          <ion-title>Session Store</ion-title>
          <ion-buttons slot="end">
            <ion-button @click="closeInfoModal">Close</ion-button>
          </ion-buttons>
        </ion-toolbar>
      </ion-header>
      <ion-content class="ion-padding">
        <div class="info-content">
          <pre>{{ JSON.stringify(sessionStore.$state, null, 2) }}</pre>
        </div>
      </ion-content>
    </ion-modal>
  </BaseLayout>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import {
  IonModal,
  IonHeader,
  IonToolbar,
  IonTitle,
  IonButtons,
  IonButton,
  IonContent,
} from "@ionic/vue";
import BaseLayout from "@/components/BaseLayout.vue";
import Toolbar from "@/components/Toolbar.vue";
import ActionBar from "@/components/ActionBar.vue";
import Divider from "@/components/Divider.vue";
import YesButton from "@/components/YesButton.vue";
import { getDb } from "@/dataAccess/getDb";
import { useSessionStore } from "@/stores/session";
import type { ProblemsRecord } from "@/pocketbase-types";

const route = useRoute();
const router = useRouter();
const sessionStore = useSessionStore();

const problem = ref<ProblemsRecord | null>(null);
const isInfoModalOpen = ref(false);
const isButtonEnabled = ref(false);
let enableButtonTimeout: ReturnType<typeof setTimeout> | null = null;

// Default tech handbook steps
const DEFAULT_STEPS = [
  "Do some work",
  "Do some more work",
  "And there are different steps.",
  "Clean up the job site.",
  "Tell the customer thank you."
];

// Get tech handbook steps from problem or use default
const techHandbookSteps = computed(() => {
  // Try to get tech handbook from problem
  // Note: tech_handbook field may not exist yet in ProblemsRecord
  const techHandbook = (problem.value as any)?.tech_handbook || (problem.value as any)?.techHandbook;

  if (techHandbook) {
    // If tech handbook exists, parse it into steps
    // Assuming it's either a string with line breaks or an array
    if (typeof techHandbook === 'string') {
      return techHandbook.split('\n').filter(step => step.trim() !== '');
    } else if (Array.isArray(techHandbook)) {
      return techHandbook;
    }
  }

  // Return default steps
  return DEFAULT_STEPS;
});

onMounted(async () => {
  const problemId = route.params.problemId as string;
  const db = await getDb();

  if (db && problemId) {
    problem.value = await db.problems.byId(problemId);
  }

  // Enable button after 1.5 seconds
  isButtonEnabled.value = false;
  enableButtonTimeout = setTimeout(() => {
    isButtonEnabled.value = true;
  }, 1500);
});

onUnmounted(() => {
  // Clear timeout when navigating away
  if (enableButtonTimeout) {
    clearTimeout(enableButtonTimeout);
    enableButtonTimeout = null;
  }
});

const openInfoModal = () => {
  isInfoModalOpen.value = true;
};

const closeInfoModal = () => {
  isInfoModalOpen.value = false;
};

const handleNext = async () => {
  // Navigate to confirm-job which will create the job and then go to check-hours
  if (problem.value) {
    router.push(`/confirm-job/${problem.value.id}`);
  }
};

const handleNo = async () => {
  // Load session first to ensure we have the latest data
  await sessionStore.load();

  // Set step3 to false
  sessionStore.appProgress.step3 = false;
  await sessionStore.save();

  // Navigate back to view-job (step 2)
  if (problem.value) {
    router.push(`/view-job/${problem.value.id}`);
  }
};
</script>

<style scoped>
:deep(.ion-page) {
  animation: none !important;
  transform: none !important;
  transition: none !important;
}

.check-steps-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  animation: none !important;
  transform: none !important;
  transition: none !important;
}

.check-steps-title {
  margin: 0 0 32px 0;
  color: #ffffff;
  font-size: 32px;
  font-weight: 600;
  text-align: center;
  font-variant: small-caps;
}

.job-name {
  margin: 0 0 24px 0;
  color: #ffffff;
  font-size: 24px;
  font-weight: 600;
}

.content-section {
  padding: 0 20px 100px 20px;
}

.steps-list {
  color: #ffffff;
  font-size: 18px;
  line-height: 1.6;
  max-width: 1000px;
  margin: 0 auto;
}

.steps-list ol {
  margin: 0;
  padding-left: 24px;
}

.steps-list li {
  margin-bottom: 16px;
  padding-left: 8px;
}

.yes-no-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 24px;
}

.no-button {
  display: inline-block;
  padding: 16px 48px;
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
  background-color: var(--ion-color-secondary);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.no-button:hover:not(:disabled) {
  transform: scale(1.05);
  background-color: var(--ion-color-secondary-shade);
}

.no-button:active:not(:disabled) {
  transform: scale(0.95);
}

.no-button:disabled {
  background-color: var(--ion-background-color);
  border: 3px solid var(--ion-color-secondary);
  color: var(--ion-color-secondary);
  opacity: 0.6;
  cursor: not-allowed;
}

.no-button:disabled:hover {
  background-color: var(--ion-background-color);
  transform: none;
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .check-steps-container {
    padding: 16px;
  }

  .check-steps-title {
    font-size: 28px;
  }

  .job-name {
    font-size: 20px;
  }

  .steps-list {
    font-size: 16px;
  }

  .no-button {
    font-size: 18px;
    padding: 12px 36px;
  }
}

/* Info Modal Styles */
.info-content {
  color: var(--ion-color-dark);
}

.info-content pre {
  background: var(--ion-color-light);
  padding: 16px;
  border-radius: 8px;
  overflow-x: auto;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
}
</style>