Artois
/
electronotes


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204
							<!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>Electronotes</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>
                </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" draggable="true" ondragstart="exportCard(this, event)" 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="#" target="_blank" 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="#!" target="_blank" class="modal-close waves-effect waves-blue btn-flat">Modifier</a>
                <span id="modal-delete" class="modal-close waves-effect waves-blue btn-flat" onclick="deleteCard(this, false)">Supprimer</span>
                <span class="modal-close waves-effect waves-blue btn-flat">Fermer</span>
            </div>
        </div>

        <!-- Add button -->
        <div class="fixed-action-btn">
            <a id="float-add-btn" href="edit.html" target="_blank" class="btn-floating btn-large waves-effect waves-light blue 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="../render/import.js"></script>
        <script type="text/javascript" src="../render/event.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">
            // Global var
            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(() => {
                        func.loader();  
                        //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];

                // Refresh data when update
                ipcRenderer.on('refresh-card', (event, arg) => {
                    loadData(true).then((data) => {
                        scope.card = data;
                        printContent(scope);
                    });
                });
            });

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

            async 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();
                        }
                    }
                }
                // Delete data
                if ( await deleteData(id)) {
                    // Remove card on the DOM
                    card[2].remove();
                    M.toast({
                        html: 'Carte supprimée',
                    });
                }
            }

            function exportCard(card, event) {
                event.preventDefault();
                const id = $(card).children()[0].innerText;
                ipcRenderer.send('ondragstart', JSON.parse(localStorage[id]));
            }
        </script>
    </body>
</html>