interactive-mining/interactive-mining-backend/madoap/src/templates/upload_codes.html

112 lines
5.6 KiB
HTML

{% extends "base_v2.html" %}
{% block upload_codes %} class="current" {% end %}
{% block content %}
<title>Upload project codes</title>
<link rel="stylesheet" href="/static/animations.css"/>
<div class="uk-flex-inline cm-nav-container uk-margin-medium-bottom">
<div class="cm-left-box"><a href="/"><button id="cancel-main-btn" class="uk-close-large cm-close-btn" type="button" uk-close></button></a></div>
<div class="cm-navigation cm-nav-toolbar">
<ul class="uk-subnav uk-subnav-line">
<li class="cm-nav-li cm-nav-active">
<a class="cm-nav-a">
<div class="cm-nav-number-container"><span class="cm-nav-number uk-text-middle">1</span></div>
<span class="cm-nav-title uk-text-middle">Matching context<br>definition</span>
</a>
</li>
<li class="cm-nav-li cm-nav-disabled">
<a class="cm-nav-a">
<div class="cm-nav-number-container"><span class="cm-nav-number uk-text-middle">2</span></div>
<span class="cm-nav-title uk-text-middle">Matching proccess<br>configuration</span>
</a>
</li>
<li class="cm-nav-li cm-nav-disabled">
<a class="cm-nav-a">
<div class="cm-nav-number-container"><span class="cm-nav-number uk-text-middle">3</span></div>
<span class="cm-nav-title uk-text-middle">Save your<br>matching profile</span>
</a>
</li>
</ul>
</div>
</div>
<div class="uk-container uk-container-small">
<h4>Input options</h4>
<p class="uk-text-small">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<!-- <form id="codes-file-input-form" method="post" enctype="multipart/form-data" accept-charset="UTF-8">
<div class="uk-margin">
<div uk-form-custom>
<input type="file" name="upload" id="codes-file-input" class="inputfile" />
<strong><svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg></strong>
<button class="uk-button uk-button-default" type="button" tabindex="-1">Choose file</button>
</div>
</div>
</form> -->
<div class="js-upload uk-placeholder cm-file-drop-area cm-coloured-text">
<div class="uk-flex uk-flex-middle uk-grid-collapse uk-child-width-expand@s" uk-grid>
<div>
<span uk-icon="icon: cloud-upload"></span>
<span class="uk-text-middle"> Upload matching context .tsv file type</span>
<span class="cm-tooltip" title="If you want the tooltip to appear with a little delay, just add the delay option to the uk-tooltip attribute with your value in milliseconds." uk-tooltip="pos: bottom" uk-icon="icon: info"></span>
</div>
<div uk-form-custom>
<input type="file" name="upload" id="codes-file-input" class="inputfile" />
<button class="uk-button uk-button-default cm-main-button" type="button" tabindex="-1">Choose file</button>
</div>
</div>
</div>
<progress id="js-progressbar" class="uk-progress" value="0" max="100" hidden></progress>
<!-- <div class="test-upload uk-placeholder uk-text-center">
<p><span uk-icon="icon: upload; ratio: 3.5"></span></p>
<p>
<span class="uk-text-middle">Attach project codes by dropping them here or</span>
<div uk-form-custom>
<input type="file">
<span class="uk-link">browse file</span>
</div>
</p>
<p>
<span class="uk-label uk-margin-small-right">TSV</span><span class="uk-label">TXT</span>
<span class="uk-text">file types</span>
</p>
<p class="uk-text-middle">Maximum 10MB upload</p>
</div> -->
<div class="uk-heading-line uk-text-center uk-margin-small-top uk-margin-small-bottom"><span>or</span></div>
<input id="initial-type-input" class="uk-form-width-medium uk-form-large uk-width-1-1 uk-text-center uk-margin-bottom cm-text-input" type="text" style="display: none;" placeholder="Start typing project code or Paste project list">
<table id="data-table" class="uk-table uk-table-striped uk-table-hover cm-table">
<thead>
<tr>
<!-- <th class="uk-table-shrink cm-table-number">#</th> -->
<th class="uk-width-small">Keyword</th>
<th class="uk-table-expand">Context</th>
<th class="uk-table-shrink"></th>
<th class="uk-table-shrink"></th>
</tr>
</thead>
<tfoot>
<tr>
<!-- <td class="cm-table-number"></td> -->
<td colspan="4" class="cm-table-footer"><button id="add-row-below" class="uk-button uk-button-small uk-button-default uk-width-1-1 uk-text-center cm-main-button">
<span class="uk-text-middle"><span uk-icon="icon: plus-circle"></span> Create new</span>
</button></td>
</tr>
</tfoot>
<tbody>
</tbody>
</table>
<button id="next-button" class="uk-button uk-button-primary uk-margin-top uk-float-right" disabled>Next</button>
<div >
</div>
</div>
<script src="/static/upload-codes.js" type="text/javascript"></script>
{% end %}