137 lines
4.3 KiB
HTML
137 lines
4.3 KiB
HTML
<!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>
|
|
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- VUE kijken hoe dat werkt bv for loop -->
|
|
|
|
<div id="wrapper">
|
|
<div class='hit' v-for="(hit, hitId) in hits"
|
|
:class="[{'hugvey--on': hit.status != 'off'},'hugvey--' + hit.status]"
|
|
>
|
|
|
|
<div class='transition'>
|
|
<p>Created HIT based on analog drawing</p>
|
|
<!-- <p>Created HIT at {{hit.created_at}}</p> -->
|
|
<p v-else>Creating HIT based on analog drawing..</p>
|
|
<!-- <p>⇩</p> -->
|
|
</div>
|
|
|
|
|
|
|
|
<div class='state' v-if="hit.hit_id">
|
|
<h2>human intelligence task</h2>
|
|
<p class="descriptor">task id</p>
|
|
<p>{{hit.hit_id}}</p>
|
|
<p class="descriptor">task description</p>
|
|
<p>Use the mouse to draw a copy of the image above</p>
|
|
</div>
|
|
|
|
<div class='transition' v-if="hit.hit_id">
|
|
<p v-if="!hit.assignment">waiting for guest worker to accept HIT..</p>
|
|
<template v-else>
|
|
<p v-if="hit.assignment.returned_at || hit.assignment.abandoned_at">Asignment abandoned</p>
|
|
<p v-else>Assignment accepted</p>
|
|
</template>
|
|
</div>
|
|
|
|
|
|
<template v-if="hit.assignment">
|
|
|
|
<div class='state' v-if="hit.assignment"
|
|
:class="[{'assignment-hidden': hit.assignment.returned_at || hit.assignment.abandoned_at}]">
|
|
|
|
<h2>guest worker</h2>
|
|
<p class="descriptor">worker id</p>
|
|
<p>test{{hit.assignment.worker_id}}</p>
|
|
<p class="descriptor">visiting from</p>
|
|
<!-- {{hit.assignment.turk_browser}} / / {{hit.assignment.turk_os}}-->
|
|
|
|
<p>{{hit.assignment.turk_country}} ({{hit.assignment.turk_ip}}) </p>
|
|
|
|
</div>
|
|
|
|
|
|
<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>
|
|
|
|
<div class='state' v-if="hit.assignment.submit_page_at">
|
|
<h2>digital drawing</h2>
|
|
<div class="statebox">
|
|
<img :src="hit.svg_image">
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class='transition' v-if="hit.assignment.submit_page_at">
|
|
<p v-if="!hit.scanned_at">Scanning..</p>
|
|
<p v-else>Scan completed</p>
|
|
<!-- at {{hit.scanned_at}} -->
|
|
</div>
|
|
|
|
|
|
<div class='state' v-if="hit.scanned_at">
|
|
<h2>analog drawing</h2>
|
|
<!-- <div class="statebox"> -->
|
|
<img src="fake_scan.jpg">
|
|
<!-- <img :src="hit.scan_image"> -->
|
|
<!-- </div> -->
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
<!-- <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> -->
|
|
<!--
|
|
<div class="phase" id="worker_specs">
|
|
<span class="grid-item spec_name" id="hit_id_descriptor">human intelligent task id</span>
|
|
<span class="grid-item spec_value" id="hit_id">{{hit.id}}</span>
|
|
|
|
<span class="grid-item spec_name" id="worker_id_descriptor">human worker id</span>
|
|
<span class="grid-item spec_value" id="worker_id"> </span>
|
|
<span class="grid-item spec_name" id="ip_descriptor">ip address</span>
|
|
<span class="grid-item spec_value" id="ip"> </span>
|
|
<span class="grid-item spec_name" id="location_descriptor">location</span>
|
|
<span class="grid-item spec_value" id="location"> </span>
|
|
<span class="grid-item spec_name" id="browser_descriptor">browser</span>
|
|
<span class="grid-item spec_value" id="browser"> </span>
|
|
<span class="grid-item spec_name" id="os_descriptor">os</span>
|
|
<span class="grid-item spec_value" id="os"> </span>
|
|
|
|
<span class="grid-item spec_name" id="hit_opened_descriptor">task started at</span>
|
|
<span class="grid-item spec_value" id="hit_opened"> </span>
|
|
<span class="grid-item spec_name" id="state_descriptor">task status</span>
|
|
<span class="grid-item spec_value" id="state"> </span>
|
|
<span class="grid-item spec_name" id="fee_descriptor">calculated fee</span>
|
|
<span class="grid-item spec_value" id="fee"> </span>
|
|
|
|
|
|
<span class="grid-item spec_name" id="elapsed_time_descriptor">time elapsed</span>
|
|
<span class="grid-item spec_value" id="elapsed_time"> </span>
|
|
</div>-->
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|