guest_worker/www/worker_specs/index.html

164 lines
5.1 KiB
HTML
Raw Normal View History

2019-11-01 17:30:50 +00:00
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src='dateformat.js'></script>
<script src='reconnecting-websocket.min.js'></script>
2020-01-13 15:13:42 +00:00
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2019-11-01 17:30:50 +00:00
</head>
<body>
2020-01-21 15:09:24 +00:00
<!-- VUE kijken hoe dat werkt bv for loop -->
2019-11-01 17:30:50 +00:00
<div id="wrapper">
2020-01-13 15:13:42 +00:00
<div class='hit' v-for="(hit, hitId) in hits"
:class="[{'hugvey--on': hit.status != 'off'},'hugvey--' + hit.status]"
>
2020-01-21 15:09:24 +00:00
2020-01-13 15:13:42 +00:00
<div class='transition'>
2020-01-22 11:08:57 +00:00
<p>Created subsequent HIT</p>
2020-01-21 15:09:24 +00:00
<!-- <p>Created HIT at {{hit.created_at}}</p> -->
2020-01-22 11:08:57 +00:00
<p v-else>Creating subsequent HIT</p>
2020-01-21 15:09:24 +00:00
<!-- <p>⇩</p> -->
2020-01-13 15:13:42 +00:00
</div>
2020-01-21 15:09:24 +00:00
2020-01-13 15:13:42 +00:00
<div class='state' v-if="hit.hit_id">
2020-01-21 15:09:24 +00:00
<h2>human intelligence task</h2>
<p class="descriptor">task id</p>
<p>{{hit.hit_id}}</p>
<p class="descriptor">task description</p>
2020-01-22 15:04:13 +00:00
<p>Use the mouse to trace the image above</p>
<div class='columns'>
<div class='column'>
<p class="descriptor">fee</p>
<p>$ {{formatPrice(hit.fee)}}</p>
</div><div class='column'>
<p class="descriptor">amazon markup</p>
<p>$ {{formatPrice(hit.fee*.2)}}</p>
</div>
</div>
2020-01-22 11:08:57 +00:00
<!-- TASK FEE en FEE voor amazon (task fee * .2) -->
2020-01-13 15:13:42 +00:00
</div>
2020-01-21 15:09:24 +00:00
2020-01-13 15:13:42 +00:00
<div class='transition' v-if="hit.hit_id">
2020-01-22 11:08:57 +00:00
<p v-if="!hit.assignment">waiting for worker</p>
2020-01-13 15:13:42 +00:00
<template v-else>
2020-01-22 11:08:57 +00:00
<p v-if="hit.assignment.returned_at || hit.assignment.abandoned_at">task abandoned</p>
<p v-else>task accepted</p>
2020-01-13 15:13:42 +00:00
</template>
</div>
2020-01-21 15:09:24 +00:00
2020-01-13 15:13:42 +00:00
<template v-if="hit.assignment">
2020-01-21 15:09:24 +00:00
2020-01-13 15:13:42 +00:00
<div class='state' v-if="hit.assignment"
:class="[{'assignment-hidden': hit.assignment.returned_at || hit.assignment.abandoned_at}]">
2020-01-21 15:09:24 +00:00
<h2>guest worker</h2>
2020-01-22 11:08:57 +00:00
<!-- IF statement of worker id al beschikbaar is -->
2020-01-21 15:09:24 +00:00
<p class="descriptor">worker id</p>
<p>test{{hit.assignment.worker_id}}</p>
2020-01-22 11:08:57 +00:00
2020-01-21 15:09:24 +00:00
<p class="descriptor">visiting from</p>
2020-01-22 11:08:57 +00:00
<!-- {{hit.assignment.turk_browser}} / / {{hit.assignment.turk_os}} ({{hit.assignment.turk_ip}}) -->
<p>{{hit.assignment.turk_country}}</p>
2020-01-22 15:04:13 +00:00
<p class="descriptor">system</p>
<p>{{hit.assignment.turk_browser}} - {{hit.assignment.turk_os}}</p>
2020-01-13 15:13:42 +00:00
</div>
2020-01-21 15:09:24 +00:00
2020-01-13 15:13:42 +00:00
<div class='transition' v-if="hit.assignment.submit_page_at">
<p v-if="!hit.assignment.confirmed_at">Assignment submitted</p>
<p v-else>Confirmed submission</p> <!-- Validated submitted code through SQSmessage -->
</div>
2020-01-21 15:09:24 +00:00
2020-01-13 15:13:42 +00:00
<div class='state' v-if="hit.assignment.submit_page_at">
2020-01-22 11:08:57 +00:00
<h2>worker input</h2>
2020-01-22 15:04:13 +00:00
<div class="svgcrop" style="height: 110px; overflow: hidden">
2020-01-22 15:18:09 +00:00
<img :src="hit.svg_image" style="margin-top: -60px">
2020-01-21 15:09:24 +00:00
</div>
2020-01-22 15:04:13 +00:00
2020-01-22 15:07:04 +00:00
<div class='columns'>
<div class='column'>
<p class="descriptor">duration</p>
<p>{{duration(hit.assignment.submit_page_at, hit.assignment.created_at)}}</p>
</div>
<div class='column'v-if="hit.path_length">
<p class="descriptor">drawing distance</p>
<p>{{hit.path_length}} pixels</p>
</div>
</div>
2020-01-13 15:13:42 +00:00
</div>
2020-01-21 15:09:24 +00:00
2020-01-13 15:13:42 +00:00
<div class='transition' v-if="hit.assignment.submit_page_at">
2020-01-22 11:08:57 +00:00
<p v-if="!hit.scanned_at">Scanning</p>
2020-01-21 15:09:24 +00:00
<p v-else>Scan completed</p>
<!-- at {{hit.scanned_at}} -->
2020-01-13 15:13:42 +00:00
</div>
2020-01-21 15:09:24 +00:00
2020-01-22 15:18:09 +00:00
<div class='state scan' v-if="hit.scanned_at">
2020-01-22 11:08:57 +00:00
<!-- <h2>analog drawing</h2> -->
2020-01-21 15:09:24 +00:00
<!-- <div class="statebox"> -->
2020-01-22 15:18:09 +00:00
<!-- <img src="fake_scan.jpg">-->
<img :src="hit.scan_image">
2020-01-21 15:09:24 +00:00
<!-- </div> -->
2020-01-13 15:13:42 +00:00
</div>
2020-01-21 15:09:24 +00:00
2020-01-13 15:13:42 +00:00
</template>
2020-01-21 15:09:24 +00:00
2019-11-01 17:30:50 +00:00
<!-- <div class="phase" id="waiting_for_human">
<span class="narrative_phase_text">waiting for human worker to accept task</span>
</div>
<div class="phase" id="human_accepted_task">
<span class="narrative_phase_text">task accepted by human worker</span>
</div> -->
2020-01-21 15:09:24 +00:00
<!--
2019-11-01 17:30:50 +00:00
<div class="phase" id="worker_specs">
2019-11-01 19:21:24 +00:00
<span class="grid-item spec_name" id="hit_id_descriptor">human intelligent task id</span>
2020-01-13 15:13:42 +00:00
<span class="grid-item spec_value" id="hit_id">{{hit.id}}</span>
2019-11-01 19:21:24 +00:00
2019-11-01 17:30:50 +00:00
<span class="grid-item spec_name" id="worker_id_descriptor">human worker id</span>
2019-11-01 19:21:24 +00:00
<span class="grid-item spec_value" id="worker_id">&nbsp;</span>
2019-11-01 17:30:50 +00:00
<span class="grid-item spec_name" id="ip_descriptor">ip address</span>
<span class="grid-item spec_value" id="ip">&nbsp;</span>
<span class="grid-item spec_name" id="location_descriptor">location</span>
<span class="grid-item spec_value" id="location">&nbsp;</span>
<span class="grid-item spec_name" id="browser_descriptor">browser</span>
<span class="grid-item spec_value" id="browser">&nbsp;</span>
<span class="grid-item spec_name" id="os_descriptor">os</span>
<span class="grid-item spec_value" id="os">&nbsp;</span>
<span class="grid-item spec_name" id="hit_opened_descriptor">task started at</span>
<span class="grid-item spec_value" id="hit_opened">&nbsp;</span>
<span class="grid-item spec_name" id="state_descriptor">task status</span>
<span class="grid-item spec_value" id="state">&nbsp;</span>
<span class="grid-item spec_name" id="fee_descriptor">calculated fee</span>
2019-11-01 17:30:50 +00:00
<span class="grid-item spec_value" id="fee">&nbsp;</span>
<span class="grid-item spec_name" id="elapsed_time_descriptor">time elapsed</span>
<span class="grid-item spec_value" id="elapsed_time">&nbsp;</span>
2020-01-13 15:13:42 +00:00
</div>-->
2019-11-01 17:30:50 +00:00
2020-01-13 15:13:42 +00:00
</div>
2020-01-21 15:09:24 +00:00
2019-11-01 17:30:50 +00:00
</div>
<script src="script.js"></script>
</body>
</html>