Inhalt und Zweck

Die Webanwendung soll das Packen des Urlaubs- oder Reisegeäckes weniger anfälliger für vergessene Teile machen. Jeder kann sich seine Liste indivduell zusammenstellen ändern, ergänen und löschen

Collapsible Sidebar Using Bootstrap 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

HTML

	
 
<div class="grid-container">

  <div class="item1"><h3>Packliste für Reisen </h3>
  <p id ="idhidden" class ="hidden">Meldung</p>
  </div>
  <div class="item2">
	<div class= "clsel1">	
	        Wähle deine Liste! <br>
            <select id= "bsp2">
           <!--  <option value="" selected disabled hidden >Wessen Liste?</option> -->
              <option value="Lothar" selected >Lothar</option>
              <option value="Anntte">Annette</option>
              <option value="Gast">Gast</option>
            </select>
	</div>
	  <ul class = "ul1">
	     <li><input class="but" type="button"  onclick = "dress();" value="Grundausstattung"/></li>
		 <li><input class="but" type="button"  onclick = "extend();" value="zusätzlich"/></li>
		 <li><input class="but" type="button"  onclick = "todo();" value="vorher erledigen"/></li>	
		 <li/>	 
		 <li><input class="but butb" type="button"  onclick = "fcase();" value="Nur im koffer"/></li>	
		 <li/>
	     <li><input class="but" type="button"  onclick = "readtxt();" value="einlesen"/></li>
		 <li><input class="but" type="button"  onclick = "writetxt();" value="speichern"/></li>
		 <li><input class="but" type="button"  onclick = "unselect();" value="unselect"/></li>			 
	  </ul>
  </div>
  <div class="item3">
	<div id = "iddress">
		<h4>Grundausstattung </h4>
		<div style="float:left">
			<label for="t1available" style="display:block; margin-bottom:10px;">verfügbar</label>
			<select id="t1available" size="12" style="width:180px; line-height:1.8em;" multiple>
				<option>Hose lang</option><option>Hose kurz</option><option> Oberhemd lang</option>
				<option>  T-Shirt</option> <option> Unterhosen</option> <option> Socken</option><option> Jacke</option>	
				<option> Pullover/Strickjacke</option>	<option> Badehose</option>	 <option> Schlafanzug</option> <option> Regenjacke</option>
				<option> Oberhemd kurz</option><option> Schuhe </option>
			</select>
		</div>
		<div style="float:left;padding:0 10px 0 10px">
			<br />
			<input class="pbut" id="t1add"  type="button" value=">" /><br />
			<input class="pbut" id="t1addAll"  type="button" value=">>" /><br />
			<input class="pbut" id="t1removeAll"  type="button" value="<<" /><br />
			<input class="pbut" id="t1remove"  type="button" value="<" /><br />
			<input class="pbut" id="t1more"  onClick = "more()" type="button" value="+" /><br />	
			<input class="pbut" id="t1delete"   onClick = "idelete()" type="button" value="-" /><br />		
		</div>
		<div style="float:left">
		<label for="t1published" style="display:block; margin-bottom:10px;">gepackt</label>
		<select id="t1published" size="12" style="width:180px; line-height:2em;" multiple>
			<option> Oberhemd kurz</option>
		</select>
		</div>
	</div>  
	<div id = "idextend">
	  	<h4>zusätzlich </h4>
		<div style="float:left">
			<label for="t1available2" style="display:block">Verfügbar</label>
			<select id="t1available2" size="12" style="width:180px" multiple>
				<option> Reiseunterlagen</option> <option> Bargeld / Scheckkarte </option> 
				<option> Sandalen</option>  <option> Handtuch</option> <option> Regenschirm</option>
				<option> Hygene-Artikel</option> <option> Sonnen/Ersatzbrille</option>	<option> Schlüssel</option>
				<option> Batterien</option><option> Ausweis/Pass</option><option>Ladekabel</option><option>Kopfhörer</option>
			</select>
		</div>
		<div style="float:left;padding:0 10px 0 10px">
			<br />
			<input class="pbut" id="t1add2"  type="button" value=">" /><br />
			<input class="pbut" id="t1addAll2"  type="button" value=">>" /><br />
			<input class="pbut" id="t1removeAll2"  type="button" value="<<" /><br />
			<input class="pbut" id="t1remove2"  type="button" value="<" /><br />
			<input class="pbut" id="t1more2"   onClick = "more()" type="button" value="+" /><br />	
			<input class="pbut" id="t1delete2"  onClick = "idelete()"  type="button" value="-" /><br />				
		</div>
		<div style="float:left">
		<label for="t1published2" style="display:block">gepackt</label>
		<select id="t1published2" size="12" style=";width:180px" multiple>
		</select>
		</div>				
	</div> 
	<div id = "idtodo">
		<h4>vorher erledigen </h4>
		<div style="float:left">
			<label for="t1available3" style="display:block">Verfügbar</label>
			<select id="t1available3" size="6" style="width:180px" multiple>
				<option> Blumen gießen</option> <option> Zeitung abbestellen </option> <option> Hütte verschließen </option>
				<option> Mülltonen Auftrag</option> 
			</select>
		</div>
		<div style="float:left;padding:0 10px 0 10px">
			<br />
			<input class="pbut" id="t1add3"  type="button" value=">" /><br />
			<input class="pbut" id="t1addAll3"  type="button" value=">>" /><br />
			<input class="pbut" id="t1removeAll3"  type="button" value="<<" /><br />
			<input class="pbut" id="t1remove3"  type="button" value="<" /><br />
			<input class="pbut" id="t1more3"   onClick = "more()"  type="button" value="+" /><br />	
			<input class="pbut" id="t1delete3"  onClick = "idelete()"  type="button" value="-" /><br />				
		</div>
		<div style="float:left">
		<label for="t1published3" style="display:block">gepackt</label>
		<select id="t1published3" size="6" style=";width:180px" multiple>
		</select>
		</div>				
  </div>  
	   <div id ="itemadd"> 
	   <input class="inp" id="clin" style="width:180px" type="text" placeholder = "Teil hinzufügen" >
	   <input class="pbut" id="clinok" style="width:100px" type="button" value="ok">
	   </div> 
  <div class="item4">
 	  <div id = "idcase">
			<h4> Bei Flug nur im Koffer transportieren </h4>
	  <ul>
		 <li> Taschenmesser </li>
		 <li> Korkenzieher</li>
		 <li> Nagelschere usw.</li>	 
	     <li> Plastikbeutel 1L.</li>	
		 <li> Flüssigkeit > 100ml</li>
	  </ul>
	  </div>  
  </div>
  <div class="item16"> Stand 15.09.24  Versiom 1.0  build 20240915   <a href="info.html" >info</a> </div>
</div>	
 

JS Script

<script>

var selectElement = document.getElementById('bsp2');
var vuser = selectElement.value;
	
$(document).ready(function(){
  $('#iddress').show();  
  $('#idextend').hide(); 
  $('#idtodo').hide();
  $('#idcase').hide();
 
   removeOptions();
   readtxt();
});

function fcase(){
 $('#idcase').toggle();
}

function removeOptions(){
  removeAllOptions(document.getElementById("t1available"));
  removeAllOptions(document.getElementById("t1published")); 

  removeAllOptions(document.getElementById("t1available2"));
  removeAllOptions(document.getElementById("t1published2")); 

  removeAllOptions(document.getElementById("t1available3"));
  removeAllOptions(document.getElementById("t1published3"));  
}

$('#bsp2').change(function() {
    vuser = $("#bsp2 option:selected").text();
    //alert(vuser);
	readtxt();
});

function f_close(){
  $('#iddress').hide();  
  $('#idextend').hide(); 
  $('#idtodo').hide();      
}

function dress(){
  f_close();
  $('#iddress').show();  

} 
function extend(){
  f_close();  
  $('#idextend').show();
} 

function todo(){
  f_close();  
  $('#idtodo').show();
} 
function unselect(){
//$('#t1available option:selected').removeAttr('selected');
$('#t1available').prop('selectedIndex',-1);
$('#t1published').prop('selectedIndex',-1);
$('#t1available2').prop('selectedIndex',-1);
$('#t1published2').prop('selectedIndex',-1);
$('#t1available3').prop('selectedIndex',-1);
$('#t1published3').prop('selectedIndex',-1);
}

// https://website-domain-email.de/guide/jquery-select-auslesen-und-manipulieren/index.html

function moveSelectedItems(source, destination){
	var selected = $(source+' option:selected').remove();
	var sorted = $.makeArray($(destination+' option').add(selected)).sort(function(a,b){
		return $(a).text() > $(b).text() ? 1:-1;
	});
	$(destination).empty().append(sorted);
}
	
$('#t1add').click(function(){
	moveSelectedItems('#t1available', '#t1published');
});

$('#t1addAll').click(function(){
   //$('#t1available option').attr('selected', 'true');

  //$('#t1available').prop('selectedIndex',1);  //nur einer wird selektiert  -1 alle werden unselect	
  $('#t1available option').prop('selected', true); //alle werden gesetzt

	moveSelectedItems('#t1available', '#t1published');
});

$('#t1removeAll').click(function(){
	$('#t1published option').prop('selected', 'true'); 
	moveSelectedItems('#t1published', '#t1available');
});

$('#t1remove').click(function(){
	moveSelectedItems('#t1published', '#t1available');
});

//--------------------------------------------------------
$('#t1add2').click(function(){
	moveSelectedItems('#t1available2', '#t1published2');
});

$('#t1remove2').click(function(){
	moveSelectedItems('#t1published2', '#t1available2');
});

$('#t1addAll2').click(function(){
	$('#t1available2 option').attr('selected', 'true');
	moveSelectedItems('#t1available2', '#t1published2');
});

$('#t1removeAll2').click(function(){
	$('#t1published2 option').attr('selected', 'true');
	moveSelectedItems('#t1published2', '#t1available2');
});   
//--------------------------------------------------------
$('#t1add3').click(function(){
	moveSelectedItems('#t1available3', '#t1published3');
});

$('#t1remove3').click(function(){
	moveSelectedItems('#t1published3', '#t1available3');
});

$('#t1addAll3').click(function(){
	$('#t1available3 option').attr('selected', 'true');
	moveSelectedItems('#t1available3', '#t1published3');
});

$('#t1removeAll3').click(function(){
	$('#t1published3 option').attr('selected', 'true');
	moveSelectedItems('#t1published3', '#t1available3');
}); 
/*
$('#t1more').click(function(){
	$('#itemadd').show();
}); 
*/
function more(){$('#itemadd').show();}

$('#clinok').click(function(){
    var newp = $('#clin').val();
    if (newp != ""){
	    if($('#iddress').is(":visible")){x = document.getElementById("t1available");}
		else if($('#idextend').is(":visible")){x = document.getElementById("t1available2");}
		else {x = document.getElementById("t1available3");}
		var option = document.createElement("option");
		option.text = newp;
		x.add(option);
	}			
	$('#itemadd').hide();
}); 
/*
$('#t1delete').click(function(){
	var selected = $('#t1available option:selected').remove();
}); 
*/
function idelete(){
	    if($('#iddress').is(":visible")){$('#t1available option:selected').remove();}
		else if($('#idextend').is(":visible")){$('#t1available2 option:selected').remove();}
		else {$('#t1available3 option:selected').remove();}
}
	
function writetxt(){	
    var x = document.getElementById("t1available");
    var txt = "";
    var i;
	var mindex = "";
	var lvar =  "";
    for (i = 0; i < x.length; i++) {
		lvar = x.options[i].value;
		mindex = vuser + lvar;
        txt = txt + "'" + lvar + "', '" + vuser + "', 'frei', 'eins', '" +  mindex  + "'|";
    }
	x = document.getElementById("t1published");
	for (i = 0; i < x.length; i++) {
		lvar = x.options[i].value;
		mindex = vuser + lvar;
        txt = txt + "'" + lvar +  "', '"  + vuser + "', 'sel', 'eins','" +  mindex  + "'|";
    }
	x = document.getElementById("t1available2");
	for (i = 0; i < x.length; i++) {
    	lvar = x.options[i].value;
		mindex = vuser + lvar;
        txt = txt + "'" + lvar + "', '" + vuser + "', 'frei', 'zwei','" +  mindex  + "'|";
    }
	x = document.getElementById("t1published2");
	for (i = 0; i < x.length; i++) {
    	lvar = x.options[i].value;
		mindex = vuser + lvar;
        txt = txt + "'" + lvar +  "', '" + vuser + "', 'sel', 'zwei','" +  mindex  + "'|";
    }	
	x = document.getElementById("t1available3");
	for (i = 0; i < x.length; i++) {
    	lvar = x.options[i].value;
		mindex = vuser + lvar;
        txt = txt + "'" + lvar +  "', '" + vuser + "', 'frei', 'drei','" +  mindex  + "'|";
    }
	x = document.getElementById("t1published3");
	for (i = 0; i < x.length; i++) {
    	lvar = x.options[i].value;
		mindex = vuser + lvar;
        txt = txt + "'" + lvar +  "', '" + vuser + "', 'sel', 'drei','" +  mindex  + "'|";
    }	
	//alert(txt);
	//return; 
	//alert("BP1");             
	$.post("packl.php",
	{ aktion: "savetxt", 
	  user  : vuser,
	  para1 : txt,  

	},function(data,status){
		var result = data;
		$("#idhidden").show(500).html(result).delay( 2500 ).hide(1000); 
		//alert(result);
	});	        
}

function removeAllOptions(selectbox) {
  for (var i = selectbox.options.length - 1; i >= 0; i--) {
    selectbox.remove(i);
  }
}

function readtxt(){	
	 var mel = "holla";
	 var ltxt = "--";
	 var x = document.getElementById("t1available");
	//alert(txt);
	//return; 
	//alert("BP2");             
	$.post("packl.php",
	{ aktion: "readtxt", 
	  user  : vuser,
	},function(data,status){
		var result = data;
		removeOptions();
        //removeAllOptions(document.getElementById("t1available"));
		//alert(result);
	   const rdata = result.split("|");	
	   for(let i = 0; i < rdata.length; i++){
	        var larray = rdata[i].split("#"); 
			//alert(larry[0]);
			ltxt = ltxt + larray[0];
			if (larray[2] == "eins"){
				if(larray[1] == "sel"){x = document.getElementById("t1published");}else
				x = document.getElementById("t1available");
				var option = document.createElement("option");
				option.text = larray[0];
				x.add(option);
			}
			if (larray[2] == "zwei"){
				if(larray[1] == "sel"){x = document.getElementById("t1published2");}else
				x = document.getElementById("t1available2");
				var option = document.createElement("option");
				option.text = larray[0];
				x.add(option);
			}	
			if (larray[2] == "drei"){
				if(larray[1] == "sel"){x = document.getElementById("t1published3");}else
				x = document.getElementById("t1available3");
				var option = document.createElement("option");
				option.text = larray[0];
				x.add(option);
			}				
	   }
	   //alert(rdata[2]);
       $("#idhidden").show(500).html("Daten gelesen").delay( 2500 ).hide(1000); 		
	});	        
 }
 </script>
	
	

CSS

	
<style>
body{ background-color:gray;}

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  gap: 2px; 
  background-color:#c0c052;
  padding: 0px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255);
  padding: 3px 0;
}
.item1 {
  grid-column: 1 / span 7;
  text-align: center;

  background-color:#A9F5A9 ;  
  padding: -10px ;
}
.item2 {
  grid-column: 1 / span 7;
  grid-row: 2 / span 3;
  text-align: left;
}
.item3 {
  grid-column: 1 / span 7;
  min-height:15vw;
  text-align: left;
}
.item4 {
  grid-column: 1 / span 7;
  min-height:15vw;
}
.item16 {
  font-size: 12px;
  grid-column:1 / span 7;
  height:18px;
  background-color:yellow;
  text-align: right;
}

@media only screen and (min-width: 992px) {
	.grid-container {
	  width:60%;
	  margin:auto;
	}
	.item2 {
	  grid-column: 1 / span 1;
	  grid-row: 2 / span 3;
	}
	.item3 {
	  grid-column: 2 / span 6;
	}
	.item4 {
	  grid-column: 2 / span 6;
	}
} 
@media only screen and (max-width: 600px) {

} 

h3{margin-top:2px;
  font-size: 25px; 
  margin-bottom: -5px;  
}
h4{margin-top:-5px; text-align:center;
  color:green; margin-top:5px; 
}
.hidden{display: none;}

.but{ border-radius:6px; 
 width:140px;
  border:6px solid;
  border-style: outset;
  border-color:#58ACFA;
}
.butb{border-color:#82FA58;}

.but:hover{border-style: inset;}

.pbut{width:40px; margin-top:5px;}

#itemadd{display: none;}

#idhidden {background-color:red; color:black; height:34px;}

.clgreen{background-color:green; color:white;}

.ul1 > li{margin-bottom: 5px; list-style: none }

.clsel1{margin-left:4vw;}

#iddress{padding-left:5px;}

</style>