<commit_before><link rel="import" href="/bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="/bower_components/paper-button/paper-button.html">
<link rel="import" href="/bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="/bower_components/paper-material/paper-material.html">
<link rel="import" href="/elements/submission/challenge-display.html">
<link rel="import" href="/elements/submission/countdown-timer.html">
<!-- TODO(victorbalan): Import this exactly when the challenge has finished -->
<link rel="import" href="/elements/submission/challenge-finished.html">

<dom-module id="sequential-challenge">
	<style>
		:host{
			display: block;
			height: 100%;
		}
		#content{
			height: calc(100% - 40px);
		}
		#startChallengeCard{
			width:35%;
		}
		#taskTimer{
			margin: 0;
			padding-top: 10px;
			width: 50px;
		}
		#taskNavHeader{
			height: 40px;
			background: white;
			margin: 0;
			padding: 0;
		}
		#backArrowWrapper{
			padding-left: 10px;
			width: 30px;
		}
		#frontArrowWrapper{
			width: 30px;
			padding-right: 16px;
		}
		#taskNavTitle{
			padding: 0;
			margin: 0;
			padding-top: 10px;
		}
		#leftFill{
			width: 50px;
		}
	</style>
	<template>
		<paper-material id="taskNavHeader" elevation="1" class="horizontal layout" style$="{{taskNavHeaderStyle}}">
			<div id="backArrowWrapper">
				<template is="dom-if" if="{{showBackArrow}}">
					<paper-icon-button icon="arrow-back" on-click="previousTask"></paper-icon-button>
				</template>
			</div>
			<span class="flex"></span>
			<p id="taskNavTitle">{{taskNavTitle}}</p>
			<span class="flex"></span>
			<countdown-timer id="taskTimer" duration="{{challenge.Duration}}" timeout="{{timeout}}"></countdown-timer>
			<div id="frontArrowWrapper">
				<template is="dom-if" if="{{showForwardArrow}}" >
					<paper-icon-button icon="arrow-forward" on-click="nextTask"></paper-icon-button>
				</template>
			</div>
		</paper-material>
		<div id="content" style$="{{contentStyle}}">
			<paper-material id="startChallengeCard" elevation="1" class="card">
				<div class="flex">
					<challenge-display challenge="{{challenge}}"></challenge-display>
					<paper-button raised on-click="startChallenge">Go</paper-button>
				</div>
			</paper-material>
		</div>
		<iron-ajax
			id="loadTaskRequest"
			handle-as="json"
			on-response="onTaskResponse"
			debounce-duration="1000"
			content-type="application/json"
			>
		</iron-ajax>
		<iron-ajax
			id="finishTaskRequest"
			handle-as="json"
			debounce-duration="1000"
			content-type="application/json"
			on-response="onFinishTaskResponse"
			on-err="onFinishTaskError"
			>
		</iron-ajax>
	</template>
	<script>
		Polymer({
			// TODO(victorbalan): Refactor component and split logic.
			is: 'sequential-challenge',
			properties: {
				challenge: {
					type: Object,
					notify: true,
					reflectToAttribute: true
				},
				result: {
					type: Object,
					notify: true,
					reflectToAttribute: true
				},
				task: {
					type: Object,
					notify: true
				},
				taskIndex: {
					type: Number,
					notify: true,
					value: 0
				},
				taskNavTitle: {
					type: String,
					notify: true
				},
				taskNavHeaderStyle:{
					type: String,
					notify: true,
					value: 'display: none;'
				},
				contentStyle:{
					type: String,
					notify: true,
					value: 'display: none;'
				}
			},
			observers: [
				'afterPropertiesSet(challenge, result)'
			],
			afterPropertiesSet: function(){
				var currentTask = '';
				for(var i=0; i<this.result.StartTimes.length; i++){
					if(new Date(this.result.StartTimes[i]).getTime()>0){
						this.taskIndex = i;
						currentTask = this.challenge.Tasks[i];
					}
				}
				if(new Date(this.result.StartTimes[i]).getTime()>0){
					app.hideProgress();
					this.contentStyle = '';
					this.$.content.innerHTML = '';
					var finished = document.createElement('challenge-finished');
					this.$.content.innerHTML = '';
					this.$.content.appendChild(finished);
				}else{
					var timer = localStorage.getItem('timer');
					if(timer !== null && currentTask !== '' && this.taskIndex >= 0){
						this.loadTaskById(currentTask);
						this.$.taskTimer.startWithOffset(Number(timer));
					}else{
						app.hideProgress();
						this.contentStyle = '';
					}
					this.displayArrows();
				}
			},
			timeout: function() {
				var taskTimeout = document.createElement('task-timeout');
				this.$.content.innerHTML = '';
				this.$.content.appendChild(taskTimeout);
			},
			startChallenge: function() {
				this.$.content.innerHTML = '';
				localStorage.setItem('timer', Date.now());
				this.loadTaskById(this.challenge.Tasks[this.taskIndex]);
				this.$.taskTimer.start();
				this.displayArrows();
				app.showProgress();
			},
			loadTaskById: function(key){
				if(this.challenge.Tasks.length>1){
					this.taskNavTitle = 'Task ' + (this.taskIndex+1) +' of ' + (this.challenge.Tasks.length);
				}
				util.get(this.$.loadTaskRequest, '/tasks/' + key + '?result=' + localStorage.getItem('result'));
			},
			onTaskResponse: function(r){
				var task = r.detail.response;
				this.importHref('/elements/submission/tasks/' + task.Assignment.Endpoints.WebInterface + '.html', function(){
					var webInterface = document.createElement(task.Assignment.Endpoints.WebInterface);
					webInterface.task = task;
					var component = this;
					webInterface.addEventListener('task-finished', function(){
						component.finishTask();
					});
					this.$.content.innerHTML = '';
					this.$.content.appendChild(webInterface);
					this._showTaskNav();
					app.hideProgress();
					this.contentStyle = '';
				});
			},
			displayArrows: function(){
				this.showBackArrow = this.taskIndex > 0;
				this.showForwardArrow = this.taskIndex < this.challenge.Tasks.length -1;
				// TODO(victorbalan): enable arrows when needed
				this.showForwardArrow = false;
				this.showBackArrow = false;
			},
			nextTask: function(){
				this.taskIndex++;
				this.displayArrows();
				this.loadTaskById(this.challenge.Tasks[this.taskIndex]);
			},
			previousTask: function(){
				this.taskIndex--;
				this.displayArrows();
				this.loadTaskById(this.challenge.Tasks[this.taskIndex]);
			},
			finishTask: function(){
				util.post(this.$.finishTaskRequest,
					'/results/'+ localStorage.getItem('result') +
					'/finlSubmission/' + this.taskIndex +
					'?submissionKey' + localStorage.getItem('lastSubmission'), {});
			},
			onFinishTaskResponse: function(){
				this.taskIndex++;
				if(this.taskIndex < this.challenge.Tasks.length){
					this.loadTaskById(this.challenge.Tasks[this.taskIndex]);
				}else{
					var finished = document.createElement('challenge-finished');
					this.$.content.innerHTML = '';
					this.$.content.appendChild(finished);
					app.finishChallenge();
					this._hideTaskNav();
				}
			},
			onFinishTaskError: function(err) {
				util.error(err);
			},
			_showTaskNav: function(){
				this.taskNavHeaderStyle = '';
			},
			_hideTaskNav: function(){
				this.taskNavHeaderStyle = 'display: none';
			}
		});

	</script>
</dom-module>
<commit_msg>Align progress on sequenial-challenge<commit_after><link rel="import" href="/bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="/bower_components/paper-button/paper-button.html">
<link rel="import" href="/bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="/bower_components/paper-material/paper-material.html">
<link rel="import" href="/elements/submission/challenge-display.html">
<link rel="import" href="/elements/submission/countdown-timer.html">
<!-- TODO(victorbalan): Import this exactly when the challenge has finished -->
<link rel="import" href="/elements/submission/challenge-finished.html">

<dom-module id="sequential-challenge">
	<style>
		:host{
			display: block;
			height: 100%;
		}
		#content{
			height: calc(100% - 40px);
		}
		#startChallengeCard{
			width:35%;
		}
		#taskTimer{
			margin: 0;
			padding-top: 10px;
			width: 50px;
		}
		#taskNavHeader{
			height: 40px;
			background: white;
			margin: 0;
			padding: 0;
		}
		#backArrowWrapper{
			padding-left: 10px;
			width: 30px;
		}
		#frontArrowWrapper{
			width: 30px;
			padding-right: 16px;
		}
		#taskNavTitle{
			padding: 0;
			margin: 0;
			padding-top: 10px;
		}
		#leftProgressFlex{
			margin-right: 50px;
		}
	</style>
	<template>
		<paper-material id="taskNavHeader" elevation="1" class="horizontal layout" style$="{{taskNavHeaderStyle}}">
			<div id="backArrowWrapper">
				<template is="dom-if" if="{{showBackArrow}}">
					<paper-icon-button icon="arrow-back" on-click="previousTask"></paper-icon-button>
				</template>
			</div>
			<span id="leftProgressFlex" class="flex"></span>
			<p id="taskNavTitle">{{taskNavTitle}}</p>
			<span class="flex"></span>
			<countdown-timer id="taskTimer" duration="{{challenge.Duration}}" timeout="{{timeout}}"></countdown-timer>
			<div id="frontArrowWrapper">
				<template is="dom-if" if="{{showForwardArrow}}" >
					<paper-icon-button icon="arrow-forward" on-click="nextTask"></paper-icon-button>
				</template>
			</div>
		</paper-material>
		<div id="content" style$="{{contentStyle}}">
			<paper-material id="startChallengeCard" elevation="1" class="card">
				<div class="flex">
					<challenge-display challenge="{{challenge}}"></challenge-display>
					<paper-button raised on-click="startChallenge">Go</paper-button>
				</div>
			</paper-material>
		</div>
		<iron-ajax
			id="loadTaskRequest"
			handle-as="json"
			on-response="onTaskResponse"
			debounce-duration="1000"
			content-type="application/json"
			>
		</iron-ajax>
		<iron-ajax
			id="finishTaskRequest"
			handle-as="json"
			debounce-duration="1000"
			content-type="application/json"
			on-response="onFinishTaskResponse"
			on-err="onFinishTaskError"
			>
		</iron-ajax>
	</template>
	<script>
		Polymer({
			// TODO(victorbalan): Refactor component and split logic.
			is: 'sequential-challenge',
			properties: {
				challenge: {
					type: Object,
					notify: true,
					reflectToAttribute: true
				},
				result: {
					type: Object,
					notify: true,
					reflectToAttribute: true
				},
				task: {
					type: Object,
					notify: true
				},
				taskIndex: {
					type: Number,
					notify: true,
					value: 0
				},
				taskNavTitle: {
					type: String,
					notify: true
				},
				taskNavHeaderStyle:{
					type: String,
					notify: true,
					value: 'display: none;'
				},
				contentStyle:{
					type: String,
					notify: true,
					value: 'display: none;'
				}
			},
			observers: [
				'afterPropertiesSet(challenge, result)'
			],
			afterPropertiesSet: function(){
				var currentTask = '';
				for(var i=0; i<this.result.StartTimes.length; i++){
					if(new Date(this.result.StartTimes[i]).getTime()>0){
						this.taskIndex = i;
						currentTask = this.challenge.Tasks[i];
					}
				}
				if(new Date(this.result.StartTimes[i]).getTime()>0){
					app.hideProgress();
					this.contentStyle = '';
					this.$.content.innerHTML = '';
					var finished = document.createElement('challenge-finished');
					this.$.content.innerHTML = '';
					this.$.content.appendChild(finished);
				}else{
					var timer = localStorage.getItem('timer');
					if(timer !== null && currentTask !== '' && this.taskIndex >= 0){
						this.loadTaskById(currentTask);
						this.$.taskTimer.startWithOffset(Number(timer));
					}else{
						app.hideProgress();
						this.contentStyle = '';
					}
					this.displayArrows();
				}
			},
			timeout: function() {
				var taskTimeout = document.createElement('task-timeout');
				this.$.content.innerHTML = '';
				this.$.content.appendChild(taskTimeout);
			},
			startChallenge: function() {
				this.$.content.innerHTML = '';
				localStorage.setItem('timer', Date.now());
				this.loadTaskById(this.challenge.Tasks[this.taskIndex]);
				this.$.taskTimer.start();
				this.displayArrows();
				app.showProgress();
			},
			loadTaskById: function(key){
				if(this.challenge.Tasks.length>1){
					this.taskNavTitle = 'Task ' + (this.taskIndex+1) +' of ' + (this.challenge.Tasks.length);
				}
				util.get(this.$.loadTaskRequest, '/tasks/' + key + '?result=' + localStorage.getItem('result'));
			},
			onTaskResponse: function(r){
				var task = r.detail.response;
				this.importHref('/elements/submission/tasks/' + task.Assignment.Endpoints.WebInterface + '.html', function(){
					var webInterface = document.createElement(task.Assignment.Endpoints.WebInterface);
					webInterface.task = task;
					var component = this;
					webInterface.addEventListener('task-finished', function(){
						component.finishTask();
					});
					this.$.content.innerHTML = '';
					this.$.content.appendChild(webInterface);
					this._showTaskNav();
					app.hideProgress();
					this.contentStyle = '';
				});
			},
			displayArrows: function(){
				this.showBackArrow = this.taskIndex > 0;
				this.showForwardArrow = this.taskIndex < this.challenge.Tasks.length -1;
				// TODO(victorbalan): enable arrows when needed
				this.showForwardArrow = false;
				this.showBackArrow = false;
			},
			nextTask: function(){
				this.taskIndex++;
				this.displayArrows();
				this.loadTaskById(this.challenge.Tasks[this.taskIndex]);
			},
			previousTask: function(){
				this.taskIndex--;
				this.displayArrows();
				this.loadTaskById(this.challenge.Tasks[this.taskIndex]);
			},
			finishTask: function(){
				util.post(this.$.finishTaskRequest,
					'/results/'+ localStorage.getItem('result') +
					'/finlSubmission/' + this.taskIndex +
					'?submissionKey' + localStorage.getItem('lastSubmission'), {});
			},
			onFinishTaskResponse: function(){
				this.taskIndex++;
				if(this.taskIndex < this.challenge.Tasks.length){
					this.loadTaskById(this.challenge.Tasks[this.taskIndex]);
				}else{
					var finished = document.createElement('challenge-finished');
					this.$.content.innerHTML = '';
					this.$.content.appendChild(finished);
					app.finishChallenge();
					this._hideTaskNav();
				}
			},
			onFinishTaskError: function(err) {
				util.error(err);
			},
			_showTaskNav: function(){
				this.taskNavHeaderStyle = '';
			},
			_hideTaskNav: function(){
				this.taskNavHeaderStyle = 'display: none';
			}
		});

	</script>
</dom-module>

{'fraction_non_alphanumeric': 0.16597772017095214, 'fraction_numerical': 0.007286484971624746, 'mean_word_length': 3.4014801110083255, 'pattern_counts': {'":': 0, '<': 113, '<?xml version=': 0, '>': 117, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4507481', 'n_tokens_mistral': 5949, 'n_tokens_neox': 4534, 'n_words': 744}