Skip to content
GitLab
Commit 3cf22d9b authored by ZeMKI's avatar ZeMKI
Browse files

Better interview view page 

* Better sorting images on interview view
* new slider on interview page
parent d16f79eb
Hide whitespace changes
Inline Side-by-side
resources/js/components.js
View file @ 3cf22d9b
......@@ -45,3 +45,7 @@ Vue.component(
);
Vue.component("v-gravatar", Gravatar);
Vue.component("studies-list", require("./components/studieslist.vue").default);
Vue.component(
"sortings",
require("./components/interview/sorting-screenshots.vue").default
);
resources/js/components/Interview/newinterview.vue
View file @ 3cf22d9b
......@@ -68,22 +68,26 @@
v-if="a.type == 'scale'"
class="block text-center"
>
<input
:id="
'slider' +
x.answer.ids[answerindex]
"
v-model="
results[
<div class="w-full mt-2">
<input
:id="
'slider' +
x.answer.ids[answerindex]
]
"
:max="a.answer.max"
:min="a.answer.min"
class="w-full slider is-large"
step="1"
type="range"
/>
"
v-model="
results[
x.answer.ids[
answerindex
]
]
"
:max="a.answer.max"
:min="a.answer.min"
type="range"
step="1"
class="w-full h-2 bg-blue-100 appearance-none"
/>
</div>
<div class="flex">
<div
class="flex w-auto p-2 text-white bg-blue-500"
......@@ -92,7 +96,7 @@
</div>
<div
:for="'slider' + x.id"
class="flex w-auto p-2 mx-auto has-output has-background-dark has-text-light"
class="flex w-auto p-2 mx-auto text-white bg-black"
>
{{
results[
......@@ -380,19 +384,24 @@
v-if="a.type == 'scale'"
class="block text-center"
>
<input
:id="
'slider' + x.answer.ids[answerindex]
"
v-model="
results[x.answer.ids[answerindex]]
"
:max="a.answer.max"
:min="a.answer.min"
class="w-full slider is-large"
step="1"
type="range"
/>
<div class="w-full mt-2">
<input
:id="
'slider' +
x.answer.ids[answerindex]
"
v-model="
results[
x.answer.ids[answerindex]
]
"
:max="a.answer.max"
:min="a.answer.min"
type="range"
step="1"
class="w-full h-2 bg-blue-100 appearance-none"
/>
</div>
<div class="flex">
<div
class="flex w-auto p-2 text-white bg-blue-500"
......
resources/js/components/Interview/sorting-screenshots.vue 0 → 100644
View file @ 3cf22d9b
<template>
<div>
<div class="sm:hidden">
<label for="tabs" class="sr-only">Select a tab</label>
<select
id="tabs"
name="tabs"
class="block w-full border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500"
>
<option
:label="trans('Sorting') + ' ' + index"
v-for="(data, index) in actualData"
:key="index"
{{ index }}
</option>
</select>
</div>
<div class="hidden sm:block">
<nav
class="relative z-0 flex divide-x divide-gray-200 rounded-lg shadow"
aria-label="Tabs"
>
<!-- Current: "text-gray-900", Default: "text-gray-500 hover:text-gray-700" -->
<a
v-for="(data, index) in actualData"
:key="index"
class="relative flex-1 min-w-0 px-4 py-4 overflow-hidden text-sm font-medium text-center text-gray-900 bg-white rounded-l-lg group hover:bg-gray-50 focus:z-10"
href="#"
:aria-current="openTab !== index ? '': 'page'"
v-on:click.prevent="toggleTabs(index)"
>
{{ index+1 }}
</a>
</nav>
</div>
<div
:class="{'hidden': openTab !== index, 'block': openTab === index}"
v-for="(data, index) in actualData"
:key="index"
>
<img
:src="data.image"
:alt="'screenshot' + index"
class="w-full h-full"
/>
</div>
</div>
</template>
<script>
export default {
props: ["screenshots"],
data() {
return {
openTab: 0,
actualData: this.screenshots,
};
},
methods: {
toggleTabs: function (tabNumber) {
this.openTab = tabNumber;
},
},
};
</script>
resources/js/components/newstudy.vue
View file @ 3cf22d9b
......@@ -45,7 +45,6 @@
<nav aria-label="Progress">
<ol role="list" class="space-y-4 md:flex md:space-y-0 md:space-x-8">
<li class="md:flex-1">
<!-- Completed Step -->
<a href="#"
class="flex flex-col py-2 pl-4 border-l-4 md:pl-0 md:pt-4 md:pb-0 md:border-l-0 md:border-t-4"
v-on:click="toggleTabs(1)"
......
resources/views/interview/view.blade.php
View file @ 3cf22d9b
......@@ -39,25 +39,10 @@ $columnValues = $baseArray;
<h1 class="mt-4 text-4xl font-bold uppercase">{{__('Sorting(s)')}}</h1>
<?php $i = 1 ?>
<div class="block w-full h-auto mt-2">
<b-tabs type="is-toggle" expanded>
@foreach($screenshots as $screenshot)
<b-tab-item :label="trans('Sorting')+' '+{{$i}}" icon="google-photos"><a
href="
{{url('/interview/'.$interview->id.'/sorting/'.$screenshot['type'].'/show')}}" target="_blank">
<img src="{{$screenshot['image']}}" alt="sorting" class="w-full h-auto" /></a>
</b-tab-item>
<?php $i++; ?>
@endforeach
</b-tabs>
</div>
<sortings :screenshots="{{json_encode($screenshots)}}"></sortings>
@forelse($createdtokens->unique('id') as $token)
<h2 class="text-2xl font-bold">{{__('Created Tokens')}}</h2>
@forelse($createdtokens->unique('id') as $token)
<div class="flex">
<div class="self-center flex-shrink-0 mr-4">
<img src="{{$token->image_path}}" alt="token created" class="block w-10" />
......@@ -74,7 +59,7 @@ $columnValues = $baseArray;
@if($study->sortings[0]->id !== 3)
<h2 class="text-2xl font-bold">{{__('0 Created Tokens')}}</h2>
@else
<div class="px-4 sm:px-6 lg:px-8">
<div class="px-4 mt-2 sm:px-6 lg:px-8">
<div class="sm:flex sm:items-center">
<div class="sm:flex-auto">
<h3 class="text-xl font-semibold text-gray-900">{!! isset($extremequestion) ? __('Question set for
......@@ -159,10 +144,12 @@ $columnValues = $baseArray;
$emptyopen = true;
?>
<dd class="mt-4 md:col-span-7">
@foreach($q->answers as $a)
@forelse($q->answers as $a)
@if($a->answer['answer'] != "" && $a->answer['type'] != "scale")
<p
class="inline-flex first:mt-0 mt-2 items-center px-3 py-0.5 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
class="inline-flex first:mt-0 mt-2 items-center px-3 py-0.5 rounded-full text-sm font-medium bg-blue-100 text-blue-500">
{{$a->answer['answer']}} </p>
<br>
......@@ -174,7 +161,7 @@ $columnValues = $baseArray;
$emptyopen = false;
?>
<p
class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-blue-100 text-blue-500">
{{$a->pivot->result}}
</p>
......@@ -182,21 +169,26 @@ $columnValues = $baseArray;
@elseif($a->answer['type'] == "scale")
<p
class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-blue-100 text-blue-500">
{{$a->pivot->result}}
</p>
@endif
@endforeach
@if($a->answer['answer'] != "" && $a->answer['type'] != "scale")
@empty
<p
class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-blue-100 text-red-500">
{{__('Answer not provided!')}}
</p>
@endforelse
@if(isset($a) && $a->answer['answer'] != "" && $a->answer['type'] != "scale")
<p class="text-xl font-medium text-gray-900 md:col-span-5">{{__('Chosen ')}}
{{__('answer')}}</p>
@elseif($a->answer['type'] == "open")
@elseif(isset($a) && $a->answer['type'] == "open")
<p class="text-xl font-medium text-gray-900 md:col-span-5">{{__('Type')}}
{{__('Open answer')}}</p>
@elseif($a->answer['type'] == "scale")
@elseif(isset($a) && $a->answer['type'] == "scale")
<p class="text-xl font-medium text-gray-900 md:col-span-5">{{__('Type')}}
{{__('Scale answer')}}</p>
@endif
......@@ -260,11 +252,13 @@ $columnValues = $baseArray;
<?php
$emptyopen = true;
?>
<dd class="md:mt-0 md:col-span-7">
@foreach($q->answers as $a)
<dd class="mt-4 md:col-span-7">
@forelse($q->answers as $a)
@if($a->answer['answer'] != "" && $a->answer['type'] != "scale")
<p
class="inline-flex first:mt-0 mt-2 items-center px-3 py-0.5 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
class="inline-flex first:mt-0 mt-2 items-center px-3 py-0.5 rounded-full text-sm font-medium bg-blue-100 text-blue-500">
{{$a->answer['answer']}} </p>
<br>
......@@ -273,10 +267,10 @@ $columnValues = $baseArray;
@elseif($a->answer['type'] == "open")
<?php
$emptyopen = false;
?>
$emptyopen = false;
?>
<p
class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-blue-100 text-blue-500">
{{$a->pivot->result}}
</p>
......@@ -284,21 +278,26 @@ $columnValues = $baseArray;
@elseif($a->answer['type'] == "scale")
<p
class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-blue-100 text-blue-500">
{{$a->pivot->result}}
</p>
@endif
@endforeach
@if($a->answer['answer'] != "" && $a->answer['type'] != "scale")
@empty
<p
class="inline-flex items-center px-3 py-0.5 rounded-full text-sm font-medium bg-blue-100 text-red-500">
{{__('Answer not provided!')}}
</p>
@endforelse
@if(isset($a) && $a->answer['answer'] != "" && $a->answer['type'] != "scale")
<p class="text-xl font-medium text-gray-900 md:col-span-5">{{__('Chosen ')}}
{{__('answer')}}</p>
@elseif($a->answer['type'] == "open")
@elseif(isset($a) && $a->answer['type'] == "open")
<p class="text-xl font-medium text-gray-900 md:col-span-5">{{__('Type')}}
{{__('Open answer')}}</p>
@elseif($a->answer['type'] == "scale")
@elseif(isset($a) && $a->answer['type'] == "scale")
<p class="text-xl font-medium text-gray-900 md:col-span-5">{{__('Type')}}
{{__('Scale answer')}}</p>
@endif
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment