<commit_before><template>
  <div>
    <h4 class="q-mt-md q-mb-md">DTC Status</h4>
    <h6 class="q-mt-md q-mb-lg">
      you can view and remove dtc/fault codes from here
    </h6>
    <q-btn flat @click="requestEfiCodes" icon="receipt" rounded>
      Request codes from EFI
    </q-btn>

    <q-linear-progress
      class="q-mb-lg q-mt-md"
      indeterminate
      rounded
      size="15px"
      animation-speed="600"
      v-if="store.parsedLoading || store.efiLoading"
    />
  </div>

  <div
    class="q-pa-md row items-start q-gutter-md"
    v-if="store.parsedCodes !== null"
  >
    <q-card
      v-for="dtc in store.parsedCodes"
      :key="dtc.code"
      style="max-width: 300px"
    >
      <q-card-section :class="getClassName(dtc.type)">
        <div class="text-h6">{{ dtc.type }}: {{ dtc.code }}</div>
        <div class="text-subtitle2" style="word-break: break-word">
          {{ dtc.description }}
        </div>
      </q-card-section>

      <q-separator />

      <q-card-actions align="right">
        <q-btn flat class="q-mr-lg" @click="requestCodeInfo(dtc)">
          More Info
        </q-btn>
        <q-btn flat>Clear</q-btn>
      </q-card-actions>
    </q-card>
  </div>

  <q-dialog v-model="fixed">
    <q-card>
      <q-card-section>
        <div class="text-h6">{{ codeInfo.code }} description</div>
      </q-card-section>

      <q-separator />

      <q-card-section style="max-height: 50vh" class="scroll">
        <span v-if="codeInfo.info">
          <h5 class="q-mt-md q-mb-md">What does that mean?</h5>
          <p
            v-for="(description, id) in codeInfo.info"
            :key="`description-${id}`"
          >
            {{ description }}
          </p>
        </span>

        <span v-if="codeInfo.symptoms">
          <h5 class="q-mt-md q-mb-md">Symptoms:</h5>

          <p v-for="(symptom, id) in codeInfo.symptoms" :key="`symptom-${id}`">
            {{ symptom }}
          </p>
        </span>

        <span v-if="codeInfo.causes">
          <h5 class="q-mt-md q-mb-md">Causes:</h5>
          <p v-for="(causes, id) in codeInfo.causes" :key="`cause-${id}`">
            {{ causes }}
          </p>
        </span>
      </q-card-section>

      <q-separator />

      <q-card-actions align="right">
        <q-btn flat label="Accept" color="primary" v-close-popup />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { ref } from 'vue';

import { storeKey } from '../../store';
import { useStore } from 'vuex';
import { IDTCCode } from 'src/store/dtc_codes/state';

export default defineComponent({
  name: 'DTCStatus',

  components: {},

  setup() {
    const $store = useStore(storeKey);

    return {
      store: $store.state.DtcCodes,
      fixed: ref(false),
      selectedCode: '',
      codeInfo: {
        code: '',
        info: [''],
        symptoms: [''],
        causes: [''],
      } as IDTCCode,
      getClassName(code: string) {
        switch (code) {
          case 'ERR':
            return 'text-white bg-red-6';

          case 'WARN':
            return 'text-white bg-warning';

          case 'INFO':
            return 'text-white bg-indigo-8';

          default:
            return 'text-white bg-secondary';
        }
      },
      requestEfiCodes() {
        void $store.dispatch('DtcCodes/getDTCfromEFI');
      },
    };
  },
  methods: {
    requestCodeInfo(mockCode: IDTCCode) {
      this.fixed = true;
      this.selectedCode = mockCode.code;
      this.codeInfo = mockCode;
    },
  },
});<commit_msg>added confirm modal on dtc page<commit_after><template>
  <div>
    <h4 class="q-mt-md q-mb-md">DTC Status</h4>
    <h6 class="q-mt-md q-mb-lg">
      you can view and remove dtc/fault codes from here
    </h6>
    <q-btn flat @click="requestEfiCodes" icon="receipt" rounded>
      Request codes from EFI
    </q-btn>

    <q-linear-progress
      class="q-mb-lg q-mt-md"
      indeterminate
      rounded
      size="15px"
      animation-speed="600"
      v-if="store.parsedLoading || store.efiLoading"
    />
  </div>

  <div
    class="q-pa-md row items-start q-gutter-md"
    v-if="store.parsedCodes !== null"
  >
    <q-card
      v-for="dtc in store.parsedCodes"
      :key="dtc.code"
      style="max-width: 300px"
    >
      <q-card-section :class="getClassName(dtc.type)">
        <div class="text-h6">{{ dtc.type }}: {{ dtc.code }}</div>
        <div class="text-subtitle2" style="word-break: break-word">
          {{ dtc.description }}
        </div>
      </q-card-section>

      <q-separator />

      <q-card-actions align="right">
        <q-btn flat class="q-mr-lg" @click="requestCodeInfo(dtc)">
          More Info
        </q-btn>
        <q-btn flat @click="requestDtcDelete(dtc)">Clear</q-btn>
      </q-card-actions>
    </q-card>
  </div>

  <q-dialog v-model="fixed">
    <q-card>
      <q-card-section>
        <div class="text-h6">{{ codeInfo.code }} description</div>
      </q-card-section>

      <q-separator />

      <q-card-section style="max-height: 50vh" class="scroll">
        <span v-if="codeInfo.info">
          <h5 class="q-mt-md q-mb-md">What does that mean?</h5>
          <p
            v-for="(description, id) in codeInfo.info"
            :key="`description-${id}`"
          >
            {{ description }}
          </p>
        </span>

        <span v-if="codeInfo.symptoms">
          <h5 class="q-mt-md q-mb-md">Symptoms:</h5>

          <p v-for="(symptom, id) in codeInfo.symptoms" :key="`symptom-${id}`">
            {{ symptom }}
          </p>
        </span>

        <span v-if="codeInfo.causes">
          <h5 class="q-mt-md q-mb-md">Causes:</h5>
          <p v-for="(causes, id) in codeInfo.causes" :key="`cause-${id}`">
            {{ causes }}
          </p>
        </span>
      </q-card-section>

      <q-separator />

      <q-card-actions align="right">
        <q-btn flat label="Close" color="primary" v-close-popup />
      </q-card-actions>
    </q-card>
  </q-dialog>

  <q-dialog v-model="clearDtc">
    <q-card class="q-pa-md">
      <q-card-section>
        <div class="text-h5">Confirm delete code: {{ codeInfo.code }}?</div>
      </q-card-section>

      <q-separator />

      <q-card-actions align="right">
        <q-btn flat label="Yes" color="primary" v-close-popup  class="q-mr-xl"/>
        <q-btn flat label="No" color="secondary" v-close-popup />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { ref } from 'vue';

import { storeKey } from '../../store';
import { useStore } from 'vuex';
import { IDTCCode } from 'src/store/dtc_codes/state';

export default defineComponent({
  name: 'DTCStatus',

  components: {},

  setup() {
    const $store = useStore(storeKey);

    return {
      store: $store.state.DtcCodes,
      fixed: ref(false),
      clearDtc: ref(false),
      selectedCode: '',
      codeInfo: {
        code: '',
        info: [''],
        symptoms: [''],
        causes: [''],
      } as IDTCCode,
      getClassName(code: string) {
        switch (code) {
          case 'ERR':
            return 'text-white bg-red-6';

          case 'WARN':
            return 'text-white bg-warning';

          case 'INFO':
            return 'text-white bg-indigo-8';

          default:
            return 'text-white bg-secondary';
        }
      },
      requestEfiCodes() {
        void $store.dispatch('DtcCodes/getDTCfromEFI');
      },
    };
  },
  methods: {
    requestCodeInfo(mockCode: IDTCCode) {
      this.fixed = true;
      this.selectedCode = mockCode.code;
      this.codeInfo = mockCode;
    },
    requestDtcDelete(code: IDTCCode) {
      this.clearDtc = true;
      this.selectedCode = code.code;
      this.codeInfo = code;
    },
  },
});
{'fraction_non_alphanumeric': 0.17795637198622274, 'fraction_numerical': 0.006505931879066207, 'mean_word_length': 1.942942942942943, 'pattern_counts': {'":': 0, '<': 140, '<?xml version=': 0, '>': 140, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1172500', 'n_tokens_mistral': 2798, 'n_tokens_neox': 2757, 'n_words': 513}