New stepsnavbar

This commit is contained in:
sosguns2002 2018-03-08 12:19:06 +02:00
parent 1235b66f3a
commit 3a226bbda9
12 changed files with 221 additions and 107 deletions

View File

@ -1,6 +1,5 @@
<div id="parent" xmlns="">
<app-settings id="child1" class="cm-config-settings-section"></app-settings>
<app-resultspreview id="child2"></app-resultspreview>
<div id="parent">
<app-settings id="child1" class="cm-config-settings-section uk-margin-small-top"></app-settings>
<app-resultspreview id="child2" class="uk-margin-medium-top"></app-resultspreview>
<div style="clear: both;"></div>
</div>

View File

@ -2,9 +2,9 @@
<header id="cm-results-section-header" class="uk-container uk-container-expand">
<div class="cm-results-controls">
<div class="uk-margin">
<h4>Matching test area <span class="cm-tooltip" uk-icon="icon: info" 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"></span></h4>
<h4>Test area <span class="cm-tooltip" uk-icon="icon: info" 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"></span></h4>
<p>Choose a document sample to test your matchin results!</p>
<div class="uk-grid-collapse uk-child-width-expand@s" uk-grid>
<div class="uk-grid-collapse uk-child-width-expand" uk-grid>
<!--<form class="uk-search uk-search-default uk-width-1-5@m">-->
<!--<span class="uk-search-icon-flip" uk-search-icon></span>-->
<!--<input class="uk-search-input" type="search" placeholder="Search..." style="background-color: white;">-->
@ -26,7 +26,7 @@
</div>
</div>
</div>
<div class="uk-grid-collapse uk-child-width-expand@s" uk-grid>
<div class="uk-grid-collapse uk-child-width-expand" uk-grid>
<span *ngIf="documentsLoaded>0" class="uk-text uk-text-success" style="margin-top: 12px">{{documentsLoaded}} document{{documentsLoaded===1?'':'s'}} loaded</span>
<span *ngIf="documentsLoaded<1" class="uk-text uk-text-danger" style="margin-top: 12px">No documents selected</span>
<div class="uk-text-right uk-margin-small-top">
@ -44,7 +44,7 @@
<div id="cm-run-test-section">
<h4>Test results <span class="cm-tooltip" uk-icon="icon: info" 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"></span></h4>
<div class="uk-display-inline">
<button id="run-mining-btn" class="uk-button uk-button-primary" [disabled]="documentsLoaded<1" (click)="runMining()">Apply rules to sleected documents</button>
<button id="run-mining-btn" class="uk-button uk-button-primary" [disabled]="documentsLoaded<1" (click)="runMining()">Test rules on the selected documents</button>
<span *ngIf="matches_number>0" id="results-number" class="uk-text-primary uk-margin-left uk-text-bottom">{{matches_number}} matche{{matches_number===1?'':'s'}} found</span>
<span *ngIf="prev_matches_number>0" id="results-number-previous" class="cm-text-muted uk-text-bottom">, {{prev_matches_number}} matche{{prev_matches_number===1?'':'s'}} found previously</span>
</div>

View File

@ -230,8 +230,5 @@
</div>
</div>
<hr>
<div class="uk-flex uk-flex-center@m uk-flex-right@l uk-margin-top uk-margin-right cm-save-profile-step">
<!--<span class="uk-text-primary uk-text-middle uk-text-middle">Satisfied with the results?</span>-->
<button id="next-button" class="uk-button uk-button-primary uk-margin-left" (click)="saveProfile()">Save your profile</button>
</div>
<button id="next-button" class="uk-button uk-button-primary uk-margin-small-left" (click)="saveProfile()">Save this profile</button>
</div>

View File

@ -221,7 +221,6 @@ export class SettingsComponent implements OnInit {
return;
}
localStorage.setItem('wordssplitnum', value);
this.getSettingsFromLocalStorage();
}
stopwordsCheckBoxChange(value: boolean): void {

View File

@ -1,6 +1,6 @@
<div class="uk-section uk-section-default uk-margin-medium-top uk-padding-remove-top">
<div class="uk-container uk-container-small">
<h4>Content to match</h4>
<div class="uk-container">
<!--<h4>Content to match</h4>-->
<p class="uk-text-small">Fill the table below, with your content you want to match!</p>
<app-contentstable></app-contentstable>
</div>

View File

@ -7,40 +7,6 @@
<th class="uk-table-shrink"></th>
</tr>
</thead>
<tfoot>
<tr>
<!-- <td class="cm-table-number"></td> -->
<td colspan="3" class="cm-table-footer" style="padding: 14px;">
<button (click)="addRow()" [disabled]="!isAnyContent()" 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>
<tr *ngIf="contentArray.length<2 && !isAnyContent()">
<td colspan="3" class="cm-table-footer" style="padding: 70px 80px 50px;">
<div appDropFileUpload (filesChange)="onFilesChange($event)" (filesInvalid)="onFileInvalid($event)" [allowedExtensions]="['tsv', 'txt']" [maxFileSize]="51200" class="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>
<div class="cm-coloured-text">
<span uk-icon="icon: cloud-upload"></span>
<span class="uk-text-middle"> Drop file with content here to fill the table!</span>
</div>
<div>
<span class="cm-label">TSV</span>
<span class="uk-text uk-text-small">file type, maximum 50kB</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>
<div uk-form-custom>
<input type="file" name="upload" id="codes-file-input" class="inputfile" (change)="onFilesChange($event.srcElement.files[0])" />
<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>
</td>
</tr>
</tfoot>
<tbody>
<tr *ngFor="let field of contentArray; let i = index" [ngClass]="{'editing':i===selectedRow}">
<td class="keyword" [ngClass]="{'editing':i===selectedRow && 0===selectedCollumn}">
@ -55,6 +21,40 @@
</td>
</tr>
</tbody>
<tfoot>
<tr>
<!-- <td class="cm-table-number"></td> -->
<td colspan="3" class="cm-table-footer">
<button (click)="addRow()" [disabled]="!isAnyContent()" id="add-row-below" class="uk-button uk-button-default uk-width-1-1 uk-text-center">
<span class="uk-text-middle"><span uk-icon="icon: plus-circle"></span> Add row</span>
</button>
</td>
</tr>
<tr *ngIf="contentArray.length<2 && !isAnyContent()">
<td colspan="3" class="cm-table-footer" style="padding: 70px 80px 50px;">
<div appDropFileUpload (filesChange)="onFilesChange($event)" (filesInvalid)="onFileInvalid($event)" [allowedExtensions]="['tsv', 'txt']" [maxFileSize]="51200" class="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>
<div class="cm-coloured-text">
<span uk-icon="icon: cloud-upload"></span>
<span class="uk-text-middle"> Drop file with content here to fill the table!</span>
</div>
<div>
<span class="cm-label">TSV</span>
<span class="uk-text uk-text-small">file type, maximum 50kB</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>
<div uk-form-custom>
<input type="file" name="upload" id="codes-file-input" class="inputfile" (change)="onFilesChange($event.srcElement.files[0])" />
<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>
</td>
</tr>
</tfoot>
</table>
<button id="next-button" class="uk-button uk-button-primary uk-margin-top uk-float-right" [disabled]="!isAnyContent()" (click)="saveAndContinue()">Next</button>
<button id="next-button" class="uk-button uk-button-primary uk-margin-small-top" [disabled]="!isAnyContent()" (click)="saveAndContinue()">Continue</button>

View File

@ -33,9 +33,9 @@ export class ManageprofilesComponent implements OnInit {
}
getUserId(): void {
this.manageProfilesService.getUserIdToLocalStorage()
.subscribe(() => {
localStorage.setItem('user_id', this.cookieService.get('madgikmining'));
this.manageProfilesService.getUserId()
.subscribe(res => {
localStorage.setItem('user_id', res);
this.getSavedProfiles();
this.getExampleProfiles();
});
@ -43,7 +43,11 @@ export class ManageprofilesComponent implements OnInit {
getSavedProfiles(): void {
this.manageProfilesService.getSavedProfiles()
.subscribe(res => this.userSavedProfiles = res);
.subscribe(res => {
if (res) {
this.userSavedProfiles = res;
}
});
}
loadSavedProfile(id: string, name: string): void {

View File

@ -24,8 +24,9 @@ export class ManageprofilesService {
constructor(private http: HttpClient) { }
getUserIdToLocalStorage(): Observable<any> {
getUserId(): Observable<string> {
return this.http.get(this.getUserIdUrl, { withCredentials: true })
.map(res => res['user_id'])
.catch(this.util.handleError);
}

View File

@ -1,25 +1,42 @@
<div *ngIf="proccessStep>0" class="uk-flex-inline cm-nav-container">
<div class="cm-left-box"><a href="/manage-profiles"><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" [ngClass]="{'cm-nav-active':proccessStep===1, 'cm-nav-disabled':proccessStep<1}">
<a class="cm-nav-a" [routerLink]="proccessStep>1 ? ['/upload-content'] : []">
<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" [ngClass]="{'cm-nav-active':proccessStep===2, 'cm-nav-disabled':proccessStep<2}">
<a class="cm-nav-a" [routerLink]="proccessStep>2 ? ['/configure-profile'] : []">
<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" [ngClass]="{'cm-nav-active':proccessStep===3, 'cm-nav-disabled':proccessStep<3}">
<a class="cm-nav-a" [routerLink]="proccessStep>3 ? ['/save-profile'] : []">
<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 *ngIf="proccessStep>0" class="uk-flex-inline cm-nav-container">-->
<!--<div class="cm-left-box"><a (click)="cancelHandle()"><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" [ngClass]="{'cm-nav-active':proccessStep===1, 'cm-nav-disabled':proccessStep<1}">-->
<!--<a class="cm-nav-a" [routerLink]="proccessStep>1 ? ['/upload-content'] : []">-->
<!--<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" [ngClass]="{'cm-nav-active':proccessStep===2, 'cm-nav-disabled':proccessStep<2}">-->
<!--<a class="cm-nav-a" [routerLink]="proccessStep>2 ? ['/configure-profile'] : []">-->
<!--<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" [ngClass]="{'cm-nav-active':proccessStep===3, 'cm-nav-disabled':proccessStep<3}">-->
<!--<a class="cm-nav-a" [routerLink]="proccessStep>3 ? ['/save-profile'] : []">-->
<!--<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>-->
<!--TODO https://dribbble.com/shots/139895-Checkout-progress-bar-r-2-->
<!--TODO https://codetea.com/material-design-breadcrumb-progress-tracker/-->
<div *ngIf="proccessStep>0" class="uk-grid-collapse uk-child-width-expand" uk-grid>
<div class="cm-nav2 uk-width-expand">
<a class="cm-nav2-step" [ngClass]="{'cm-nav2-step-active':proccessStep===1, 'cm-nav2-step-disabled':proccessStep<1}" [routerLink]="proccessStep>1 ? ['/upload-content'] : []">Matching context definition</a>
<a class="cm-nav2-step" [ngClass]="{'cm-nav2-step-active':proccessStep===2, 'cm-nav2-step-disabled':proccessStep<2}" [routerLink]="proccessStep>2 ? ['/configure-profile'] : []">Matching proccess configuration</a>
<a class="cm-nav2-step" [ngClass]="{'cm-nav2-step-active':proccessStep===3, 'cm-nav2-step-disabled':proccessStep<3}" [routerLink]="proccessStep>3 ? ['/save-profile'] : []">Save your matching profile</a>
</div>
<a class="uk-width-auto uk-float-right uk-link-muted" (click)="cancelHandle()" style="line-height: 52px;">
<span class="uk-icon uk-margin-small-right" uk-icon="icon: close"></span>
<span class="uk-text-middle">Cancel</span>
</a>
</div>

View File

@ -33,4 +33,8 @@ export class StepsnvabarComponent implements OnInit {
}
}
cancelHandle(): void {
this.router.navigate(['/manage-profiles']);
}
}

View File

@ -879,6 +879,105 @@ background:rgba(255,255,255, 0.4);
.cm-nav-disabled span.cm-nav-title {
color: #91919d;
}
/* Custom Navigation V2
========================================================================== */
:root {
--cm-nav2-theme-1: #245bcc;
--cm-nav2-theme-2: #fff;
--cm-nav2-theme-3: #ffc800;
--cm-nav2-theme-4: #cbcbcb;
--cm-nav2-theme-5: #537fdf;
}
.cm-nav2 {
text-align: center;
display: inline-block;
overflow: hidden;
counter-reset: flag;
}
.cm-nav2-step {
text-decoration: none;
outline: none;
display: block;
float: left;
font-family: Roboto;
font-size: 15px;
line-height: 50px;
padding: 0 16px 0 60px;
position: relative;
background: var(--cm-nav2-theme-2);
color: var(--cm-nav2-theme-1);
transition: background 0.3s;
border: 2px solid var(--cm-nav2-theme-1);
}
.cm-nav2-step:first-child {
padding-left: 46px;
border-radius: 2px 0 0 2px;
}
.cm-nav2-step:first-child::before {
left: 14px;
}
.cm-nav2-step:last-child {
border-radius: 0 2px 2px 0;
padding-right: 20px;
}
.cm-nav2-step:last-child::after {
content: none;
}
.cm-nav2-step::before {
content: counter(flag);
counter-increment: flag;
width: 20px;
height: auto;
line-height: 32px;
margin: 8px 0;
position: absolute;
top: 0;
left: 30px;
font-size: 24px;
font-weight: bold;
}
.cm-nav2-step::after {
content: '';
position: absolute;
top: 0;
right: -25px;
width: 50px;
height: 50px;
transform: scale(0.707) rotate(45deg);
z-index: 1;
border-radius: 0 5px 0 50px;
background: var(--cm-nav2-theme-2);
transition: background 0.3s;
box-shadow: 2px -2px 0 1px var(--cm-nav2-theme-1);
}
.cm-nav2-step:hover,
.cm-nav2-step-active,
.cm-nav2-step:hover::after,
.cm-nav2-step-active::after{
background: var(--cm-nav2-theme-5);
color: var(--cm-nav2-theme-2);
}
.cm-nav2-step:hover::before,
.cm-nav2-step-active::before {
color: var(--cm-nav2-theme-2);
}
.cm-nav2-step-disabled,
.cm-nav2-step-disabled:hover {
border: 2px solid var(--cm-nav2-theme-4);
}
.cm-nav2-step-disabled::after {
box-shadow: 2px -2px 0 1px var(--cm-nav2-theme-4);
}
.cm-nav2-step-disabled,
.cm-nav2-step-disabled:hover,
.cm-nav2-step-disabled:hover::before,
.cm-nav2-step-disabled:hover::after {
background: var(--cm-nav2-theme-2);
color: var(--cm-nav2-theme-4);
cursor: default;
}
/* Custom File drop Area Upload
========================================================================== */
.cm-file-drop-area {
@ -910,15 +1009,15 @@ background:rgba(255,255,255, 0.4);
========================================================================== */
.cm-table {
border-collapse: collapse;
/*border-radius: 3px;*/
border-style: hidden; /* hide standard table (collapsed) border */
box-shadow: 0 0 0 1px #f7c800; /* this draws the table border */
}
.cm-table th {
padding: 16px 14px;
-webkit-transition: color .1s linear;
transition: color .1s linear;
}
.cm-table tbody tr, .cm-table tfoot tr {
border: 1px solid #cbcbcb;
}
.cm-table td {
padding: 0px;
font-size: 14px;
@ -935,11 +1034,11 @@ background:rgba(255,255,255, 0.4);
padding: 14px;
}
.cm-table td.keyword, .cm-table td.context, .cm-table td.delete, .cm-table td.edit, .cm-table-footer {
border-top: 1px solid #e8e8e8;
border-top: 1px solid #cbcbcb;
font-weight: 400;
}
.cm-table td.keyword, .cm-table td.context {
border-right: 1px solid #e8e8e8;
border-right: 1px solid #cbcbcb;
}
.cm-table tr.editing td.keyword, .cm-table tr.editing td.context {
background-color: #ffd149 !important;
@ -971,9 +1070,6 @@ background:rgba(255,255,255, 0.4);
/*.cm-table td.keyword:hover, .cm-table td.context:hover, .cm-table td.edit:hover a {*/
/*color: #55546d;*/
/*}*/
.cm-table thead tr {
background-color: #fef4d7;
}
.cm-table tr th {
color: #5b6065;
font-weight: bold;
@ -1004,7 +1100,7 @@ background:rgba(255,255,255, 0.4);
}
.cm-easy-config-section {
padding: 20px;
padding: 30px 20px 20px 20px;
}
.cm-config-options-container {
display: block;
@ -1116,7 +1212,7 @@ background:rgba(255,255,255, 0.4);
}
.cm-advanced-tools-section {
padding: 0px 20px 20px 20px;
min-height: 296px;
min-height: 160px;
}
.cm-advanced-tools-section .uk-accordion-title {
font-size: 16px;
@ -1243,11 +1339,11 @@ background:rgba(255,255,255, 0.4);
/* Custom Results Section
========================================================================== */
.cm-results-section {
background-color: rgb(242, 242, 242);
min-height: 700px;
background-color: #f5f5f5;
min-height: 686px;
position: relative;
border-bottom: 1px solid #f7c800;
border-left: 1px solid #f7c800;
border: 1px dashed #cbcbcb;
margin-left: 20px;
}
.cm-results-section header {
padding: 0;
@ -1259,7 +1355,7 @@ background:rgba(255,255,255, 0.4);
box-shadow: rgba(0, 0, 0, 0.07) 0px 3px 0px;
}
.cm-results-controls {
padding: 40px 20px 20px 20px;
padding: 20px 20px 20px 20px;
}
header.uk-sticky-fixed .cm-results-controls {
background-color: rgb(242, 242, 242) !important;
@ -1423,7 +1519,6 @@ header.uk-sticky-fixed .cm-results-count-section {
margin-bottom: 64px;
}
#child1 {
padding-top: 20px;
-webkit-flex: 0.35;
flex: 0.35;
will-change: min-height;
@ -1436,10 +1531,9 @@ header.uk-sticky-fixed .cm-results-count-section {
transform: translate3d(0, 0, 0);
will-change: position, transform;
padding-bottom: 20px;
border-bottom: 1px solid #f7c800;
border-right: 1px solid #f7c800;
margin-right: -1px;
min-height: 640px;
/*border: 1px solid #f7c800;*/
/*padding-top: 20px;*/
min-height: 667px;
}
#child2 {
position: relative;

View File

@ -395,9 +395,10 @@ class GetUserIdHandler(BaseHandler):
self.finish()
def get(self):
try:
# check if we already gave client a user_id
# check if we already gave client a user_id, and it exists on the server
user_id = self.get_secure_cookie('madgikmining')
if not user_id:
database_file_name = "/tmp/OAMiningProfilesDatabase_{0}.db".format(user_id)
if user_id is None or not os.path.isfile(database_file_name):
# give him a unique user_id
user_id = getNewUserId()
self.set_secure_cookie('madgikmining', user_id)
@ -412,7 +413,7 @@ class GetUserIdHandler(BaseHandler):
cursor.execute("drop table if exists database", parse=False)
cursor.execute("create table database(id,name,datecreated,status,matches,docname,docsnumber)", parse=False)
cursor.close()
self.write(json.dumps({}))
self.write({'user_id': user_id})
self.finish()
except Exception as ints:
self.set_status(400)
@ -448,6 +449,10 @@ class GetUserProfilesHandler(BaseHandler):
import madis
# database file name
database_file_name = "/tmp/OAMiningProfilesDatabase_{0}.db".format(user_id)
if not os.path.isfile(database_file_name):
self.set_status(400)
self.write("Missing user\'s database")
return
# get the database cursor
cursor=madis.functions.Connection(database_file_name).cursor()
# data to be sent
@ -589,12 +594,6 @@ class GetExampleProfilesHandler(BaseHandler):
self.finish()
def get(self):
try:
# get user id from cookie. Must have
user_id = self.get_secure_cookie('madgikmining')
if user_id is None:
self.set_status(400)
self.write("Missing cookie containing user's id...")
return
data = {}
example_profiles = []
example_profiles.append({'name': 'Egi', 'contents': 25, 'documents': 104})