Skip to content

Commit 727695a

Browse files
MarkRobboMarkRobbo
committed
Combine into one form, start validation
1 parent f2b4e91 commit 727695a

File tree

5 files changed

+88
-45
lines changed

5 files changed

+88
-45
lines changed

‎src/main/resources/static/css/main-20170616.css

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -81,17 +81,16 @@ body {
8181
}
8282

8383
#url {
84-
background: url("/img/GitHub-Mark-32px.png") no-repeat scroll 7px 4px;
85-
background-size: 25px 25px;
86-
padding-left: 45px;
87-
}
88-
89-
#repoURL {
9084
background: url("/img/gitlogo.png") no-repeat scroll 4px 1px;
9185
background-size: 30px 30px;
9286
padding-left: 45px;
9387
}
9488

89+
#extraInputs {
90+
display:none;
91+
margin-top:10px;
92+
}
93+
9594
#githubLogo {
9695
margin-right: 5px;
9796
}

‎src/main/resources/static/js/loading.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
requirejs.config({
2424
baseUrl: '/bower_components',
2525
paths: {
26-
jquery: 'jquery/dist/jquery.min',
26+
jquery: 'jquery/dist/jquery.min'
2727
}
2828
});
2929

‎src/main/resources/static/js/main.js

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
/*
2+
* Licensed to the Apache Software Foundation (ASF) under one
3+
* or more contributor license agreements. See the NOTICE file
4+
* distributed with this work for additional information
5+
* regarding copyright ownership. The ASF licenses this file
6+
* to you under the Apache License, Version 2.0 (the
7+
* "License"); you may not use this file except in compliance
8+
* with the License. You may obtain a copy of the License at
9+
*
10+
* http://www.apache.org/licenses/LICENSE-2.0
11+
*
12+
* Unless required by applicable law or agreed to in writing,
13+
* software distributed under the License is distributed on an
14+
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
15+
* KIND, either express or implied. See the License for the
16+
* specific language governing permissions and limitations
17+
* under the License.
18+
*/
19+
20+
/**
21+
* RequireJS configuration with all possible dependencies
22+
*/
23+
requirejs.config({
24+
baseUrl: '/bower_components',
25+
paths: {
26+
'jquery': 'jquery/dist/jquery.min',
27+
}
28+
});
29+
30+
/**
31+
* Suggestions on the main page
32+
*/
33+
require(['jquery'],
34+
function ($) {
35+
$(".example").click(function(e) {
36+
$("#url").val($(this).attr("href"));
37+
e.preventDefault();
38+
});
39+
});
40+
41+
/**
42+
* Validation for URL
43+
*/
44+
require(['jquery'],
45+
function ($) {
46+
$('#url').on('input', function() {
47+
var generalPattern = "\\/([A-Za-z0-9_.-]+)\\/([A-Za-z0-9_.-]+)\\/?(?:tree|blob)\\/([^/]+)(?:\\/(.+\\.cwl))$";
48+
var githubPattern = "^https?:\\/\\/github\\.com" + generalPattern;
49+
var gitlabPattern = "^https?:\\/\\/gitlab\\.com" + generalPattern;
50+
var gitPattern = "((git|ssh|http(s)?)|(git@[\\w\\.]+))(:(//)?)([\\w\\.@\\:/\\-~]+)(\\.git)(/)?";
51+
52+
var input = $(this).text();
53+
if (input.search(githubPattern) > 0 || input.search(gitlabPattern) > 0) {
54+
$("#extraInputs").fadeOut();
55+
$(this).closest(".form-group").addClass("has-success");
56+
} else if (input.search(gitPattern) > 0) {
57+
$("#extraInputs").fadeIn();
58+
}
59+
60+
//$(this).closest(".form-group").addClass("has-warning");
61+
//$(".validateMessage").text("Git repository URL must be HTTP or HTTPS");
62+
});
63+
});

‎src/main/resources/templates/index.html

Lines changed: 17 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -44,19 +44,19 @@ <h1>Common Workflow Language Viewer</h1>
4444
<div class="alert alert-info">
4545
<p>Want to generate visualisations in build scripts or from another automated process? Find out about <a href="/apidocs" alt="API Documentation">our API</a></p>
4646
</div>
47+
48+
<hr/>
49+
50+
<h2>Workflow URL</h2>
51+
<p>Provide a Github, Gitlab or Git repository link to the workflow here</p>
4752
<div class="alert alert-grey">
4853
<strong>Don't know what to view?</strong> Try these from <i>common-workflow-language/workflows</i>:
49-
<a href="/workflows/github.com/common-workflow-language/workflows/tree/master/workflows/compile/compile1.cwl">compile</a>,
50-
<a href="/workflows/github.com/common-workflow-language/workflows/tree/master/workflows/make-to-cwl/dna.cwl">make-to-cwl</a>,
51-
<a href="/workflows/github.com/common-workflow-language/workflows/tree/master/workflows/lobSTR/lobSTR-workflow.cwl">lobSTR</a>,
52-
<a href="/workflows/github.com/common-workflow-language/workflows/tree/master/workflows/scidap/bam-genomecov-bigwig-rna-dutp.cwl">scidap</a>
54+
<a class="example" href="/workflows/github.com/common-workflow-language/workflows/tree/master/workflows/compile/compile1.cwl">compile</a>,
55+
<a class="example" href="/workflows/github.com/common-workflow-language/workflows/tree/master/workflows/make-to-cwl/dna.cwl">make-to-cwl</a>,
56+
<a class="example" href="/workflows/github.com/common-workflow-language/workflows/tree/master/workflows/lobSTR/lobSTR-workflow.cwl">lobSTR</a>,
57+
<a class="example" href="/workflows/github.com/common-workflow-language/workflows/tree/master/workflows/scidap/bam-genomecov-bigwig-rna-dutp.cwl">scidap</a>
5358
or <a href="/workflows">explore the collection</a>
5459
</div>
55-
56-
<hr/>
57-
58-
<h2>Workflow from Github/Gitlab URL</h2>
59-
<p>Provide a Github or Gitlab link to the workflow here</p>
6060
<form id="add" action="#" th:action="@{/workflows}" th:object="${workflowForm}" method="POST">
6161
<div class="alert alert-danger" th:if="${errors} != null and ${errors.hasErrors()}">
6262
<div th:each="error : ${errors.getAllErrors()}">
@@ -66,41 +66,22 @@ <h2>Workflow from Github/Gitlab URL</h2>
6666
<div class="alert alert-danger" th:if="${#fields.hasErrors('url')}">
6767
<strong>Error:</strong> <span th:errors="*{url}">Error message here</span>
6868
</div>
69-
<div class="input-group">
70-
<label for="url" class="sr-only">Github or Gitlab URL</label>
71-
<input type="text" class="form-control" placeholder="Github or Gitlab URL" id="url" name="url" th:field="*{url}" th:value="${formURL}" required="true" />
72-
<span class="input-group-btn">
73-
<button class="btn btn-primary" type="submit">Parse Workflow</button>
74-
</span>
75-
</div>
76-
</form>
77-
78-
<hr/>
79-
80-
<h2>Workflow from Git Details</h2>
81-
<p>Provide the repository URL, path and branch details for the workflow here</p>
82-
<form id="git" action="#" th:action="@{/workflows}" th:object="${workflowForm}" method="POST">
83-
<div class="alert alert-danger" th:if="${errors} != null and ${errors.hasErrors()}">
84-
<div th:each="error : ${errors.getAllErrors()}">
85-
<strong>Error:</strong> <span th:text="${error.getDefaultMessage()}">Error message here</span>
86-
</div>
87-
</div>
88-
<div class="alert alert-danger" th:if="${#fields.hasErrors('url')}">
89-
<strong>Error:</strong> <span th:errors="*{url}">Error message here</span>
69+
<div class="form-group">
70+
<label class="control-label" for="url">URL to workflow</label>
71+
<input type="text" class="form-control" placeholder="Github, Gitlab or Git repository URL" id="url" name="url" th:field="*{url}" th:value="${formURL}" required="true" />
72+
<span class="validateMessage"></span>
9073
</div>
91-
<label for="repoURL">Repository URL</label>
92-
<input type="text" class="form-control" placeholder="Repository URL (HTTPS)" id="repoURL" name="repoURL" th:field="*{url}" th:value="${formURL}" required="true" />
93-
<div class="row" style="margin-top:10px;margin-bottom:10px;">
74+
<div id="extraInputs" class="row">
9475
<div class="col-md-6">
9576
<label for="branch">Branch Name/Commit ID</label>
96-
<input type="text" class="form-control" placeholder="Branch Name or Commit ID" name="branch" required="true" />
77+
<input type="text" class="form-control" placeholder="Branch Name or Commit ID" name="branch" />
9778
</div>
9879
<div class="col-md-6">
9980
<label for="path">Path to Workflow</label>
100-
<input type="text" class="form-control" placeholder="/path/to/workflow.cwl" name="path" required="true" />
81+
<input type="text" class="form-control" placeholder="/path/to/workflow.cwl" name="path" />
10182
</div>
10283
</div>
103-
<button class="btn btn-primary pull-right" type="submit">Parse Workflow</button>
84+
<button class="btn btn-primary pull-right" type="submit" style="margin-top:10px;">Parse Workflow</button>
10485
</form>
10586
</div>
10687
</div>

‎src/main/resources/templates/selectworkflow.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,12 +33,12 @@
3333
<div class="container">
3434
<div class="row">
3535
<div class="col-md-12" role="main" id="main">
36-
<h1 th:text="'Choose Workflow from ' + ${githubDetails.path}">Choose Workflow</h1>
36+
<h1 th:text="'Choose Workflow from ' + ${gitDetails.path}">Choose Workflow</h1>
3737
<div class="alert alert-info">
3838
<p>Multiple CWL files were found, please select the workflow you would like to view below</p>
3939
</div>
4040
<div class="list-group">
41-
<a href="#" class="list-group-item" th:each="workflowOverview : ${workflowOverviews}" th:href="@{'/workflows/github.com/' + ${githubDetails.owner} + '/' + ${githubDetails.repoName} + '/tree/' + ${githubDetails.branch} + '/' + ${githubDetails.path} + '/' + ${workflowOverview.fileName}}">
41+
<a href="#" class="list-group-item" th:each="workflowOverview : ${workflowOverviews}" th:href="@{'/workflows/github.com/' + ${gitDetails.owner} + '/' + ${gitDetails.repoName} + '/tree/' + ${gitDetails.branch} + '/' + ${gitDetails.path} + '/' + ${workflowOverview.fileName}}">
4242
<h4 class="list-group-item-heading" th:text="${workflowOverview.fileName}">ExampleWorkflow.cwl</h4>
4343
<p class="list-group-item-text">
4444
<span th:if="${workflowOverview.label != null}" th:text="${workflowOverview.label}">Label</span>

0 commit comments

Comments
 (0)