forked from r03ert0/microdraw
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request r03ert0#59 from dhovart/with-nwl-components
Rely on nwl-components for user, settings and new project pages
- Loading branch information
Showing
14 changed files
with
3,838 additions
and
1,199 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -30,3 +30,5 @@ key.pem | |
| blacklist.json | ||
| whitelist.json | ||
| .eslintcache | ||
| app/public/js/pages/*.js | ||
| app/views/scripts/dist | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -10,182 +10,12 @@ | |
|
|
||
| <body> | ||
|
|
||
| <div id="app" style="width:100%;height:100%;display:flex;flex-direction:column"> | ||
|
|
||
| <!-- Header (fixed height) --> | ||
| <div id="header"> | ||
| <!-- Top-right menu bar --> | ||
| <div id="menu"> | ||
| <a href="/doc"><img id="doc" class="button" title="documentation" src='/img/doc.svg'/></a> | ||
| <a href="https://github.com/neuroanatomy/microdraw/issues" target="_blank"><img id="bug" class="button" title="report a bug" src='/img/bug.svg'/></a> | ||
| <a href="https://github.com/neuroanatomy/microdraw" target="_blank"><img id="github" class="button" title="join our github project" style='width:15px;height:15px' src='/img/github.svg'/></a> | ||
| <div id="MyLogin"> | ||
| <span>{{{login}}}</span> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Small left-top logo --> | ||
| <div style="display:inline-block;margin:10px"> | ||
| <a href='/' style="text-decoration:none"> | ||
| <img style='height:56px;vertical-align:middle' src='/img/microdraw-white.svg'/> | ||
| </a><span style="font-family: Roboto, sans-serif; font-size: 36px; font-weight:100;vertical-align:middle" id="fontLogo"> | ||
| <a href='/' style="font-family: Roboto, sans-serif; font-size: 36px; font-weight:100; text-decoration:none">MicroDraw</a> | ||
| </span> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Content (variable height) --> | ||
| <div id="content" style="flex:1 0 auto"> | ||
|
|
||
| <!-- New Project Name --> | ||
| <div style="display:block;width:600px;margin:0 auto;padding:20px;background:#333"> | ||
|
|
||
| <div style="max-width:480px;display:block;margin:0 auto"> | ||
| <h1>Create a new project</h1> | ||
| <p> | ||
| A project contains a list of histological files, a set of vectorials or | ||
| text annotations, and a list of collaborators with their access rights. | ||
| The short name of a project can only contain letters and numbers, but | ||
| you can choose a longer display name later. | ||
| </p> | ||
|
|
||
| <input v-model="projectName" id="projectName" @input="checkProjectName" type="text" placeholder="Enter the project short name" /> | ||
| <div id='warning' style="display:none"> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Save or Cancel --> | ||
| <div style="display:block;margin:0 auto;width:200px"> | ||
| <h2 id="createProject" class="pushButton">Create Project</h2> | ||
| <h2 id="cancelChanges" class="pushButton">Cancel</h2> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <!-- End Content --> | ||
|
|
||
| <!-- Space (fixed height) --> | ||
| <div style="flex:0 0 50px"> | ||
| </div> | ||
|
|
||
| <!-- Footer (fixed height) --> | ||
| <div style="flex:0 0 100px;background-color:#000"> | ||
| <p style="width:100%;font-size:small;text-align:center"> | ||
| <a target="_blank" href="https://neuroanatomy.github.io"> | ||
| <img src="/img/naat-bw.svg" style="width:28px;height:28px;margin-right:4px;display:inline-block;vertical-align:middle"/></a> | ||
| <a target="_blank" href="https://neuroanatomy.github.io" class="linkNoULine"> | ||
| groupe de neuroanatomie appliquée et théorique | ||
| </a> | ||
| </p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script> | ||
| <!--<script src="http://localhost/libs/vue/2.4.2/vue.min.js"></script>--> | ||
|
|
||
| <script> | ||
| const projectURL = '{{{projectURL}}}'; | ||
| </script> | ||
| <div id="app"></div> | ||
|
|
||
| <script> | ||
| var app = new Vue({ | ||
| el: '#app', | ||
| delimiters: ['[[', ']]'], | ||
| data: { | ||
| projectName: '', | ||
| }, | ||
| methods: { | ||
| checkProjectName: function () { | ||
| const self = this; | ||
| const xhr = new XMLHttpRequest(); | ||
| xhr.onload = function () { | ||
| if(xhr.responseText !== '') { | ||
| const res = JSON.parse(xhr.responseText); | ||
| if(xhr.status >= 200 && xhr.status < 300 && typeof res !== 'undefined') { | ||
| document.querySelector("#warning").innerHTML = "The project <a><strong>"+self.projectName+"</strong></a> already exists"; | ||
| document.querySelector("#warning a").setAttribute('href','/project/'+self.projectName); | ||
| document.querySelector("#warning").style.display="inline-block"; | ||
| document.querySelector("#createProject").style.pointerEvents = 'none'; | ||
| document.querySelector("#createProject").style.opacity = 0.5; | ||
| } | ||
| } else { | ||
| document.querySelector("#warning").style.display = 'none'; | ||
| document.querySelector("#createProject").style.pointerEvents = 'auto'; | ||
| document.querySelector("#createProject").style.opacity = 1; | ||
| } | ||
| }; | ||
| xhr.open('GET', `/project/json/${this.projectName}`); | ||
| xhr.send(); | ||
| } | ||
| } | ||
| }); | ||
| /* | ||
| import $ from 'jquery'; | ||
| import 'jquery-ui/themes/base/core.css'; | ||
| import 'jquery-ui/themes/base/theme.css'; | ||
| import 'jquery-ui/themes/base/autocomplete.css'; | ||
| import 'jquery-ui/ui/core'; | ||
| import 'jquery-ui/ui/widgets/autocomplete'; | ||
| import * as DOMPurify from '../../../downloads/purify.min.js'; | ||
| import '../style/style.css'; | ||
| import '../style/ui.css'; | ||
| import '../style/projectNew-style.css'; | ||
| */ | ||
| /* | ||
| var host = "ws://" + window.location.hostname + ":8080/"; | ||
| let ws; | ||
| if (window.WebSocket) { | ||
| ws = new WebSocket(host); | ||
| } else if (window.MozWebSocket) { | ||
| ws = new MozWebSocket(host); | ||
| } | ||
| ws.onopen = function(msg) { | ||
| ws.send(JSON.stringify({"type":"autocompleteClient"})); | ||
| } | ||
| ws.onmessage = function(message) { | ||
| message = JSON.parse(message.data); | ||
| if (message.type === "projectNameQuery") { | ||
| if(message.metadata) { | ||
| $("#warning").html("The project <a><strong>"+message.metadata.shortname+"</strong></a> already exists"); | ||
| $("#warning a").attr('href','/project/'+message.metadata.shortname); | ||
| $("#warning").show(); | ||
| $("#createProject").css({'pointer-events':'none',opacity:0.5}); | ||
| } else { | ||
| $("#warning").hide(); | ||
| $("#createProject").css({'pointer-events':'auto',opacity:1}); | ||
| } | ||
| } | ||
| } | ||
| $("#projectName").on('keyup',function(e) { | ||
| var name=DOMPurify.sanitize($("#projectName").val()); | ||
| // check if name is alphanumeric | ||
| if(/[^a-zA-Z0-9]+/.test(name) === true) { | ||
| $("#warning").html("The name <strong>"+name+"</strong> is not allowed. Project short names can only contain letters and numbers"); | ||
| $("#warning").show(); | ||
| $("#createProject").css({'pointer-events':'none',opacity:0.5}); | ||
| } else { | ||
| // check if name already exists | ||
| ws.send(JSON.stringify({"type":"projectNameQuery", "metadata":{"name":name}})); | ||
| } | ||
| }); | ||
| */ | ||
| document.addEventListener('click', function (ev) { | ||
| if(ev.target.matches('#createProject')) { | ||
| ev.preventDefault(); | ||
| const projectName = document.getElementById('projectName').value; | ||
| location.pathname='/project/' + projectName + '/settings'; | ||
| } else if(ev.target.matches('#cancelChanges')){ | ||
| ev.preventDefault(); | ||
| location.pathname=projectURL; | ||
| } | ||
| }); | ||
| const loggedUser={{{loggedUser}}}; | ||
| </script> | ||
|
|
||
| <script src="/js/pages/project-new-page.js"></script> | ||
| <script> | ||
| (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ | ||
| (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), | ||
|
|
||
Oops, something went wrong.