OliveTin/frontend/resources/vue/ExecutionButton.vue

<template>
  <div
    :id="`execution-${trackingId}`"
    class="execution-button"
  >
    <button
      :title="`${ellapsed}s`"
      @click="show"
    >
      {{ buttonText }}
    </button>
  </div>
</template>

<script>
// import { ExecutionFeedbackButton } from '../js/ExecutionFeedbackButton.js'

export default {
  name: 'ExecutionButton',
  //  mixins: [ExecutionFeedbackButton],
  props: {
    executionTrackingId: {
      type: String,
      required: true
    }
  },
  emits: ['show'],
  data () {
    return {
      trackingId: '',
      ellapsed: 0,
      isWaiting: true
    }
  },
  computed: {
    buttonText () {
      if (this.isWaiting) {
        return 'Executing...'
      } else {
        return `${this.ellapsed}s`
      }
    }
  },
  mounted () {
    this.trackingId = this.executionTrackingId
    this.constructFromJson(this.executionTrackingId)
  },
  methods: {
    constructFromJson (json) {
      this.trackingId = json
      this.ellapsed = 0
      this.isWaiting = true
    },

    async show () {
      this.$emit('show')

      if (window.executionDialog) {
        await window.executionDialog.reset()
        window.executionDialog.show()
        window.executionDialog.fetchExecutionResult(this.trackingId)
      }
    },

    onExecStatusChanged () {
      this.isWaiting = false
      this.domTitle = this.ellapsed + 's'
    },

    // Override from ExecutionFeedbackButton
    onExecutionFinished (logEntry) {
      if (logEntry.timedOut) {
        this.renderExecutionResult('action-timeout', 'Timed out')
      } else if (logEntry.blocked) {
        this.renderExecutionResult('action-blocked', 'Blocked!')
      } else if (logEntry.exitCode !== 0) {
        this.renderExecutionResult('action-nonzero-exit', 'Exit code ' + logEntry.exitCode)
      } else {
        this.ellapsed = Math.ceil(new Date(logEntry.datetimeFinished) - new Date(logEntry.datetimeStarted)) / 1000
        this.renderExecutionResult('action-success', 'Success!')
      }
    },

    renderExecutionResult (resultCssClass, temporaryStatusMessage) {
      this.updateDom(resultCssClass, '[' + temporaryStatusMessage + ']')
      this.onExecStatusChanged()
    },

    updateDom (resultCssClass, title) {
      // For execution button, we don't need to update classes as much
      // since it's a simpler component
      if (resultCssClass) {
        const button = this.$el.querySelector('button')
        if (button) {
          button.classList.add(resultCssClass)
        }
      }
    }
  }
}
</script>

<style scoped>
.execution-button {
  display: inline-block;
}

.execution-button button {
  padding: 0.25em 0.5em;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
  font-size: 0.9em;
  transition: all 0.2s ease;
}

.execution-button button:hover {
  background: #f5f5f5;
  border-color: #999;
}

/* Animation classes */
.execution-button button.action-timeout {
  background: #fff3cd;
  border-color: #ffeaa7;
  color: #856404;
}

.execution-button button.action-blocked {
  background: #f8d7da;
  border-color: #f5c6cb;
  color: #721c24;
}

.execution-button button.action-nonzero-exit {
  background: #f8d7da;
  border-color: #f5c6cb;
  color: #721c24;
}

.execution-button button.action-success {
  background: #d4edda;
  border-color: #c3e6cb;
  color: #155724;
}
</style>