Skip to content

Instantly share code, notes, and snippets.

@eladonline

eladonline/boarding-sign.markdown

Created August 7, 2017 17:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save eladonline/822e8465f0630170767283c24c798720 to your computer and use it in GitHub Desktop.
Save eladonline/822e8465f0630170767283c24c798720 to your computer and use it in GitHub Desktop.
Download ZIP
boarding sign
Raw
index.html
<body>
<span id="progressSpan">
<div class="progress">
<span id="prgrsBarTab1" onclick="progressBar.progressClick(page1)" class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">part one</span>
</div>
<!-- <span style="font:20px/25px aharoni;margin-left:1em;">name:</span>
<span style="font:20px/25px aharoni;margin-left:1em;">id: </span>
<span style="font:20px/25px aharoni;margin-left:1em;">date:</span>
<span style="font:20px/25px aharoni;margin-left:1em;">shift:</span> -->
</span>
<div class="wrap">
<div id="one"><p>ONE</p></div>
<div id="two"><p>TWO</p></div>
<div id="three"><p>THREE</p></div>
<div id="four"><p>FOUR</p></div>
<div id="five"><p>FIVE</p></div>
</div>
</body>
Raw
script.babel
const storage = localStorage
// הוספת דף יש להוסיף טמפלט לאובייקט
const templates = {
page1:{
api:[],
plainList : {
747:["ELA","ELB","ELC","ELD","ELE","ELH"],
777:["ECA","ECB","ECC","ECD","ECE","ECF"],
767:["EAJ","EAK","EAL","EAM","EAP","EAR"],
737:["EKA","EKB","EKC","EKD","EKE","EKF","EKH","EKI","EKJ","EKL","EKM","EKO","EKP","EKR","EKS","EKT","EKU","EHA","EHB","EHC","EHD","EHE","EHF"],
cargo:["ELF"]
},
PlaineNumClick:function(boeingNumber){
this.api[0] ={boeing:boeingNumber}
const $pageList = $("#page1List")
var div = (`<div class="list-header"> boeing:${boeingNumber} </div><br/>`)
var li = this.plainList[boeingNumber].map((Symbol)=>{
return (
`<li>
<button id=${Symbol} class="btn btn-default btn-boeing" style="float:left;" onClick="templates.page1.pushSymbolNum(this)" > ${Symbol} </button>
</li>`
)
})
var ul = `<ul class="list-ul"> ${li.join("")} </ul>`
$pageList.html( div + ul )
},
pushSymbolNum:function(event){
const $lisrHeader = $(".list-header")
this.api[1] ={symbol:event.id}
$lisrHeader.html(`boeing:<span style="color:#ffff33;">${this.api[0].boeing}</span>
symbol:<span style="color:#ffff33;">${this.api[1].symbol}</span>
<button class="btn btn-success" style="margin-left:1em;" onClick="templates.page1.storAndNext()">next</button>`)
},
storAndNext:function(){
storage.setItem("boeing",JSON.stringify(this.api))
page2.render(templates.page2.render())
templates.nextPage("page2")
if($("#prgrsBarTab2").attr("aria-valuenow") !== "25"){
progressBar.progressUpdating(2,"page2","25","part two")
}
},
render:function() {
return (
`<div class="page1-topContainer">
<h1>plane type</h1>
<button id="747" class="btn btn-primary btn-boeing" onClick="templates.page1.PlaineNumClick(747)" >747 </button>
<button id="777" class="btn btn-primary btn-boeing" onClick="templates.page1.PlaineNumClick(777)" >777 </button>
<button id="767" class="btn btn-primary btn-boeing" onClick="templates.page1.PlaineNumClick(767)" >767 </button>
<button id="737" class="btn btn-primary btn-boeing" onClick="templates.page1.PlaineNumClick(737)" >737 </button>
<button id="cargo" class="btn btn-primary btn-boeing" onClick="templates.page1.PlaineNumClick(cargo.id)" >cargo </button>
</div>
<div id="page1List"></div>
`
)}
},
page2:{
render:function(){
return `page2`
}
},
page3:function(){
return (
`page3`
)
},
page4:function(){
return (
`page4`
)
},
//מכאן
page5:function(){
return (
`page5`
)
},
// עד כאן
nextPage:function(page){
//בהוספת דף יש להוסיף אובייקט לטבלה
const pageBodys =[page1.$pageBody,page2.$pageBody,page3.$pageBody,page4.$pageBody/*מכאן*/,page5.$pageBody/*עד כאן*/]
function pageingAnimate(incomePage,outPage){
if(incomePage!==outPage){
$(pageBodys[incomePage]).fadeIn(900)
$(pageBodys[outPage]).animate({left:"50%",top:"-100%",width:"10%",opacity:"0.4"},900)
$(pageBodys[outPage]).fadeOut(10)
$(pageBodys[outPage]).animate({left:"0%",top:"56px",width:"100%",opacity:"1"},0)
}else{
alert("your on the same page")
}
}
function passOver(number){
var pageVisible
for(var i = 0 ; i < pageBodys.length ; i++ ){
if(pageBodys[i].css("display") === "block"){
pageVisible = i
}
}
pageingAnimate(number,pageVisible)
}
//בהוספת דף יש ליצור "קייס" נוסף עם מספר עוקב
switch(page){
case "page1":
passOver(0)
break;
case "page2":
passOver(1)
break;
case "page3":
passOver(2)
break;
case "page4":
passOver(3)
break;
case "page5":
passOver(4)
break;
default: throw "there is no such page"
}
}
}
const progressBar = {
$cachePrgrs: $(".progress"),
progressUpdating:function(id,pageNum,prgrsVal,head){
this.$cachePrgrs.append(`<span id="prgrsBarTab${id}" onclick="progressBar.progressClick(${pageNum})" class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" aria-valuenow=${prgrsVal} aria-valuemin="0" aria-valuemax="100"> ${head} </span>`)
},
progressClick:function(page){
templates.nextPage(page.name)
}
}
function pageMaker(divId,name) {
this.name = name
this.$pageBody = $("body").find(divId),
this.render = function(update){
//this.$pageBody.css("display","block")
this.$pageBody.html(update)
}
}
//בהוספת דף יש להוסיף אובייקט נוסף עם מספר עוקב
const page1 = new pageMaker("div#one","page1")
const page2 = new pageMaker("div#two","page2")
const page3 = new pageMaker("div#three","page3")
const page4 = new pageMaker("div#four","page4")
const page5 = new pageMaker("div#five","page5")
//templates.nextPage("page2")
/*progressBar.progressUpdating(2,"page2","25","part two")
progressBar.progressUpdating(3,"page3","50","part three")
progressBar.progressUpdating(4,"page4","75","part four")
progressBar.progressUpdating(5,"page5","100","part five")*/
const initiation = {
loginTextArr:["fullName","id","day-shift"],
credentials:[],
loginPage:function(){
return (
` <form id="initPage">${this.loginTextArr.map((a)=>{
return (`<span class="loginspan">
<input id=${a} placeHolder="${a}" class="loginInput" onchange="initiation.FormChk()" }></input>
</span><br/> `)
}).join("")}</form>`
)
},
render:function(template){
var div = page1.$pageBody
div.html(template)
},
FormChk:function(){
var filled = 0
for(let i = 0 ; i < this.loginTextArr.length;i++){
if($(`#${this.loginTextArr[i]}`).val().length > 2){
this.credentials[i] = $(`#${this.loginTextArr[i]}`).val()
filled++
}else{
$(`#${this.loginTextArr[i]}`).val("")
}
}
if(filled === this.loginTextArr.length ){
let button = `<button id="initNext" class="btn btn-success progress-bar-striped init-btn" onClick="initiation.nextPage()">next</button>`
if(!page1.$pageBody.find("button#initNext").text()){
console.log(page1.$pageBody.find("button#initNext"))
page1.$pageBody.append(button)}
}
},
deRender:function(){
$("#initPage").css("display","none")
page1.render(templates.page1.render())
},
nextPage:function(){
let d = new Date();
this.credentials.push(d.toLocaleString())
storage.setItem("credentials",JSON.stringify(this.credentials))
this.deRender()
let credentials = this.loginTextArr.map((a,i)=>{
return (`<span style="font:20px/25px aharoni;margin-left:1em;">${a}: <span style="color:#db4dff;">${this.credentials[i]}</span></span>`)
}).join("")
$("#progressSpan").append(credentials+ `<span style="font:20px/25px aharoni;margin-left:1em;">Date: <span style="color:#db4dff;">${d.toLocaleString()}</span></span>` )
}
}
//page1.render(templates.page1.render())
initiation.render(initiation.loginPage())
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Raw
style.scss
$pageWdth:100%;
$pageHght:100vh;
// ,"six":#ffff4d הרקעים של הדפים להוספת דף יש להוסיף כאן פסיק, מספר עוקב במרכאות, וצבע, דוגמא
$pagesBackground:("one":#ff134d,"two":#ffff4d,"three":#5cd65c,"four":#3385ff,"five":#00b3b3);
// כאן יש להוסיף מספר עוקב
$classesNames: (one,two,three,four,five);
// זה הבר של שורת ההתקדמות הירוקה מידה ומוסיפים דף יש לחלק 100 במספר הדפים ולשנות את האחוזים
// example(100% / 5 = 25%)
$prgrsBarWdth:25%;
@function clr($num) {
@return map-get($pagesBackground,$num);
}
.loginInput {
margin:1em;
border-radius:5px;
text-shadow:1px 2px 5px #333333;
}
.init-btn{
margin:10%;
width:20%;
height:10%;
font:35px/40px aharoni;
}
%pagesProperties {
width:$pageWdth;
height:$pageHght;
position:fixed;
display:inline-block;
margin:0px;
padding-top:5%;
padding-left:3%;
left:0px;
}
@each $i in $classesNames {
##{$i} {
background:clr(#{$i});
@extend %pagesProperties;
}
}
.progress-bar {
width: $prgrsBarWdth;
height:55px;
font: 1.5em/3em "Comic Sans MS", "Arial Black", Gadget, sans-serif;
color:snow;
cursor:pointer;
&:hover {
border-left:1px solid grey;
border-right:1px solid grey;
font:1.8em/2em "Comic Sans MS", cursive, sans-serif;
}
}
#progressSpan {
top:0px;
left:0px;
position:relative;
width:100%;
height:80px;
z-index:1;
margin:0px;
text-align:center;
background:silver;
}
.wrap {
text-align:center;
font: 17px/17px "Comic Sans MS", cursive, sans-serif
}
#two,#three,#four,#five{
display:none;
}
body {
background:silver;
}
h1 {
font-family:"Arial Black", Gadget, sans-serif;
color:#33333;
}
//here is top backgrounds
$top-Div-Background:("page1-topContainer":"https://qph.ec.quoracdn.net/main-qimg-7d2b4053502b61d9398fcfbd525162f1-c");
// here is all pages class names
$pagesDivTopContainers:(page1-topContainer,page2-topContainer,page3-topContainer,page4-topContainer,page5-topContainer);
@function clr($num) {
@return map-get($top-Div-Background,$num);
}
@each $i in $pagesDivTopContainers {
.#{$i}{
background-image:url(clr($i));
background-repeat:no-repeat;
background-size:100% 100%;
width:93vw;
height:30vh;
}
}
.btn-boeing {
margin:0.8em;
width:4em;
height:1.5em;
&.btn {
font:25px/20px monospace;
font-weight:bold;
cursor:pointer;
}
}
#page1List {
margin:0px;
width:93vw;
//background:green;
}
.list-header {
background:#333333;
position:relative;
width:100%;
height:50px;
font:40px/47px monospace;
font-weight:bold;
color:snow;
}
.list-ul {
list-style:none;
li {
display:inline;
}
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment