|
|
@@ -1,234 +1,234 @@
|
|
|
<html>
|
|
|
- <head>
|
|
|
- <meta charset="UTF-8">
|
|
|
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
- <link type="text/css" rel="stylesheet" href="css/material-icons.css" />
|
|
|
- <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
|
|
|
- <link type="text/css" rel="stylesheet" href="css/style.min.css" media="screen,projection"/>
|
|
|
- <link rel="stylesheet" type="text/css" href="css/google-code-prettify/desert.css">
|
|
|
- <title>Titre</title>
|
|
|
- </head>
|
|
|
- <body class="grey lighten-4">
|
|
|
- <!-- Navbar -->
|
|
|
- <div id="navbar" class="navbar-fixed hide">
|
|
|
- <nav>
|
|
|
- <div class="nav-wrapper">
|
|
|
- <span class="brand-logo mleft-1">Note de <span data-bind="username"></span></span>
|
|
|
- <ul class="right hide-on-med-and-down">
|
|
|
- <li><a href="https://www.electronjs.org" target="_blank">Electron JS</a></li>
|
|
|
- <li><a href="https://gitlab.univ-artois.fr/arthur_brandao/conf-electron" target="_blank">Git Repository</a></li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- </nav>
|
|
|
- </div>
|
|
|
+ <head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
+ <link type="text/css" rel="stylesheet" href="css/material-icons.css" />
|
|
|
+ <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
|
|
|
+ <link type="text/css" rel="stylesheet" href="css/style.min.css" media="screen,projection"/>
|
|
|
+ <link rel="stylesheet" type="text/css" href="css/google-code-prettify/desert.css">
|
|
|
+ <title>Titre</title>
|
|
|
+ </head>
|
|
|
+ <body class="grey lighten-4">
|
|
|
+ <!-- Navbar -->
|
|
|
+ <div id="navbar" class="navbar-fixed hide">
|
|
|
+ <nav>
|
|
|
+ <div class="nav-wrapper">
|
|
|
+ <span class="brand-logo mleft-1">Note de <span data-bind="username"></span></span>
|
|
|
+ <ul class="right hide-on-med-and-down">
|
|
|
+ <li><a href="https://www.electronjs.org" target="_blank">Electron JS</a></li>
|
|
|
+ <li><a href="https://gitlab.univ-artois.fr/arthur_brandao/conf-electron" target="_blank">Git Repository</a></li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </nav>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- Main content -->
|
|
|
- <main>
|
|
|
- <div class="container">
|
|
|
- <div class="row">
|
|
|
- <div class="col s12 center-align">
|
|
|
- Bonjour
|
|
|
- <div class="input-field inline">
|
|
|
- <input type="text" data-model="username" onblur="saveUserName(this)">
|
|
|
+ <!-- Main content -->
|
|
|
+ <main>
|
|
|
+ <div class="container">
|
|
|
+ <div class="row">
|
|
|
+ <div class="col s12 center-align">
|
|
|
+ Bonjour
|
|
|
+ <div class="input-field inline">
|
|
|
+ <input type="text" data-model="username" onblur="saveUserName(this)">
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="row" data-loop="card">
|
|
|
- <div class="col s12 m6 l4">
|
|
|
- <div class="card">
|
|
|
- <div class="card-content zoom-in selectable" onclick="selectCard(this)">
|
|
|
- <span class="hide" data-val="id"></span>
|
|
|
- <span class="card-title" data-val="title"></span>
|
|
|
- </div>
|
|
|
- <div class="card-action">
|
|
|
- <a href="#">Modifier</a>
|
|
|
- <a href="#" onclick="deleteCard(this, true)">Supprimer</a>
|
|
|
+ <div class="row" data-loop="card">
|
|
|
+ <div class="col s12 m6 l4">
|
|
|
+ <div class="card">
|
|
|
+ <div class="card-content zoom-in selectable" onclick="selectCard(this)">
|
|
|
+ <span class="hide" data-val="id"></span>
|
|
|
+ <span class="card-title" data-val="title"></span>
|
|
|
+ </div>
|
|
|
+ <div class="card-action">
|
|
|
+ <a href="#">Modifier</a>
|
|
|
+ <a href="#" onclick="deleteCard(this, true)">Supprimer</a>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </main>
|
|
|
+ </main>
|
|
|
|
|
|
- <!-- Modal Structure -->
|
|
|
- <div class="modal">
|
|
|
- <div class="modal-content">
|
|
|
- <h4 id="modal-title"></h4>
|
|
|
- <div id="modal-content"></div>
|
|
|
- </div>
|
|
|
- <div class="modal-footer">
|
|
|
- <a href="#!" class="waves-effect waves-green btn-flat">Modifier</a>
|
|
|
- <span id="modal-delete" class="modal-close waves-effect waves-green btn-flat" onclick="deleteCard(this, false)">Supprimer</span>
|
|
|
- <span class="modal-close waves-effect waves-green btn-flat">Fermer</span>
|
|
|
+ <!-- Modal Structure -->
|
|
|
+ <div class="modal">
|
|
|
+ <div class="modal-content">
|
|
|
+ <h4 id="modal-title"></h4>
|
|
|
+ <div id="modal-content"></div>
|
|
|
+ </div>
|
|
|
+ <div class="modal-footer">
|
|
|
+ <a href="#!" class="waves-effect waves-green btn-flat">Modifier</a>
|
|
|
+ <span id="modal-delete" class="modal-close waves-effect waves-green btn-flat" onclick="deleteCard(this, false)">Supprimer</span>
|
|
|
+ <span class="modal-close waves-effect waves-green btn-flat">Fermer</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <!-- Add button -->
|
|
|
- <div class="fixed-action-btn">
|
|
|
- <a id="float-add-btn" class="btn-floating btn-large waves-effect waves-light red hide">
|
|
|
- <i class="large material-icons">add</i>
|
|
|
- </a>
|
|
|
- </div>
|
|
|
+ <!-- Add button -->
|
|
|
+ <div class="fixed-action-btn">
|
|
|
+ <a id="float-add-btn" class="btn-floating btn-large waves-effect waves-light red hide">
|
|
|
+ <i class="large material-icons">add</i>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- Discovery -->
|
|
|
- <div class="tap-target" data-target="float-add-btn">
|
|
|
- <div class="tap-target-content">
|
|
|
- <h5>Ajouter une note</h5>
|
|
|
- <p>Pour ajouter une note il suffit de cliquer sur ce bouton<br>(cliquez pour faire disparaitre)</p>
|
|
|
+ <!-- Discovery -->
|
|
|
+ <div class="tap-target" data-target="float-add-btn">
|
|
|
+ <div class="tap-target-content">
|
|
|
+ <h5>Ajouter une note</h5>
|
|
|
+ <p>Pour ajouter une note il suffit de cliquer sur ce bouton<br>(cliquez pour faire disparaitre)</p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <!-- Loader -->
|
|
|
- <div id="page-loader" class="bg-loader grey darken-4">
|
|
|
- <div class="loader progress">
|
|
|
- <div class="indeterminate"></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
+ <!-- Loader -->
|
|
|
+ <div id="page-loader" class="bg-loader grey darken-4">
|
|
|
+ <div class="loader progress">
|
|
|
+ <div class="indeterminate"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
|
|
|
- <script type="text/javascript" src="../node_modules/jquery/dist/jquery.min.js"></script>
|
|
|
- <script type="text/javascript" src="../node_modules/marked/marked.min.js"></script>
|
|
|
- <script type="text/javascript" src="../node_modules/dompurify/dist/purify.min.js"></script>
|
|
|
- <script type="text/javascript" src="js/materialize.min.js"></script>
|
|
|
- <script type="text/javascript" src="js/google-code-prettify/prettify.js"></script>
|
|
|
- <script type="text/javascript" src="js/script.js"></script>
|
|
|
- <script type="text/javascript" src="js/binder.js"></script>
|
|
|
- <script type="text/javascript">
|
|
|
- var scope;
|
|
|
- var modal;
|
|
|
+ <script type="text/javascript" src="../node_modules/jquery/dist/jquery.min.js"></script>
|
|
|
+ <script type="text/javascript" src="../node_modules/marked/marked.min.js"></script>
|
|
|
+ <script type="text/javascript" src="../node_modules/dompurify/dist/purify.min.js"></script>
|
|
|
+ <script type="text/javascript" src="js/materialize.min.js"></script>
|
|
|
+ <script type="text/javascript" src="js/google-code-prettify/prettify.js"></script>
|
|
|
+ <script type="text/javascript" src="js/script.js"></script>
|
|
|
+ <script type="text/javascript" src="js/binder.js"></script>
|
|
|
+ <script type="text/javascript">
|
|
|
+ var scope;
|
|
|
+ var modal;
|
|
|
|
|
|
- //When wep page is ready
|
|
|
- $(document).ready(() => {
|
|
|
- // Load data from server
|
|
|
- loadData(true).then((data) => {
|
|
|
- // Get username
|
|
|
- const username = getCookie('username');
|
|
|
- // Set up data and print
|
|
|
- scope = binder({
|
|
|
- card: data
|
|
|
+ //When wep page is ready
|
|
|
+ $(document).ready(() => {
|
|
|
+ // Load data from server
|
|
|
+ loadData(true).then((data) => {
|
|
|
+ // Get username
|
|
|
+ const username = getCookie('username');
|
|
|
+ // Set up data and print
|
|
|
+ scope = binder({
|
|
|
+ card: data
|
|
|
+ });
|
|
|
+ scope.username = username ? username : 'Utilisateur';
|
|
|
+ printContent(scope);
|
|
|
+ // Show page
|
|
|
+ setTimeout(() => {
|
|
|
+ pageLoader(false);
|
|
|
+ //Show discovery the first time
|
|
|
+ if (!getCookie('discovery')) {
|
|
|
+ // Load discovery
|
|
|
+ const discovery = M.TapTarget.init(document.querySelectorAll('.tap-target'), {onClose: () => {
|
|
|
+ document.cookie = "discovery=closed";
|
|
|
+ }})[0];
|
|
|
+ setTimeout(() => {discovery.open();}, 500);
|
|
|
+ }
|
|
|
+ }, 500);
|
|
|
});
|
|
|
- scope.username = username ? username : 'Utilisateur';
|
|
|
- printContent(scope);
|
|
|
- // Show page
|
|
|
- setTimeout(() => {
|
|
|
- pageLoader(false);
|
|
|
- //Show discovery the first time
|
|
|
- if (!getCookie('discovery')) {
|
|
|
- // Load discovery
|
|
|
- const discovery = M.TapTarget.init(document.querySelectorAll('.tap-target'), {onClose: () => {
|
|
|
- document.cookie = "discovery=closed";
|
|
|
- }})[0];
|
|
|
- setTimeout(() => {discovery.open();}, 500);
|
|
|
- }
|
|
|
- }, 500);
|
|
|
- });
|
|
|
|
|
|
- // Load floating button
|
|
|
- const floatingButton = M.FloatingActionButton.init(document.querySelectorAll('.fixed-action-btn'))[0];
|
|
|
- // Load modal
|
|
|
- modal = M.Modal.init(document.querySelectorAll('.modal'))[0];
|
|
|
- });
|
|
|
+ // Load floating button
|
|
|
+ const floatingButton = M.FloatingActionButton.init(document.querySelectorAll('.fixed-action-btn'))[0];
|
|
|
+ // Load modal
|
|
|
+ modal = M.Modal.init(document.querySelectorAll('.modal'))[0];
|
|
|
+ });
|
|
|
|
|
|
- /**
|
|
|
- * Load all card
|
|
|
- * @param boolean toArray (optionnal) send result in array and not in object (default: false)
|
|
|
- */
|
|
|
- function loadData(toArray) {
|
|
|
- toArray = toArray ? toArray : false;
|
|
|
- const data = toArray ? [] : {};
|
|
|
- return new Promise(resolve => {
|
|
|
- // Load from local storage
|
|
|
- if (localStorage.list) {
|
|
|
- const list = JSON.parse(localStorage.list)
|
|
|
- for (element of list) {
|
|
|
- toArray ? data.push(localStorage[element]) : data[element] = localStorage[element];
|
|
|
+ /**
|
|
|
+ * Load all card
|
|
|
+ * @param boolean toArray (optionnal) send result in array and not in object (default: false)
|
|
|
+ */
|
|
|
+ function loadData(toArray) {
|
|
|
+ toArray = toArray ? toArray : false;
|
|
|
+ const data = toArray ? [] : {};
|
|
|
+ return new Promise(resolve => {
|
|
|
+ // Load from local storage
|
|
|
+ if (localStorage.list) {
|
|
|
+ const list = JSON.parse(localStorage.list)
|
|
|
+ for (element of list) {
|
|
|
+ toArray ? data.push(localStorage[element]) : data[element] = localStorage[element];
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ localStorage.setItem('list', JSON.stringify([]));
|
|
|
}
|
|
|
- } else {
|
|
|
- localStorage.setItem('list', JSON.stringify([]));
|
|
|
- }
|
|
|
- // Load from disk
|
|
|
- $.getJSON('data/list.json', (list) => {
|
|
|
- const total = list.length;
|
|
|
- let count = 0;
|
|
|
- list.forEach(element => {
|
|
|
- $.getJSON(`data/${element}.json`, (result) => {
|
|
|
- toArray ? data.push(result) : data[result.id] = result;
|
|
|
- if (++count === total) {
|
|
|
- resolve(data);
|
|
|
- }
|
|
|
+ // Load from disk
|
|
|
+ $.getJSON('data/list.json', (list) => {
|
|
|
+ const total = list.length;
|
|
|
+ let count = 0;
|
|
|
+ list.forEach(element => {
|
|
|
+ $.getJSON(`data/${element}.json`, (result) => {
|
|
|
+ toArray ? data.push(result) : data[result.id] = result;
|
|
|
+ if (++count === total) {
|
|
|
+ resolve(data);
|
|
|
+ }
|
|
|
+ });
|
|
|
});
|
|
|
});
|
|
|
});
|
|
|
- });
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- function printContent(scope) {
|
|
|
- for(element of scope.card) {
|
|
|
- element.content = element.content.toHTML();
|
|
|
+ function printContent(scope) {
|
|
|
+ for(element of scope.card) {
|
|
|
+ element.content = element.content.toHTML();
|
|
|
+ }
|
|
|
+ looper(scope);
|
|
|
+ PR.prettyPrint();
|
|
|
}
|
|
|
- looper(scope);
|
|
|
- PR.prettyPrint();
|
|
|
- }
|
|
|
|
|
|
- function saveUserName(input) {
|
|
|
- if (input.value.trim() === '') {
|
|
|
- document.cookie = 'username=Utilisateur';
|
|
|
- } else {
|
|
|
- document.cookie = `username=${input.value}`;
|
|
|
+ function saveUserName(input) {
|
|
|
+ if (input.value.trim() === '') {
|
|
|
+ document.cookie = 'username=Utilisateur';
|
|
|
+ } else {
|
|
|
+ document.cookie = `username=${input.value}`;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- function selectCard(card) {
|
|
|
- const promise = loadData();
|
|
|
- const idElement = card.querySelector('[data-val=id]');
|
|
|
- const id = idElement.innerHTML;
|
|
|
- promise.then(data => {
|
|
|
- $('#modal-title').html(data[id].title);
|
|
|
- $('#modal-content').html(data[id].content.toHTML())
|
|
|
- $('#modal-delete').attr('data-id', id);
|
|
|
- PR.prettyPrint();
|
|
|
- modal.open();
|
|
|
- });
|
|
|
- }
|
|
|
+ function selectCard(card) {
|
|
|
+ const promise = loadData();
|
|
|
+ const idElement = card.querySelector('[data-val=id]');
|
|
|
+ const id = idElement.innerHTML;
|
|
|
+ promise.then(data => {
|
|
|
+ $('#modal-title').html(data[id].title);
|
|
|
+ $('#modal-content').html(data[id].content.toHTML())
|
|
|
+ $('#modal-delete').attr('data-id', id);
|
|
|
+ PR.prettyPrint();
|
|
|
+ modal.open();
|
|
|
+ });
|
|
|
+ }
|
|
|
|
|
|
- function deleteCard(span, fromCard) {
|
|
|
- let card;
|
|
|
- let id;
|
|
|
- // Get id and card element to remove
|
|
|
- if (fromCard) {
|
|
|
- card = $(span).parents();
|
|
|
- id = $($(card[1]).children()[0]).children()[0].innerHTML;
|
|
|
- } else {
|
|
|
- id = $(span).attr('data-id');
|
|
|
- idElements = document.querySelectorAll('[data-val=id]');
|
|
|
- for (idElement of idElements) {
|
|
|
- if (idElement.innerHTML === id) {
|
|
|
- card = $(idElement).parents();
|
|
|
+ function deleteCard(span, fromCard) {
|
|
|
+ let card;
|
|
|
+ let id;
|
|
|
+ // Get id and card element to remove
|
|
|
+ if (fromCard) {
|
|
|
+ card = $(span).parents();
|
|
|
+ id = $($(card[1]).children()[0]).children()[0].innerHTML;
|
|
|
+ } else {
|
|
|
+ id = $(span).attr('data-id');
|
|
|
+ idElements = document.querySelectorAll('[data-val=id]');
|
|
|
+ for (idElement of idElements) {
|
|
|
+ if (idElement.innerHTML === id) {
|
|
|
+ card = $(idElement).parents();
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
+ // If card in local storage remove
|
|
|
+ if (localStorage[id]) {
|
|
|
+ localStorage.removeItem(id);
|
|
|
+ let list = JSON.parse(localStorage.list);
|
|
|
+ list.removeItem(id);
|
|
|
+ localStorage.setItem('list', JSON.stringify(list));
|
|
|
+ }
|
|
|
+ // Remove card on the DOM
|
|
|
+ card[2].remove();
|
|
|
}
|
|
|
- // If card in local storage remove
|
|
|
- if (localStorage[id]) {
|
|
|
- localStorage.removeItem(id);
|
|
|
- let list = JSON.parse(localStorage.list);
|
|
|
- list.removeItem(id);
|
|
|
- localStorage.setItem('list', JSON.stringify(list));
|
|
|
- }
|
|
|
- // Remove card on the DOM
|
|
|
- card[2].remove();
|
|
|
- }
|
|
|
|
|
|
- function pageLoader(active) {
|
|
|
- if (active) {
|
|
|
- $('#page-loader').removeClass('hide');
|
|
|
- $('#navbar').addClass('hide');
|
|
|
- $('#float-add-btn').addClass('hide');
|
|
|
- } else {
|
|
|
- $('#float-add-btn').removeClass('hide');
|
|
|
- $('#navbar').removeClass('hide');
|
|
|
- $('#page-loader').addClass('hide');
|
|
|
+ function pageLoader(active) {
|
|
|
+ if (active) {
|
|
|
+ $('#page-loader').removeClass('hide');
|
|
|
+ $('#navbar').addClass('hide');
|
|
|
+ $('#float-add-btn').addClass('hide');
|
|
|
+ } else {
|
|
|
+ $('#float-add-btn').removeClass('hide');
|
|
|
+ $('#navbar').removeClass('hide');
|
|
|
+ $('#page-loader').addClass('hide');
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- </script>
|
|
|
- </body>
|
|
|
+ </script>
|
|
|
+ </body>
|
|
|
</html>
|
Loquicom