Artois
/
electronotes


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
							<!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="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>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>
                        <li><a href="reset.html">Reset</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)">
                        </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="#" class="card-edit">Modifier</a>
                                <a href="#" onclick="deleteCard(this, true)">Supprimer</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </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 id="modal-edit" href="#!" class="waves-effect waves-red btn-flat">Modifier</a>
                <span id="modal-delete" class="modal-close waves-effect waves-red btn-flat" onclick="deleteCard(this, false)">Supprimer</span>
                <span class="modal-close waves-effect waves-red btn-flat">Fermer</span>
            </div>
        </div>

        <!-- Add button -->
        <div class="fixed-action-btn">
            <a id="float-add-btn" href="edit.html" class="btn-floating btn-large waves-effect waves-light red hide tooltipped" data-position="left" data-tooltip="Ajouter">
                <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 n'importe où pour faire disparaitre)</p>
            </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;
            const editPage = 'edit.html';

            //When wep page is ready
            $(document).ready(() => {
                // Load data from server
                loadData(true).then((data) => {
                    // Set up data and print
                    scope = binder({
                        card: data
                    });
                    scope.username = localStorage.username ? localStorage.username : 'Utilisateur';
                    printContent(scope);
                    // Show page
                    setTimeout(() => {
                        pageLoader(false);  
                        //Show discovery the first time
                        if (!localStorage.discovery) {
                            // Load discovery
                            const discovery = M.TapTarget.init(document.querySelectorAll('.tap-target'), {onClose: () => {
                                localStorage.setItem('discovery', true)
                            }})[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 tooltip
                const tooltip = M.Tooltip.init(document.querySelectorAll('.tooltipped'))[0];
            });

            function printContent(scope) {
                for(element of scope.card) {
                    element.content = element.content.toHTML();
                }
                looper(scope);
                for (cardEdit of $('.card-edit')) {
                    const id = $($($(cardEdit).parents()[1]).children()[0]).children()[0].innerHTML;
                    $(cardEdit).attr('href', `${editPage}?id=${id}`);
                }
                PR.prettyPrint();
            }

            function saveUserName(input) {
                if (input.value.trim() === '') {
                    localStorage.removeItem('username');
                } else {
                    localStorage.setItem('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);
                    $('#modal-edit').attr('href', `${editPage}?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();
                        }
                    }
                }
                // 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');
                }
            }
        </script>
    </body>
</html>