Artois
/
electronotes


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234
							<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>

    <!-- 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="#">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 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>

    <!-- 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>
        </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;

        //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);   
            });

            // 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];
                    }
                } 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);
                            }
                        });
                    });
                });
            });
        }

        function printContent(scope) {
            for(element of scope.card) {
                element.content = element.content.toHTML();
            }
            looper(scope);
            PR.prettyPrint();
        }

        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 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>