Skip to content
Snippets Groups Projects
Commit 7fc0f489 authored by Alexandre Bourlier's avatar Alexandre Bourlier
Browse files

Templated index.php

parent c2a2d197
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 147 additions and 170 deletions
Gruntfile.js
+ 4
− 22
View file @ 7fc0f489
......@@ -18,37 +18,19 @@ module.exports = function(grunt) {
}
},
concat: {
options: {
stripBanners: true
},
dist: {
src: ['src/html/header.html', 'src/html/*.html', '!src/html/footer.html', 'src/html/footer.html'],
dest: 'index.html'
}
},
//uglify: {
//options: {},
//dist: {
//src: '<%= concat.dist.dest %>',
//dest: 'dist/<%= pkg.name %>.min.js'
//}
//},
watch: {
files: ['src/**/*'],
tasks: ['concat', 'sass'],
files: ['src/scss/**/*.scss'],
tasks: ['sass'],
}
});
// These plugins provide necessary tasks.
grunt.loadNpmTasks('grunt-contrib-concat');
//grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-sass');
//grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
// Default task.
grunt.registerTask('default', ['concat', 'sass']);
grunt.registerTask('default', ['sass']);
};
src/html/header.html → index.php
+ 21
− 0
View file @ 7fc0f489
......@@ -24,3 +24,24 @@
</head>
<body>
<div id="mainContainer" class="container-fluid">
<div class="row pt-3">
<?php require_once('src/html/menu.html'); ?>
<main id="ldp-root" class="col-md-10">
<?php require_once('src/html/home.html'); ?>
<?php require_once('src/html/members.html'); ?>
<?php require_once('src/html/projects.html'); ?>
<?php require_once('src/html/groups.html'); ?>
<?php require_once('src/html/calendar.html'); ?>
<?php require_once('src/html/drive.html'); ?>
</main>
</div>
</div>
<!--Profil Modal-->
<div id="profileDiv" style="display: none;">
<ldp-display id="profileDetail" data-fields="profil-modal" set-profil-modal="picture, profil-content" widget-picture="ldp-display-img" set-profil-content="name, languages, country"></ldp-display>
</div>
</body>
</html>
src/html/calendar.html 0 → 100644
+ 4
− 0
View file @ 7fc0f489
<div id="calendar" style="display: none">
<h1 class="page-title">Agenda</h1>
<ldp-calendar data-src="http://lucky.alwaysdata.net/api/events/" style="display: block; height: 300px; width: 500px;"></ldp-calendar>
</div>
src/html/drive.html 0 → 100644
+ 3
− 0
View file @ 7fc0f489
<div id="drive" style="display: none">
<h1 class="page-title">Drive</h1>
</div>
src/html/footer.html deleted 100644 → 0
+ 0
− 2
View file @ c2a2d197
</body>
</html>
src/html/groups.html 0 → 100644
+ 6
− 0
View file @ 7fc0f489
<div id="groups" style="display: none">
<h1 class="page-title">Groupes</h1>
<!-- <ldp-display data-src="http://lucky.alwaysdata.net/api/groups/" data-fields="title, membersTest" widget-membersTest="ldp-list" value-membersTest="Benoit"></ldp-display> -->
<ldp-display id="groupsList" data-src="http://lucky.alwaysdata.net/api/groups/" data-fields="title, members" widget-members="ldp-list"></ldp-display>
<!-- <ldp-display data-src="http://lucky.alwaysdata.net/api/groups/" data-fields="title, membersTest" widget-membersTest="ldp-list" value-membersTest="["Luke", "Bruno"]"></ldp-display> -->
</div>
src/html/home.html 0 → 100644
+ 5
− 0
View file @ 7fc0f489
<div id="home" style="display: none">
<div id="logoContainer">
<img src="./img/Logo_Happy_Dev.png" alt="Logo Happy Dev">
</div>
</div>
src/html/index.html deleted 100644 → 0
+ 0
− 146
View file @ c2a2d197
<div id="mainContainer" class="container-fluid">
<div class="row pt-3">
<!-- Menu -->
<div class="col-md-2 menu">
<div id="menu-title">HAPPY APP</div>
<ldp-router root="ldp-root" default-route="home">
<ldp-route name="members">Membres</ldp-route>
<ldp-route name="projects">Projets</ldp-route>
<ldp-route name="groups">Groupes</ldp-route>
<ldp-route name="calendar">Agenda</ldp-route>
<ldp-route name="drive">Drive</ldp-route>
<!-- <ldp-route name="home">Home</ldp-route> -->
</ldp-router>
</div>
<main id="ldp-root" class="col-md-10">
<!-- HOME -->
<div id="home" style="display: none">
<div id="logoContainer">
<img src="./img/Logo_Happy_Dev.png" alt="Logo Happy Dev">
</div>
</div>
<!-- MEMBERS -->
<div id="members" style="display: none">
<h1 class="page-title">Membres</h1>
<ldp-display id="profilesList" data-src="http://lucky.alwaysdata.net/api/users/" data-fields="miniature" set-miniature="picture, name" widget-picture="ldp-display-img"></ldp-display>
<!-- <ldp-display id="profilesList" data-src="https://djangoldp.happy-dev.fr/skippers/" data-fields="miniature, name" set-miniature="picture" widget-picture="ldp-display-img"
set-name="name, testmdr" value-testmdr="C'est trés amusant"></ldp-display> -->
<!-- test direct dans data-fields -->
<!-- <ldp-display id="profilesList" data-src="https://djangoldp.happy-dev.fr/skippers/" data-fields="picture, name" widget-picture="ldp-display-img"></ldp-display> -->
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function (event) {
var profilesListElt = document.querySelector('#profilesList');
var profileDivElt = document.querySelector('#profileDiv');
var profileDetailElt = document.querySelector('#profileDetail');
profilesListElt.addEventListener('select', function (event) {
profileDivElt.style.display = 'flex';
profileDetailElt.setAttribute("data-src", event.detail.resource['@id']);
});
profileDivElt.addEventListener('click', function (event) {
if (event.target.id == "profileDiv") {
profileDivElt.style.display = 'none';
}
});
});
</script>
</div>
<!-- PROJECTS -->
<div id="projects" style="display: none">
<h1 class="page-title" id="projectsListTitle">Projets</h1>
<div id="projectsTable">
<ol>
<li id="categorieNumber">Numéro</li>
<li id="categorieNumberAlt">N°</li>
<li id="categorieTitle">Titre</li>
<li id="categorieAssociate">Associé</li>
<li id="categorieIncome">CA</li>
<li id="categorieState">Etat</li>
</ol>
<ldp-display id="projectsList" data-src="http://lucky.alwaysdata.net/api/projects/" data-fields="number, title, associate, income-div, state" set-income-div="income, euro" value-euro="&#160€"></ldp-display>
</div>
<!-- project view -->
<ldp-display id="projectTitle" data-fields="title, space, number" value-space="&#160-&#160"></ldp-display>
<div id="projectDiv" style="display: none;">
<div class="container-fluid" id="projectContainer">
<div class="row">
<div class="col-md-9" id="projectLeftCol">
<div class="chat-box">
<img src=".\img\chat_image.PNG" alt="Chat box">
</div>
</div>
<div class="col-md-3" id="projectRightCol">
<ldp-display id="projectDetail" data-fields="right-panel" set-right-panel="quotation-div, income-div, nextBill" set-quotation-div="quotation, euro" set-income-div="income, euro" value-euro="&#160€"></ldp-display>
<button id="projectDivBackButton" type="button" class="btn btn-primary">Back</button>
</div>
<!-- <button id="projectDivBackButton" type="button" class="btn btn-primary"><i class="material-icons">reply</i></button> -->
</div>
</div>
</div>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function (event) {
var projectsListElt = document.querySelector('#projectsList');
var projectsTableElt = document.querySelector('#projectsTable');
var projectDivElt = document.querySelector('#projectDiv');
var projectDetailElt = document.querySelector('#projectDetail');
var projectTitleElt = document.querySelector('#projectTitle');
var projectsListTitleElt = document.querySelector('#projectsListTitle');
projectsListElt.addEventListener('select', function (event) {
projectsTableElt.style.display = 'none';
projectsListTitleElt.style.display = 'none';
projectDivElt.style.display = 'block';
projectTitleElt.style.display ='block';
projectDetailElt.setAttribute("data-src", event.detail.resource['@id']);
projectTitleElt.setAttribute("data-src", event.detail.resource['@id']);
});
projectDivElt.addEventListener('click', function (event) {
if (event.target.id == "projectDivBackButton") {
projectDivElt.style.display = 'none';
projectTitleElt.style.display = 'none';
projectsTableElt.style.display = 'block';
projectsListTitleElt.style.display = 'block';
}
});
});
</script>
</div>
<!-- GROUPS -->
<div id="groups" style="display: none">
<h1 class="page-title">Groupes</h1>
<!-- <ldp-display data-src="http://lucky.alwaysdata.net/api/groups/" data-fields="title, membersTest" widget-membersTest="ldp-list" value-membersTest="Benoit"></ldp-display> -->
<ldp-display id="groupsList" data-src="http://lucky.alwaysdata.net/api/groups/" data-fields="title, members" widget-members="ldp-list"></ldp-display>
<!-- <ldp-display data-src="http://lucky.alwaysdata.net/api/groups/" data-fields="title, membersTest" widget-membersTest="ldp-list" value-membersTest="["Luke", "Bruno"]"></ldp-display> -->
</div>
<!-- CALENDAR -->
<div id="calendar" style="display: none">
<h1 class="page-title">Agenda</h1>
<ldp-calendar data-src="http://lucky.alwaysdata.net/api/events/" style="display: block; height: 300px; width: 500px;"></ldp-calendar>
</div>
<!-- DRIVE -->
<div id="drive" style="display: none">
<h1 class="page-title">Drive</h1>
</div>
</main>
</div>
</div>
<!--Profil Modal-->
<div id="profileDiv" style="display: none;">
<ldp-display id="profileDetail" data-fields="profil-modal" set-profil-modal="picture, profil-content" widget-picture="ldp-display-img" set-profil-content="name, languages, country"></ldp-display>
</div>
src/html/members.html 0 → 100644
+ 29
− 0
View file @ 7fc0f489
<div id="members" style="display: none">
<h1 class="page-title">Membres</h1>
<ldp-display id="profilesList" data-src="http://lucky.alwaysdata.net/api/users/" data-fields="miniature" set-miniature="picture, name" widget-picture="ldp-display-img"></ldp-display>
<!-- <ldp-display id="profilesList" data-src="https://djangoldp.happy-dev.fr/skippers/" data-fields="miniature, name" set-miniature="picture" widget-picture="ldp-display-img"
set-name="name, testmdr" value-testmdr="C'est trés amusant"></ldp-display> -->
<!-- test direct dans data-fields -->
<!-- <ldp-display id="profilesList" data-src="https://djangoldp.happy-dev.fr/skippers/" data-fields="picture, name" widget-picture="ldp-display-img"></ldp-display> -->
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function (event) {
var profilesListElt = document.querySelector('#profilesList');
var profileDivElt = document.querySelector('#profileDiv');
var profileDetailElt = document.querySelector('#profileDetail');
profilesListElt.addEventListener('select', function (event) {
profileDivElt.style.display = 'flex';
profileDetailElt.setAttribute("data-src", event.detail.resource['@id']);
});
profileDivElt.addEventListener('click', function (event) {
if (event.target.id == "profileDiv") {
profileDivElt.style.display = 'none';
}
});
});
</script>
</div>
src/html/menu.html 0 → 100644
+ 11
− 0
View file @ 7fc0f489
<div class="col-md-2 menu">
<div id="menu-title">HAPPY APP</div>
<ldp-router root="ldp-root" default-route="home">
<ldp-route name="members">Membres</ldp-route>
<ldp-route name="projects">Projets</ldp-route>
<ldp-route name="groups">Groupes</ldp-route>
<ldp-route name="calendar">Agenda</ldp-route>
<ldp-route name="drive">Drive</ldp-route>
<!-- <ldp-route name="home">Home</ldp-route> -->
</ldp-router>
</div>
src/html/projects.html 0 → 100644
+ 64
− 0
View file @ 7fc0f489
<div id="projects" style="display: none">
<h1 class="page-title" id="projectsListTitle">Projets</h1>
<div id="projectsTable">
<ol>
<li id="categorieNumber">Numéro</li>
<li id="categorieNumberAlt">N°</li>
<li id="categorieTitle">Titre</li>
<li id="categorieAssociate">Associé</li>
<li id="categorieIncome">CA</li>
<li id="categorieState">Etat</li>
</ol>
<ldp-display id="projectsList" data-src="http://lucky.alwaysdata.net/api/projects/" data-fields="number, title, associate, income-div, state" set-income-div="income, euro" value-euro="&#160€"></ldp-display>
</div>
<!-- project view -->
<ldp-display id="projectTitle" data-fields="title, space, number" value-space="&#160-&#160"></ldp-display>
<div id="projectDiv" style="display: none;">
<div class="container-fluid" id="projectContainer">
<div class="row">
<div class="col-md-9" id="projectLeftCol">
<div class="chat-box">
<img src=".\img\chat_image.PNG" alt="Chat box">
</div>
</div>
<div class="col-md-3" id="projectRightCol">
<ldp-display id="projectDetail" data-fields="right-panel" set-right-panel="quotation-div, income-div, nextBill" set-quotation-div="quotation, euro" set-income-div="income, euro" value-euro="&#160€"></ldp-display>
<button id="projectDivBackButton" type="button" class="btn btn-primary">Back</button>
</div>
<!-- <button id="projectDivBackButton" type="button" class="btn btn-primary"><i class="material-icons">reply</i></button> -->
</div>
</div>
</div>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function (event) {
var projectsListElt = document.querySelector('#projectsList');
var projectsTableElt = document.querySelector('#projectsTable');
var projectDivElt = document.querySelector('#projectDiv');
var projectDetailElt = document.querySelector('#projectDetail');
var projectTitleElt = document.querySelector('#projectTitle');
var projectsListTitleElt = document.querySelector('#projectsListTitle');
projectsListElt.addEventListener('select', function (event) {
projectsTableElt.style.display = 'none';
projectsListTitleElt.style.display = 'none';
projectDivElt.style.display = 'block';
projectTitleElt.style.display ='block';
projectDetailElt.setAttribute("data-src", event.detail.resource['@id']);
projectTitleElt.setAttribute("data-src", event.detail.resource['@id']);
});
projectDivElt.addEventListener('click', function (event) {
if (event.target.id == "projectDivBackButton") {
projectDivElt.style.display = 'none';
projectTitleElt.style.display = 'none';
projectsTableElt.style.display = 'block';
projectsListTitleElt.style.display = 'block';
}
});
});
</script>
</div>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment