Skip to content

Commit

Permalink
Panel now are created using Render engine.
Browse files Browse the repository at this point in the history
  • Loading branch information
@rrfaria
rrfaria committed Apr 17, 2017
1 parent fd07c51 commit 5eec75b
Show file tree
Hide file tree
Showing 4 changed files with 34 additions and 102 deletions.
65 changes: 1 addition & 64 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,70 +18,7 @@
</head>
<body>
<div id="app">
<div id="block-root" class="root">
<div class="block-container">
<div class="mainPanel">
<div class="headerPanel">
<i class="pe-7f-keypad"></i>
<h2 class="title">Projeto Crud - localStorage</h2>
<div class="help active">
<i class="pe-7f-help1"></i>
<div class="description">
Desenvolvido com: ES6, WEBPACK, MOCHA, CHAI,local Storage,cloudinary,
</div>
</div>
</div>
<div class="shape">
<a href="#" class="overlay hexagon"></a>
<div class="details">
<a href="#" class="button">FOTO</a>
</div>
<div class="bg"></div>
<div class="base">
<img src="assets/images/shape-one.jpg" alt="">
</div>
<input type="file" class="photo upload-button" name="uplImage" id="uplImage">
</div>
<div class="Inputer">
<input type="text" name="txtFullname" id="txtFullname" class="form-control input" required="">
<label for="txtFullname" class="floating-label">Nome</label>
</div>
<div class="Inputer">
<input type="text" name="txtCpf" id="txtCpf" class="form-control input" required="">
<label for="txtCpf" class="floating-label">CPF</label>
</div>
<div class="Inputer">
<input type="text" name="txtTelephone" id="txtTelefone" class="form-control input" required="">
<label for="txtTelefone" class="floating-label">Telefone</label>
</div>
<div class="Inputer">
<input type="text" name="txtAddress" id="txtAddress" class="form-control input" required="" placeholder="">
<label for="txtAddress" class="floating-label">Endereço</label>
<span class="pe-7f-map-marker"></span>
</div>
<div class="Inputer">
<input type="text" name="txtComplement" id="txtComplement" class="form-control input" required="">
<label for="txtComplement" class="floating-label">Complemento</label>
<span class="pe-7f-map-marker"></span>
</div>
<button class="btnSave">Salvar</button>
</div>
</div>
<div class="block-container">
<div class="mainPanel">
<div class="headerPanel"><i class="pe-7f-user"></i>
<h2 class="title">Lista de Contatos</h2>
</div>
<table>
<tbody id="tablerows">

</tbody>
</table>
</div>
</div>


</div>
<div id="block-root" class="root"></div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCuAze_O--fV3foc3AkXj2VTNKNGIHYe2A&libraries=places"></script>
</body>
Expand Down
65 changes: 30 additions & 35 deletions src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,34 @@ import FEgine from './utils/fariaEngine';
import blockContainer from'./utils/blockContainer';
import imputer from './utils/imputer';


const Fgine = new FEgine();

/** @jsx FEgine.h */

const $root = document.getElementById('block-root');
const panelOne = (
{ type: 'div',props: { 'class': 'bodyPanel' }, children: [
imputer.mount("upload","uplImage","uplImage","","FOTO"),
imputer.mount("text","txtFullname","txtFullname","form-control input","Nome","","",true),
imputer.mount("text","txtCpf","txtCpf","form-control input","CPF","","",true),
imputer.mount("text","txtTelephone","txtTelefone","form-control input","Telefone","","",true),
imputer.mount("text","txtAddress","txtAddress","form-control input","Endereço","","pe-7f-map-marker",true),
imputer.mount("text","txtComplement","txtComplement","form-control input","Complemento","","pe-7f-map-marker",true),
<button className="btnSave">Salvar</button>
] }
);

const panelTwo=(<table>
<tbody id="tablerows">
</tbody>
</table>);

blockContainer.render($root,panelOne,"pe-7f-keypad","Projeto Crud - localStorage","active","pe-7f-help1","Desenvolvido com: ES6, WEBPACK, MOCHA, CHAI,local Storage,cloudinary");
blockContainer.render($root,panelTwo,"pe-7f-user","Lista de Contatos","","","");


//element Handle
let imgContainer = document.querySelector('#app .root .block-container .mainPanel .shape');
let inputImg = document.querySelector('#app .root .block-container .mainPanel .shape .photo');
let img = document.querySelector('#app .root .block-container .mainPanel .shape .base img');
Expand All @@ -31,7 +59,7 @@ const autocomplete = new google.maps.places.Autocomplete((address), {
let storage = new lsManager();


//EVENTS
//EVENTS HANDLE
//TODO - Optimize event function

//Key UP
Expand Down Expand Up @@ -108,37 +136,4 @@ btnSave.addEventListener('click', ()=>{
}

}
});


// const where = $.id('animal');
// const content = "teste";
// const icon ="pe-7f-keypad";
// const t = "title";
// const panel = new blockContainer();
// panel.render(where,content,icon,t);

const $root = document.getElementById('block-root');
const Fgine = new FEgine();

/** @jsx FEgine.h */
const child = (
<div>tets</div>
);
const a = (
<div className="block-container">
<div className="mainPanel">
<div className="headerPanel"><i className="pe-7f-user"></i>
<h2 className="title">Lista de Contatos</h2>
</div>
{child}
</div>
</div>
);



FEgine.render($root,a);



});
2 changes: 1 addition & 1 deletion src/utils/blockContainer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ export default class blockContainer{
constructor(){

}
render(where, content,icon,title,helpActive="",helpIcon="",helpDescription=""){
static render(where, content,icon,title,helpActive="",helpIcon="",helpDescription=""){
const Fgine = new FEgine();

const mount = (
Expand Down
4 changes: 2 additions & 2 deletions src/utils/imputer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,14 @@ export default class imputer {

}

static mount(iType,iName, iID, iClass,iTtitle,iImage="assets/images/shape-one.jpg",iIcon, iReq=false){
static mount(iType,iName, iID, iClass="",iTtitle,iImage="assets/images/shape-one.jpg",iIcon="", iReq=false,placeholder=""){
let required = (iReq)?"required":"";
let mount;
switch (iType){
case 'text':
return (
<div className="Inputer">
<input type="text" name={iName} id={iID} className={iClass} required={required}/>
<input type="text" name={iName} id={iID} className={iClass} required={required} placeholder={placeholder}/>
<label for={iName} className="floating-label">{iTtitle}</label>
<span className={iIcon}></span>
</div>
Expand Down

0 comments on commit 5eec75b

Please sign in to comment.