Artois
/
electronotes


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
							<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <link type="text/css" rel="stylesheet" href="../node_modules/simplemde/dist/simplemde.min.css"/>
        <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 type="text/css" rel="stylesheet" href="css/google-code-prettify/desert.css"/>
        <title>Electronotes</title>
    </head>
    <body>
        <!-- Navbar -->
        <div id="navbar" class="navbar-fixed">
            <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>
                        <li><a href="reset.html">Reset</a></li>
                    </ul>
                </div>
            </nav>
        </div>

        <!-- Main content -->
        <main>
            <div class="container">
                <div class="row mtop-5">
                    <div class="col s6 left-align">
                        <a href="index.html" class="modal-close waves-effect waves-light btn-large blue"><i class="large material-icons left">keyboard_backspace</i> Retour</a>
                    </div>
                    <div class="col s6 right-align">
                        <button class="btn-floating btn-large waves-effect waves-light blue tooltipped" data-position="left" data-tooltip="Sauvegarder" onclick="validCard()"><i class="large material-icons">save</i></button>
                    </div>
                </div>
                <div class="row">
                    <div class="col s12 m6 offset-m3 input-field">
                        <i class="material-icons prefix">title</i>
                        <input id="title" type="text" class="validate">
                        <label for="title">Titre</label>
                    </div>
                </div>
                <div class="row">
                    <textarea></textarea>
                </div>
            </div>
        </main>

        <script type="text/javascript" src="../node_modules/jquery/dist/jquery.min.js"></script>
        <script type="text/javascript" src="../node_modules/simplemde/dist/simplemde.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">
            const GET = parseURLParameter();
            let mdEditor;

            $(document).ready(() => {
                // Set up data and print
                scope = binder({
                    username: localStorage.username ? localStorage.username : 'Utilisateur'
                });
                // Load tooltip
                const tooltip = M.Tooltip.init(document.querySelectorAll('.tooltipped'))[0];
                // Load markdown editor
                mdEditor = loadMarkdownEditor();
                // Load data if update
                if (GET.id) {
                    loadData().then(data => {
                        $('#title').val(data[GET.id].title);
                        mdEditor.value(data[GET.id].content);
                        M.updateTextFields();
                    });
                    document.title = 'Electronotes - Modification';
                } else {
                    document.title = 'Electronotes - Création';
                }
            });

            function loadMarkdownEditor() {
                return new SimpleMDE({
                    placeholder: 'Écrire ici ...',
                    spellChecker: false,
                    toolbar: [
                        'bold', 'italic', 'heading', '|', 
                        'code', 'quote', 'unordered-list', 'ordered-list', '|', 
                        'link', 'image', 'table', '|',
                        'preview', 'guide'
                    ],
                    previewRender: (md) => {
                        setTimeout(() => {PR.prettyPrint();}, 250);
                        return md.toHTML();
                    }
                });
            }

            function validCard() {
                if ($('#title').val().trim() === '') {
                    M.toast({
                        html: 'Le titre est vide',
                        classes: 'red'
                    });
                } else if (mdEditor.value().trim() === '') {
                    M.toast({
                        html: 'Le contenu est vide',
                        classes: 'red'
                    });
                } else {
                    saveCard();
                }
            }

            function saveCard() {
                let id;
                // Update
                if (GET.id) {
                    id = GET.id;
                }
                // Create
                else {
                    id = uniqId();
                    const list = JSON.parse(localStorage.list);
                    list.push(id);
                    localStorage.setItem('list', JSON.stringify(list));
                }
                // Set object
                const data = {
                    id: id,
                    title: $('#title').val(),
                    content: mdEditor.value()
                }
                // Save
                localStorage.setItem(id, JSON.stringify(data));
                // Go back to main page
                document.location = 'index.html';
            }
        </script>
    </body>
</html>