File: /home/imensosw/.trash/resources/admin/js/components/Evaluations.vue
<template>
<div>
<vue-snotify :class="style"></vue-snotify>
<!-- 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" >
<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.total_score}} out of 500</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>
</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">
<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>
<span class=""><strong>{{this.time_expend}}</strong> / 120 Min</span>
</div>
<div v-if="this.show_instructions">
<div class="modal-body">
<h4 class="mb-4">Instructions</h4>
<p>1. Duration of the test is 120 minutes or 2 hours from the moment of commencement. Once you start the test, the timer will start countdown and can not be reset.</p>
<p>2. Once the test has begun, you are required to take the complete test. In case you leave the test without submitting, you shall be required to take the whole test again.</p>
<p>3. A complete verification of personnel details shall be done by the ArabEasy team and only the individual who wishes to join ArabEasy shall take the test.</p>
<p>4. Use of internet and obtaining any form of help from outside sources such as friends, family or vendors is not permissible.</p>
</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>
<div v-bind:class="[ this.evaluation_text_class, 'mt-2']">
{{this.evaluation_text}}
</div>
</div>
<div class="col-md-6">
<p><strong>Answer</strong></p>
<textarea class="form-control" v-model="evaluation_answer" rows="10"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light dismiss_modal" data-dismiss="modal">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="row">
<div class="col">
<div class="score">
<small>Semantics</small>
<span><big>{{this.evaluationView.semantic_score}}</big>/150</span>
</div>
</div>
<div class="col">
<div class="score">
<small>Terminology</small>
<span><big>{{this.evaluationView.terminology_score}}</big>/50</span>
</div>
</div>
<div class="col">
<div class="score">
<small>Syntax</small>
<span><big>{{this.evaluationView.syntax_score}}</big>/150</span>
</div>
</div>
<div class="col">
<div class="score">
<small>Stylist Quality</small>
<span><big>{{this.evaluationView.quality_score}}</big>/100</span>
</div>
</div>
<div class="col">
<div class="score">
<small>Stylist Beauty & Cultural Style</small>
<span><big>{{this.evaluationView.beauty_score}}</big>/50</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>
<div class="text-right mt-2">
{{this.evaluationView.evaluation_text}}
</div>
</div>
<div class="col-md-6">
<p><strong>Answer</strong></p>
<pre>{{this.evaluationView.answer}}</pre>
</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 -->
<!-- Profile alert model start -->
<div class="modal fade" id="profileAlert" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body text-center">
<img :src="`/images/shape.png`" width="150">
<h1 class="mt-4 mb-4">Hi {{this.userProfile.fname}}!</h1>
<p class="text">Welcome to ArabEasy. Please complete your profile in order to get your first assignement</p>
<ul class="steps">
<li>
<img v-if="this.userProfile.info_status == 1" :src="`/images/i1.png`" width="65">
<img v-if="this.userProfile.info_status == 0 || this.userProfile.info_status == null"
:src="`/images/i2.png`" width="60">
<span>Personal Info</span>
</li>
<li>
<img v-if="this.userProfile.skill_status == 1" :src="`/images/i1.png`" width="65">
<img v-if="this.userProfile.skill_status == 0 || this.userProfile.info_status == null"
:src="`/images/i2.png`" width="60">
<span>Skills</span>
</li>
<li>
<img v-if="this.userProfile.evaluation_status == 1"
:src="`/images/i1.png`" width="65">
<img v-if="this.userProfile.evaluation_status == 0 || this.userProfile.info_status == null"
:src="`/images/i2.png`" width="60">
<span>Evaluations</span>
</li>
</ul>
<div class="clearfix"></div>
<button type="button" class="btn btn-primary mt-5" data-dismiss="modal">Complete Profile</button>
</div>
</div>
</div>
</div>
<!-- Profile alert model end -->
</div>
</template>
<script>
import Multiselect from 'vue-multiselect';
export default {
components: { Multiselect },
data() {
return {
has_error: false,
error: '',
errors: {},
success: false,
isLoading: false,
isStyled: false,
show_instructions: true,
evaluation_id:'',
evaluation_name: '',
evaluation_answer:'',
evaluation_from: '',
evaluation_to: '',
evaluation_text: '',
evaluation_text_class: '',
time_expend:0,
userEvaluations:[],
userEvaluationsShow:[],
evaluationView:{},
userProfile:{},
time: 0,
isRunning: false,
interval: null
}
},
mounted() {
this.getUserEvaluations()
this.getUserProfileInfo()
},
methods: {
/**
* Fetch user profile
*
* @param null
* @return null
*/
getUserProfileInfo()
{
this.$http({
url: `/api/getUserProfileInfo`,
method: 'GET'
})
.then((res) => {
this.userProfile = res.data.userProfile
$("#profileAlert").modal('show')
}, () => {
this.has_error = true
})
},
/**
* Fetch user skills data and put in userSkills variable.
*
* @param null
* @return null
*/
getUserEvaluations()
{
this.$http({
url: `/api/getUserEvaluations`,
method: 'GET'
})
.then((res) => {
this.userEvaluations = res.data.userEvaluations
this.userEvaluationsShow = this.userEvaluations.slice();
}, () => {
this.has_error = true
})
},
/**
* Add user Evaluation.
*
* @param null
* @return null
*/
insertUserEvaluation() {
this.isLoading = true
let formUserEvaluation = new FormData();
formUserEvaluation.append('answer', this.evaluation_answer);
formUserEvaluation.append('evaluation_id', this.evaluation_id);
formUserEvaluation.append('time_expend', this.time_expend);
const config = {
headers: { 'content-type': 'multipart/form-data' }
}
this.$http({
config:config ,
url: `/api/insertUserEvaluation`,
method: 'POST',
data: formUserEvaluation
})
.then((res) => {
this.userEvaluations = res.data.userEvaluations
this.userEvaluationsShow = this.userEvaluations.slice();
this.has_error = false
app.success = true
this.error = ''
this.errors = {}
this.isLoading = false
this.$snotify.success( res.data.message);
$( ".dismiss_modal" ).trigger( "click" );
})
.catch(err => {
this.has_error = true
app.success = false
this.isLoading = 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.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.evaluation_from = evaluation.from_language
this.evaluation_to = evaluation.to_language
this.evaluation_answer = ''
this.evaluation_text = evaluation.evaluation_text
this.evaluation_text_class = evaluation.evaluation_text_class
this.time_expend = 0
},
/**
* 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
},
/**
* Hide instructions and show test block .
*
* @param null
* @return null
*/
showTestBlock() {
this.show_instructions = false
this.timer()
},
/**
* Close Evaluations model.
*
* @param null
* @return null
*/
closeEvaluationsModel() {
},
/**
* Create timer.
*
* @param null
* @return null
*/
timer() {
this.time_expend = 0
this.interval = setInterval(this.incrementTime, 60000)
},
incrementTime() {
this.time_expend = parseInt(this.time_expend) + 1;
},
}
}
</script>