File: /home/imensosw/.trash/resources.1/js/components/Evaluations.vue
<template>
<div>
<!-- Evaluations block start -->
<div class="d-flex justify-content-between align-items-center">
<h4>Evaluations</h4>
<a v-if="userEvaluations.length > 0" href="javascript:;" data-toggle="modal" data-target="#evaluationCriteria" class="border-bottom"><small>View Evaluation Criteria</small></a>
</div>
<div v-if="userEvaluations.length > 0 || this.missingEvaluationFor.length > 0 || userEvaluationCount > 0 ">
<div class="row mt-4">
<div class="col-md-12">
<table class="table bordered">
<thead>
<tr>
<th>Name</th>
<th>Language Direction</th>
<th>Duration</th>
<th>Status</th>
<th>Score</th>
<th class="text-right">Action</th>
</tr>
</thead>
<tbody>
<tr v-for="data in userEvaluations" >
<td>{{data.evaluation_name}}</td>
<td>{{data.from_language}} to {{data.to_language}}</td>
<td>{{data.duration}} Mins</td>
<td>
<span v-bind:class="[ data.css_class, 'capsule']">
{{ data.status_name || 'Pending' }}
</span>
</td>
<td>
<span v-if="data.evaluation_status_id > 2" >{{data.user_total_score}} out of {{data.total_score}}</span>
<span v-else >--</span>
</td>
<td class="text-right">
<a v-if="data.evaluation_status_id == null || data.evaluation_status_id == 1" href="javascript:;" data-toggle="modal" data-target="#newTest" class="btn btn-primary"
@click="openEvaluationsModel(data.id)">Start</a>
<a v-if="data.evaluation_status_id > 1" href="javascript:;" data-toggle="modal" data-target="#viewTest" @click="openEvaluationsViewModel(data.id)" >View</a>
</td>
</tr>
<tr v-for="data in missingEvaluationFor">
<td>Test not available</td>
<td>{{data.from_language}} to {{data.to_language}}</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td class="text-right">-</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div v-else class="no-record text-center">
<img :src="`/images/shape.png`" width="100"><br><br>
<p>No Evaluations Exist</p>
</div>
<!-- Evaluations block end -->
<!-- Evaluation Criteria model start -->
<div class="modal fade" id="evaluationCriteria" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="">Evaluation Criteria</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<table class="table table-bordered black-text table-sm mb-0">
<thead>
<tr>
<th width="10%" data-field="id">Criteria</th>
<th width="55%" data-field="name">Explanation and deductible items</th>
<th width="5%" data-field="price">Score</th>
<th width="30%" data-field="total">For each mistake in any of the items under the criteria (designed for a text of 300-400 words)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Semantics</td>
<td>The translator is able to convey the full meaning of SL into TL (no deletion, no addition, no change of meaning, no ambiguity.) Interpretation of TL is the same as that of SL.</td>
<td><b>150</b></td>
<td>Deduct 10 for each mistake.</td>
</tr>
<tr>
<td>Terminology</td>
<td>
<b>1)</b> Correct usages and choices of words as to convey the meaning correctly (ex: boy, man, male)<br>
<b>2)</b> No lexical ambiguity<br>
<b>3)</b> Using correct jargons when necessary that fit the context and the audience
</td>
<td><b>50</b></td>
<td>Deduct 5 for each mistake.</td>
</tr>
<tr>
<td>Syntax</td>
<td>- Correct and clear usage of:<br>
<b>1)</b> Grammar (tenses, conditionality, modality.etc.)<br>
<b>2)</b> Spelling, especially for Arabic: (lam Shamsia wal kamaria, ha’a wat aa marbota, tanween)<br>
<b>3)</b> Punctuation<br>
<b>4)</b> Sentence structure:<br>
<b>a)</b> Making sure that there is no ambiguity in sentence structure<br>
<b>b)</b> Using correct sentence structure in Arabic (like using verbal sentences whenever suitable)
<b>c)</b>Correct conjunctions</td>
<td><b>150</b></td>
<td>Deduct 10 for each
mistake. (if mistakes
are within the same
category, consider it
one)</td>
</tr>
<tr>
<td>Stylistic quality</td>
<td>
<b>1)</b> Suitable expressions<br>
<b>2)</b> Correct usage of translation methods (literal, semantic..)<br>
<b>3)</b> Correct usage of numbering and equivelances in Arabic (Abjad Hawaz) and text/slide direction<br>
<b>4)</b> No repetition<br>
<b>5)</b> Translation fits culture and audience (expert/inexpert). Marks will be deducted for expressions, terms, or style not suitable for the audience or culture.</td>
<td><b>100</b></td>
<td>Deduct 5 for each mistake. (if mistakes are within the same category, consider it one)</td>
</tr>
<tr>
<td>Stylistic beauty and cultural style</td>
<td>
- Beauty of text such as:<br>
<b>1)</b> Text coherence, and connection of ideas<br>
<b>2)</b> Readability and clarity<br>
<b>3)</b> The translation sounds authentic in TL.<br>
<b>4)</b> Style of translation fits the context (media,
legal. etc.)</td>
<td><b>50</b></td>
<td>Subjective evaluation</td>
</tr>
<tr>
<td colspan="4"><b>Total: 500</b></td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Evaluation Criteria model end -->
<!-- Test model start -->
<div class="modal fade" id="newTest" tabindex="-1" role="dialog" aria-hidden="true" ref="testModalRef" @click.self="closeEvaluationsModel" >
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="">{{this.evaluation_name}}</h5>
<countdown :time="this.time_expend" :auto-start="false" @end="handleCountdownEnd"
ref="countdown">
<template slot-scope="props">
<strong> {{ props.hours }}:{{ props.minutes }}:{{ props.seconds }} </strong>
</template>
</countdown>
</div>
<div v-if="this.show_instructions">
<div class="modal-body">
<h4 class="mb-4">Instructions</h4>
<span v-html="this.instructions" > </span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-dismiss="modal" @click="closeEvaluationsModel" >Take Later</button>
<button type="button" class="btn btn-primary" @click="showTestBlock()">Start Test Now</button>
</div>
</div>
<div v-else>
<form autocomplete="off" @submit.prevent="insertUserEvaluation" v-if="!success" method="post">
<input type="hidden" v-model="this.evaluation_id" />
<div class="modal-body">
<div class="row">
<div class="col-md-6 border-right">
<p><strong>{{this.evaluation_from}} to {{this.evaluation_to}}</strong></p>
<a v-if="this.evaluation_file" download :href="`docs/evaluation_file/${this.evaluation_file}`" class="mb-12" > <b>Download Test File</b> </a>
<div v-bind:class="['mt-2']">
<div v-html=this.evaluation_text></div>
</div>
</div>
<div class="col-md-6">
<div class="col-md-12">
<label for="answer_file">Upload File <small>(Max upload file size: 2 MB. Allowed file types: pdf)</small></label>
<input id="answer_file" type="file" v-on:change="onEvaluationFileChange" class="form-control mb-12" />
<span class="text-danger help-block" v-if="has_error && errors.answer_file">{{ errors.answer_file[0] }}</span>
</div>
<div class="col-md-12" v-if="this.evaluation_file == null">
<label>Type Answer</label>
<ckeditor :editor="editor" v-model="evaluation_answer" :config="editorConfig"></ckeditor>
<span v-if="this.evaluation_file == null"><span class="text-danger help-block" v-if="has_error && errors.answer">{{ errors.answer[0] }}</span></span>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" :disabled='isLoading' class="btn btn-light dismiss_modal" data-dismiss="modal" @click="closeEvaluationsModel" >Close</button>
<VueLoadingButton type="submit" aria-label="Submit" class="btn btn-primary btn-imp" :loading="isLoading" :styled="isStyled" >
Submit
</VueLoadingButton>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Test model end -->
<!-- Test view model start -->
<div class="modal fade" id="viewTest" tabindex="-1" role="dialog" aria-hidden="true" >
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="">{{this.evaluationView.evaluation_name}}
<span v-bind:class="[ this.evaluationView.css_class, 'capsule']">
{{this.evaluationView.status_name}}
</span>
</h5>
<span class=""><strong>{{this.evaluationView.time_expend}}</strong> / {{this.evaluationView.duration}} Min</span>
</div>
<!-- <div class="modal-score"> -->
<div :class="this.evaluationView.css_class == 'done'?'evaluation-done':(this.evaluationView.css_class == 'review'?'evaluation-review':'evaluation-improvement')">
<div class="row">
<table class="table table-bordered black-text table-sm mb-0">
<thead>
<th>Semantics</th>
<th>Terminology</th>
<th>Syntax</th>
<th>Stylist Quality</th>
<th>Stylist Beauty & Cultural Style</th>
<th>Total</th>
</thead>
<tbody>
<td>
<span v-if="this.evaluationView.evaluation_status_id > 2"><big>{{this.evaluationView.user_semantic_score}}/</big>{{this.evaluationView.semantic_score}}</span>
<span v-else>N/A</span>
</td>
<td>
<span v-if="this.evaluationView.evaluation_status_id > 2"><big>{{this.evaluationView.user_terminology_score}}/</big>{{this.evaluationView.terminology_score}}</span>
<span v-else>N/A</span>
</td>
<td>
<span v-if="this.evaluationView.evaluation_status_id > 2"><big>{{this.evaluationView.user_syntax_score}}/</big>{{this.evaluationView.syntax_score}}</span>
<span v-else>N/A</span>
</td>
<td>
<span v-if="this.evaluationView.evaluation_status_id > 2"><big>{{this.evaluationView.user_quality_score}}/</big>{{this.evaluationView.quality_score}}</span>
<span v-else>N/A</span>
</td>
<td>
<span v-if="this.evaluationView.evaluation_status_id > 2"><big>{{this.evaluationView.user_beauty_score}}/</big>{{this.evaluationView.beauty_score}}</span>
<span v-else>N/A</span>
</td>
<td>
<span v-if="this.evaluationView.evaluation_status_id > 2"><big>{{this.userTotalScore}}/</big>{{this.totalScore}}</span>
<span v-else>N/A</span>
</td>
</tbody>
</table>
<!-- <div class="col">
<div class="score">
<small>Semantics</small>
<span v-if="this.evaluationView.evaluation_status_id > 2"><big>{{this.evaluationView.user_semantic_score}}/</big>{{this.evaluationView.semantic_score}}</span>
<span v-else>N/A</span>
</div>
</div>
<div class="col">
<div class="score">
<small>Terminology</small>
<span v-if="this.evaluationView.evaluation_status_id > 2"><big>{{this.evaluationView.user_terminology_score}}/</big>{{this.evaluationView.terminology_score}}</span>
<span v-else>N/A</span>
</div>
</div>
<div class="col">
<div class="score">
<small>Syntax</small>
<span v-if="this.evaluationView.evaluation_status_id > 2"><big>{{this.evaluationView.user_syntax_score}}/</big>{{this.evaluationView.syntax_score}}</span>
<span v-else>N/A</span>
</div>
</div>
<div class="col">
<div class="score">
<small>Stylist Quality</small>
<span v-if="this.evaluationView.evaluation_status_id > 2"><big>{{this.evaluationView.user_quality_score}}/</big>{{this.evaluationView.quality_score}}</span>
<span v-else>N/A</span>
</div>
</div>
<div class="col">
<div class="score">
<small>Stylist Beauty & Cultural Style</small>
<span v-if="this.evaluationView.evaluation_status_id > 2"><big>{{this.evaluationView.user_beauty_score}}/</big>{{this.evaluationView.beauty_score}}</span>
<span v-else>N/A</span>
</div>
</div>
<div class="col">
<div class="score">
<small>Total</small>
<span v-if="this.evaluationView.evaluation_status_id > 2"><big>{{this.userTotalScore}}/</big>
{{this.totalScore}}</span>
<span v-else>N/A</span>
</div>
</div> -->
</div>
</div>
<div class="modal-body">
<div class="row mt-4">
<div class="col-md-6 border-right">
<p><strong>{{this.evaluationView.from_language}} to {{this.evaluationView.to_language}} </strong></p>
<a v-if="this.evaluationView.evaluation_file" download :href="`docs/evaluation_file/${this.evaluationView.evaluation_file}`" class="mb-12" > <b>Download Test File </b></a>
<div class="mt-2">
<div v-html=this.evaluationView.evaluation_text></div>
</div>
</div>
<div class="col-md-6">
<p><strong>Answer</strong></p>
<a v-if="this.evaluationView.answer_file" download :href="`docs/evaluation_answer_file/${this.evaluationView.answer_file}`" class="mb-12" ><b> Download Answer File</b></a>
<div v-html=this.evaluationView.answer></div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Test view model end -->
</div>
</template>
<script>
import Multiselect from 'vue-multiselect';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
export default {
components: { Multiselect },
data() {
return {
has_error: false,
error: '',
errors: {},
success: false,
isLoading: false,
isStyled: false,
editor: ClassicEditor,
editorData: '<p>Content of the editor.</p>',
editorConfig: {},
show_instructions: true,
evaluation_id:'',
evaluation_name: '',
instructions:'',
evaluation_answer:'',
evaluation_from: '',
evaluation_to: '',
evaluation_text: '',
evaluation_file: '',
answer_file: '',
evaluation_text_class: '',
duration:0,
time_expend:0,
userEvaluations:[],
userEvaluationCount:0,
userEvaluationsShow:[],
evaluationView:{},
missingEvaluationFor:[],
userTotalScore:'',
totalScore:'',
time: 0,
isRunning: false,
interval: null,
}
},
mounted() {
this.getUserEvaluations()
this.$root.$on("getUserEvaluations", () => {
return this.getUserEvaluations();
});
},
methods: {
/**
* Fetch user skills data and put in userSkills variable.
*
* @param null
* @return null
*/
getUserEvaluations()
{
this.$http({
url: `getUserEvaluations`,
method: 'GET'
})
.then((res) => {
this.userEvaluations = res.data.userEvaluations
this.userEvaluationCount = res.data.userEvaluationCount
this.userEvaluationsShow = this.userEvaluations.slice();
this.missingEvaluationFor = res.data.missingEvaluationFor
}, () => {
this.has_error = true
})
},
/**
* Add user Evaluation.
*
* @param null
* @return null
*/
insertUserEvaluation() {
this.isLoading = true;
this.$refs.countdown.abort();
let time_expend = this.duration - this.$refs.countdown.totalMinutes ;
let formUserEvaluation = new FormData();
formUserEvaluation.append('answer', this.evaluation_answer);
formUserEvaluation.append('evaluation_id', this.evaluation_id);
formUserEvaluation.append('time_expend', time_expend );
formUserEvaluation.append('answer_file', (this.answer_file != undefined) ? this.answer_file :'' );
formUserEvaluation.append('evaluation_file', this.evaluation_file );
const config = {
headers: { 'content-type': 'multipart/form-data' }
}
this.$http({
config:config ,
url: `insertUserEvaluation`,
method: 'POST',
data: formUserEvaluation
})
.then((res) => {
this.userEvaluations = res.data.userEvaluations
this.userEvaluationCount = res.data.userEvaluationCount
this.userEvaluationsShow = this.userEvaluations.slice();
let status = { 'translator_status_name' : res.data.translator_status_name ,'translator_status_id': res.data.translator_status_id }
this.$emit('updateStatus', status)
this.has_error = false
app.success = true
this.error = ''
this.errors = {}
this.isLoading = false
this.$snotify.success( res.data.message);
$('.modal').modal('hide')
})
.catch(err => {
this.isLoading = false
this.has_error = true
app.success = false
this.error = err.response.data.error
this.errors = err.response.data.errors || {}
if(err.response.data.showErrorPop)
{
this.$snotify.error(err.response.data.message);
}
});
},
/**
* Open Evaluations model.
*
* @param null
* @return null
*/
openEvaluationsModel(evaluation_id) {
this.answer_file = ''
$("#answer_file").val(null)
this.show_instructions = true
let evaluation = this.userEvaluations.filter(function(evaluation) {
return evaluation.id == evaluation_id ;
});
evaluation = evaluation[0]
this.evaluation_id = evaluation.id
this.evaluation_name = evaluation.evaluation_name
this.instructions = evaluation.instructions
this.evaluation_from = evaluation.from_language
this.evaluation_to = evaluation.to_language
this.evaluation_answer = ''
this.evaluation_text = evaluation.evaluation_text
this.evaluation_file = evaluation.evaluation_file
this.evaluation_text_class = evaluation.evaluation_text_class
this.duration = evaluation.duration
this.time_expend = ( evaluation.duration * 60 * 1000 )
this.$refs.countdown.time = evaluation.duration;
},
/**
* Open evaluations vue model.
*
* @param null
* @return null
*/
openEvaluationsViewModel(evaluation_id) {
let evaluation = this.userEvaluations.filter(function(evaluation) {
return evaluation.id == evaluation_id ;
});
evaluation = evaluation[0]
this.evaluationView = evaluation
this.userTotalScore = ''
if(this.evaluationView.evaluation_status_id > 2)
{
this.userTotalScore = parseInt(this.evaluationView.user_semantic_score) +
parseInt(this.evaluationView.user_terminology_score) +
parseInt(this.evaluationView.user_syntax_score) +
parseInt(this.evaluationView.user_quality_score) +
parseInt(this.evaluationView.user_beauty_score) ;
}
this.totalScore = parseInt(this.evaluationView.semantic_score) +
parseInt(this.evaluationView.terminology_score) +
parseInt(this.evaluationView.syntax_score) +
parseInt(this.evaluationView.quality_score) +
parseInt(this.evaluationView.beauty_score) ;
},
/**
* Hide instructions and show test block .
*
* @param null
* @return null
*/
showTestBlock() {
this.show_instructions = false
this.startCountdown()
},
/**
* Close Evaluations model.
*
* @param null
* @return null
*/
closeEvaluationsModel() {
this.$refs.countdown.abort();
this.$refs.countdown.end();
this.has_error = false
app.success = true
this.error = ''
this.errors = {}
this.isLoading = false
},
/**
* Start Countdown.
*
* @param null
* @return null
*/
startCountdown: function () {
this.$refs.countdown.start();
},
/**
* Handle Countdown End.
*
* @param null
* @return null
*/
handleCountdownEnd: function () {
},
/**
* Set selected file to answer_file variable
*
* @param null
* @return null
*/
onEvaluationFileChange(e){
this.answer_file = e.target.files[0];
},
}
}
</script>
<style>
.ck-content {
min-height: 300px!important;
}
</style>