Skip to content

Instantly share code, notes, and snippets.

@jtuttas

jtuttas/ausbilder.html

Last active October 30, 2018 08:22
Show Gist options
  • Save jtuttas/0fb10e95b5048101bb1b4415e6178eab to your computer and use it in GitHub Desktop.
Save jtuttas/0fb10e95b5048101bb1b4415e6178eab to your computer and use it in GitHub Desktop.
Download ZIP
Ausbildersprechtag Buchungssystem. Also der Teilnehmer ruft die Webseite ausbilder.html auf, via Java Script wird sich dann mit der Google Tabelle verbunden, die in Zeile 137 adressiert wird. Dort (also in der Google Tabelle) läuft das Script code.gs)
Raw
ausbilder.html
<!DOCTYPE html>
<html>
<head>
<title>Ausbildersprechtag</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15"/>
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="stylesheet" href="js/libs/jquery-mobile/jquery.mobile.min.css" />
<script src="js/libs/jquery/jquery.min.js"></script>
<script src="js/libs/jquery-mobile/jquery.mobile.min.js"></script>
<style type="text/css">
#loginMsg {color:red;}
</style>
</head>
<body>
<div data-role="page" id="loginPage" data-theme="b">
<div data-role="header" data-position="fixed" >
<h3>Ausbildersprechtag Buchungssystem</h3>
</div>
<div data-role="content" >
<p id="loginMsg"></p>
<label for="basic">Benutzername (EMail):</label>
<input type="text" name="name" id="benutzer" value="" />
<label for="basic">Kennwort:</label>
<input type="password" name="name" id="kennwort" value="" />
</div>
<div data-role="footer" data-position="fixed" data-id="persFooter">
<div data-role="navbar" >
<ul >
<li><a href="#" data-icon="check" id="btnLogin" data-transition="fade">Login</a></li>
</ul>
</div>
</div>
<div data-role="popup" id="loginPopup">
<p id="loginPopupMsg">Login as <p>
</div>
</div>
<div data-role="page" id="aboutPage" data-add-back-btn="false" data-theme="b" >
<div data-role="header" data-position="fixed" >
<h1>About</h1>
</div>
<div data-role="content">
<div class="ui-body ui-body-d ui-corner-all">
<img src="joerg.png" alt="joerg">
<h2>Ausbildersprechtag</h2>
<h3>Buchungssystem</h3>
<h5>V3.0</h5>
(c) 2015 by <a href="mailto:[email protected]">Dr. J�rg Tuttas</a>
</div>
</div>
<div data-role="footer" data-position="fixed" data-id="persFooter">
<div data-role="navbar">
<ul>
<li><a href="#" id="btnBackMainInfo" data-icon="home" data-transition="fade">Home</a></li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="mainPage" data-theme="b">
<div data-role="header" data-position="fixed" >
<h1>Lehrer Liste</h1>
<a href="#" data-icon="refresh" id="btnRefresh">Refresh</a>
<a href="#" data-icon="console.log" id="btnLogout">Logout</a>
</div>
<div data-role="content" >
<ul data-role="listview" id="output" >
</ul>
</div>
<div data-role="footer" data-position="fixed" data-id="persFooter" >
<div data-role="navbar" >
<ul >
<li><a href="#" data-icon="info" id="btnInfo" data-transition="fade">Info</a></li>
<li><a href="#" data-icon="gear" id="btnBuchungen" data-transition="fade">Meine Buchungen</a></li>
</ul>
</div>
</div>
<div data-role="popup" id="mainPopup">
<p id="mainPopupMsg">Login as <p>
</div>
</div>
<div data-role="page" id="buchungPage" data-theme="b">
<div data-role="header" data-position="fixed" >
<h1>Buchungen</h1>
</div>
<div data-role="content" >
<ul data-role="listview" id="buchungsliste" >
</ul>
</div>
<div data-role="footer" data-position="fixed" data-id="persFooter">
<div data-role="navbar" >
<ul >
<li><a href="#" data-icon="arrow-l" id="btnBackMainBuchung" data-transition="fade">Zur�ck</a></li>
<li><a href="#" data-icon="star" id="btnMailto">Senden</a></li>
</ul>
</div>
</div>
<div data-role="popup" id="buchungenPopup">
<p id="buchungenPopupMsg">L�sche Buchung <p>
</div>
</div>
<div data-role="page" id="lehrerPage" data-theme="b">
<div data-role="header" data-position="fixed" >
<h1 id="lehrername">Tuttas</h1>
<a href="#" id="btnBuchen" data-icon="check" data-transition="fade">ok</a>
<a href="#" id="btnCancelBuchen" data-icon="delete" data-transition="fade">cancel</a>
</div>
<div data-role="content" id="contentZeiten">
<div data-role="fieldcontain" id="zeiten">
</div>
</div>
<div data-role="footer" data-position="fixed" data-id="persFooter" >
</div>
<div data-role="popup" id="lehrerPopup">
<p id="lehrerPopupMsg">L�sche Buchung <p>
</div>
</div>
</body>
<script type="text/javascript">
// Adresse des Google Scripts
var docScript = 'https://script.google.com/macros/s/<geheim>/exec';
var teachers;
var selected_index;
var user = new Object();
var zeiten;
/**
* Event Handler der Schaltfl�chen
*/
$("#btnLogout").click(function () {
localStorage.benutzer = "";
localStorage.kennwort = "";
$.mobile.changePage("#loginPage", {transition: "fade"});
});
$("#btnLogin").click(function () {
user.benutzer = $("#benutzer").val();
user.kennwort = $("#kennwort").val();
login();
});
$("#btnRefresh").click(function () {
$("#mainPopupMsg").text("Refreshing... please wait!");
$( "#mainPopup" ).popup( "open" );
refresh();
});
$("#btnInfo").click(function () {
console.log("About click");
$.mobile.changePage("#aboutPage", {transition: "fade"});
});
$("#btnBackMainInfo").click(function () {
console.log("back");
$.mobile.changePage("#mainPage", {transition: "fade"});
});
$("#btnCancelBuchen").click(function () {
console.log("chancel");
$.mobile.changePage("#mainPage", {transition: "fade"});
});
$("#btnBackMainBuchung").click(function () {
console.log("chancel");
$.mobile.changePage("#mainPage", {transition: "fade"});
});
$("#btnBuchungen").click(function () {
$.mobile.changePage("#buchungPage", {transition: "fade"});
});
$("#btnBuchen").click(function () {
console.log("btn Buchen click");
// Gew�hlte Zeitr�ume
var count=0;
$("input[name*=slot]:checked").each(function () {
count=1;
var id = $(this).attr('id');
var reservation = new Object();
reservation.lehrer = selected_index + 1;
reservation.col = id;
reservation.benutzer = user.benutzer;
//$("#dialogText").text("Buche " + teachers[selected_index].name + " " + zeiten[id - 3]);
//$.mobile.changePage('#dialog', 'pop', true, true);
$("#lehrerPopupMsg").text("Buche " + teachers[selected_index].name + " " + zeiten[id - 3]);
$( "#lehrerPopup" ).popup( "open" );
//$.mobile.showPageLoadingMsg();
var url = docScript + '?json=' + JSON.stringify(reservation);
//console.log ("URL="+url);
$.getJSON(url + '&cmd=set&prefix=?', null, function (results) {
$.mobile.hidePageLoadingMsg();
if (results.success == false) {
}
else {
}
teachers[selected_index].slots = results.lehrer.slots;
buildTeacherList();
$.mobile.changePage("#mainPage", {transition: "fade"});
});
});
if (count==0) {
$("#lehrerPopupMsg").text("Bitte einen Zeitslot aussuchen!");
$( "#lehrerPopup" ).popup( "open" );
}
});
$("#btnMailto").click(function () {
$("#buchungenPopupMsg").text("Sende Buchungsliste an " + user.benutzer);
$( "#buchungenPopup" ).popup( "open" );
//$("#dialogText").text("Sende Buchungen an " + user.benutzer);
//$.mobile.changePage('#dialog', 'pop', true, true);
var url = docScript + '?json=' + JSON.stringify(user);
//console.log ("URL="+url);
$.getJSON(url + '&cmd=mail&prefix=?', null, function (results) {
$.mobile.hidePageLoadingMsg();
$(".ui-btn-active").removeClass('ui-btn-active');
$( "#buchungenPopup" ).popup( "close" );
});
});
$("#lehrerPage").on("pageshow", function (event) {
if (user.benutzer == "undefined") {
$.mobile.changePage("#login", {transition: "fade"});
}
else {
if (teachers == null) {
$.mobile.changePage("#mainPage", {transition: "fade"});
}
else {
}
}
});
$("#mainPage").on("pageshow", function (event) {
console.log("Page show mainpage");
if (user.benutzer == "undefined") {
console.log("Page show mainpage benutzer = undefinded");
$.mobile.changePage("#login", {transition: "fade"});
}
else {
if (teachers == null) {
console.log("Muss Lehrer laden");
user.benutzer = localStorage.benutzer;
user.kennwort = localStorage.kennwort;
refresh();
}
else {
buildTeacherList();
}
}
});
$("#loginPage").on('pageinit', function () {
console.log("Page init login");
user.benutzer = localStorage.benutzer;
if (user.benutzer != null && user.benutzer != "") {
user.kennwort = localStorage.kennwort;
console.log("mache Login f�r " + user.benutzer);
$.mobile.changePage("#mainPage", {transition: "fade"});
}
});
$("#buchungPage").on("pageshow", function (event) {
console.log("Page show buchungPage");
if (user.benutzer == "undefined") {
console.log("user benutzer = undefinded");
$.mobile.changePage("#login", {transition: "fade"});
}
else {
if (teachers == null) {
console.log("teachers == null");
$.mobile.changePage("#mainPage", {transition: "fade"});
}
else {
console.log("teachers OK zeiten.length=" + zeiten.length + " user.benutzer=" + user.benutzer);
$('#buchungsliste').empty();
$('#buchungsliste').unbind();
for (var i = 0; i < zeiten.length; i++) {
for (var j = 0; j < teachers.length; j++) {
if (teachers[j].slots[i] == user.benutzer) {
//$('#buchungsliste').append('<li teacher="'+j+'" col="'+(i+3)+'" data-icon="delete"><a href="#">'+teachers[j].name+'<p><strong>'+teachers[j].raum+'</strong></p></a><span class="ui-li-count">'+zeiten[i]+'</span></li>');
$('#buchungsliste').append('<li teacher="' + j + '" col="' + (i + 3) + '" data-icon="delete"><a href="#"><h5>' + teachers[j].name + '</h5><p><strong>' + teachers[j].raum + '</strong></p><span class="ui-li-count">' + zeiten[i] + '</span></a></li>');
}
}
}
$("#buchungsliste").listview("refresh");
$('#buchungsliste').off('click');
$('#buchungsliste').on('click', 'li', function () {
var c = $(this).attr("col");
c = c - 3;
teachers[$(this).attr("teacher")].slots[c] = "";
$(this).remove();
var reservation = new Object();
var lehrerid = $(this).attr("teacher");
lehrerid++;
reservation.lehrer = lehrerid;
;
reservation.col = $(this).attr("col");
reservation.benutzer = user.benutzer;
var url = docScript + '?json=' + JSON.stringify(reservation);
//console.log ("JSON="+url);
//$("#dialogText").text("L�sche Buchung " + teachers[$(this).attr("teacher")].name + " " + zeiten[c]);
//$.mobile.changePage('#dialog', 'pop', true, true);
$("#buchungenPopupMsg").text("L�sche Buchung " + teachers[$(this).attr("teacher")].name + " " + zeiten[c]);
$( "#buchungenPopup" ).popup( "open" );
$.getJSON(url + '&cmd=del&prefix=?', null, function (results) {
$( "#buchungenPopup" ).popup( "close" );
$.mobile.hidePageLoadingMsg();
$.mobile.changePage('#buchungPage');
buildTeacherList();
});
});
}
}
});
$("#dialog").on("pageshow", function (event) {
$.mobile.showPageLoadingMsg();
});
function login() {
var url = docScript + '?json=' + JSON.stringify(user);
//$.mobile.showPageLoadingMsg();
//$("#dialogText").text("Lade Buchungen");
//$.mobile.changePage('#dialog', 'pop', true, true);
$("#loginPopupMsg").text("Login as "+user.benutzer);
$( "#loginPopup" ).popup( "open" );
$.getJSON(url + '&prefix=?', null, function (results) {
$.mobile.hidePageLoadingMsg();
$(".ui-btn-active").removeClass('ui-btn-active');
if (results.success == false) {
$("#loginMsg").text("Login fehlgeschlagen");
$( "#loginPopup" ).popup( "close" );
//$.mobile.changePage("#loginPage", {transition: "fade"});
}
else {
//$( "#loginPopup" ).popup( "close" );
$("#loginMsg").text("");
localStorage.benutzer = user.benutzer;
localStorage.kennwort = user.kennwort;
teachers = results.lehrer;
zeiten = results.zeiten;
console.log("Teachers.length=" + teachers.length);
$.mobile.changePage("#mainPage", {transition: "fade"});
buildTeacherList();
}
});
}
function refresh() {
var url = docScript + '?json=' + JSON.stringify(user);
//$.mobile.showPageLoadingMsg();
//$("#dialogText").text("Lade Buchungen");
//$.mobile.changePage('#dialog', 'pop', true, true);
$.getJSON(url + '&prefix=?', null, function (results) {
$.mobile.hidePageLoadingMsg();
$(".ui-btn-active").removeClass('ui-btn-active');
$( "#mainPopup" ).popup( "close" );
if (results.success == false) {
$("#loginMsg").text("Login fehlgeschlagen");
//$.mobile.changePage("#loginPage", {transition: "fade"});
}
else {
//$( "#loginPopup" ).popup( "close" );
localStorage.benutzer = user.benutzer;
localStorage.kennwort = user.kennwort;
teachers = results.lehrer;
zeiten = results.zeiten;
console.log("Teachers.length=" + teachers.length);
buildTeacherList();
}
});
}
function buildTeacherList() {
console.log("buildTeacherList");
$('#output').empty();
$('#output').unbind();
for (i = 0; i < teachers.length; i++) {
numTermine = 0;
for (var j = 0; j < teachers[i].slots.length; j++) {
if (teachers[i].slots[j] != "")
numTermine++;
}
$('#output').append('<li class="teacher"><a href="#"><h3 data-transition="fade">' + teachers[i].name + '</h3><p>' + teachers[i].klassen + '</p><span class="ui-li-count" id="' + teachers[i].name + '">' + numTermine + ' Termine</span></a></li>');
}
$("#output").listview("refresh");
// Event Listener auf die ListView
$('#output').on('click', 'li', function () {
selected_index = $(this).index();
console.log("on Click teacher");
buildSlotList();
$.mobile.changePage("#lehrerPage", {transition: "fade"});
$("#lehrername").text(teachers[selected_index].name);
});
//$.mobile.showPageLoadingMsg();
}
function buildSlotList() {
console.log("buildSlotList");
$('#zeiten').empty();
$('#zeiten').append('<fieldset data-role="controlgroup" id="cgrp">');
for (i = 0; i < teachers[selected_index].slots.length; i++) {
$('#cgrp').append('<input type="radio" name="slot" id="' + (i + 3) + '" value="' + zeiten[i] + '" /><label for="' + (i + 3) + '">' + zeiten[i] + '</label>');
console.log("Slot " + i + " ist (" + teachers[selected_index].slots[i] + ")");
if (teachers[selected_index].slots[i] == "") {
$('#' + (i + 3)).attr('disabled', false);
}
else {
$('#' + (i + 3)).attr('disabled', true);
}
}
$('#zeiten').append('</fieldset>');
//$("#zeiten").checkboxradio("refresh");
$("#zeiten").trigger('create');
console.log("buildSlotList fertig");
}
</script>
</html>
Raw
code.gs
var ss;
var sheet;
var json;
function doGet(e) { // change to doPost(e) if you are recieving POST data
ss = SpreadsheetApp.openById(ScriptProperties.getProperty('active'));
if (e!=undefined && e.queryString!=null) {
if (e.parameter["json"]!=undefined) {
json = JSON.parse(e.parameter["json"]);
if (e.parameter["cmd"]!=undefined) {
if(e.parameter["cmd"]=="del") {
return delData(e);
}
else if (e.parameter["cmd"]=="set") {
return setData(e);
}
else if (e.parameter["cmd"]=="mail") {
return email(e);
}
}
else return login(e);
}
}
return ContentService.createTextOutput("Table Server V2.21");
}
/*
Betsätigung der Buchungen senden
Aufruf mit cmd=mail und JSon Parameter und "prefix=?" Parameter z.B.so
https://script.google.com/macros/s/<geheim>/dev?cmd=mail&json={"benutzer":"[email protected]","kennwort":"mmbbs"}&prefix=?
*/
function email(e) {
var content = 'Sehr geehrte Ausbilderin, sehr geehrter Ausbilder,\nanbei erhalten Sie Ihre Buchungen zum Ausbildersprechtag:\n';
var answer=new Object();
// Buchungen zusammenbauen
var range = ss.getRangeByName('bereich2');
answer.zeiten= new Array();
for (var i=3;i<range.getLastColumn();i++) {
answer.zeiten[i-3]=range.offset(0,i).getValue();
}
for (var k=0;k<range.getLastColumn()-3;k++) {
for (var j=1;j<range.getLastRow();j++) {
if (range.offset(j,k+3).getValue()==json.benutzer) {
content = content+'\n\tZeit (von - bis) '+answer.zeiten[k]+' '+range.offset(j,0).getValue()+' ('+range.offset(j, 2).getValue()+')';
}
}
}
answer = new Object();
content = content+'\n\n\nMit freundlichen Grüßen\n\nIhre MMBBS';
MailApp.sendEmail(
json.benutzer,
'Ihre Buchungen für den Ausbildersprechtag',
content
);
answer.msg = "Send EMail to ("+json.benutzer+")";
answer.success=true;
var content = e.parameters.prefix + '(' +JSON.stringify(answer) + ')';
return ContentService.createTextOutput(content).setMimeType(ContentService.MimeType.JAVASCRIPT);
}
/*
Login auf Seite
Aufruf mit JSon Parameter und "prefix=?" Parameter z.B.so
https://script.google.com/macros/s/<geheim>/dev?json={"benutzer":"gast","kennwort":"mmbbs"}&prefix=?
Zurückgegeben wird die gesamte Tabelle als JSON Objekt, Bsp:
({"msg":"Login OK for gast","success":true,"lehrer":[{"name":"Frau Asche ( FI12E)","row":1,"klassen":"FI12E","raum":317,"slots":["[email protected]","[email protected]","","","[email protected]","[email protected]","","","[email protected]","","",""]},
*/
function login(e) {
Logger.log("Login von "+json.benutzer+" /"+json.kennwort);
sheet = ss.getSheetByName("Kennworte");
var cell = sheet.getRange('a1');
var answer = new Object();
answer.msg = "Login failed for ("+json.benutzer+")";
answer.success=false;
if (json.benutzer=="" && json.kennwort=="") {
}
else if (json.benutzer!="" && json.kennwort=="mmbbs") {
answer.msg = "Login OK for "+json.benutzer;
answer.success=true;
// JSon Array zusammenbauen
var range = ss.getRangeByName('bereich2');
answer.lehrer = new Array();
answer.zeiten= new Array();
for (var i=3;i<range.getLastColumn();i++) {
answer.zeiten[i-3]=range.offset(0,i).getValue();
}
for (var j=1;j<range.getLastRow();j++) {
answer.lehrer[j-1] = new Object();
answer.lehrer[j-1].name=range.offset(j,0).getValue();
answer.lehrer[j-1].row=j;
answer.lehrer[j-1].klassen=range.offset(j, 1).getValue();
answer.lehrer[j-1].raum=range.offset(j, 2).getValue();
answer.lehrer[j-1].slots = new Array();
for (var k=0;k<range.getLastColumn()-3;k++) {
answer.lehrer[j-1].slots[k]=range.offset(j,k+3).getValue();
}
}
}
else {
for (var i=1;i<100;i++) {
if (cell.offset(i, 0).getValue()==json.benutzer) {
if(cell.offset(i, 1).getValue()==json.kennwort) {
answer.msg = "Login OK for "+json.benutzer;
answer.success=true;
// JSon Array zusammenbauen
var range = ss.getRangeByName('bereich2');
answer.lehrer = new Array();
answer.zeiten= new Array();
for (var i=3;i<range.getLastColumn();i++) {
answer.zeiten[i-3]=range.offset(0,i).getValue();
}
for (var j=1;j<range.getLastRow();j++) {
answer.lehrer[j-1] = new Object();
answer.lehrer[j-1].name=range.offset(j,0).getValue();
answer.lehrer[j-1].row=j;
answer.lehrer[j-1].klassen=range.offset(j, 1).getValue();
answer.lehrer[j-1].raum=range.offset(j, 2).getValue();
answer.lehrer[j-1].slots = new Array();
for (var k=0;k<range.getLastColumn()-3;k++) {
answer.lehrer[j-1].slots[k]=range.offset(j,k+3).getValue();
}
}
break;
}
}
}
}
var content = e.parameters.prefix + '(' +JSON.stringify(answer) + ')';
return ContentService.createTextOutput(content).setMimeType(ContentService.MimeType.JAVASCRIPT);
}
/*
Termin eintragen
Aufruf mit cmd=set und JSon Parameter und "prefix=?" Parameter z.B.so
https://script.google.com/macros/s/<geheim>/dev?json={"lehrer":"1","col":"4","benutzer":"eon"}&cmd=set&prefix=?
Als Rückgabe gib es ein JSON Objekt, mit einer Nachricht (msg) und das aktuelle ZeilenObjekt f. die Reservierungen
*/
function setData(e) {
sheet = ss.getSheetByName("DATA");
var answer = new Object();
answer.msg = "Lehrer nicht gefunden!";
answer.success=false;
//answer.slot = new Array();
var i = 0;
var cell = sheet.getRange('a1');
var range= ss.getRangeByName("bereich2");
var i=json.lehrer;
if (cell.offset(i, json.col).getValue()!="") {
answer.msg = "Failed to update time table for "+cell.offset(i, 0).getValue();
answer.success=false;
}
else {
Logger.log("Reservierung eingetragen in Zeile "+i+" spalte "+json.col);
cell.offset(i,json.col).setValue(json.benutzer);
answer.msg = "Updated timetable for "+cell.offset(i, 0).getValue();
answer.success=true;
}
answer.lehrer = new Object();
answer.lehrer.name=cell.offset(i, 0).getValue();
answer.lehrer.row=i;
answer.lehrer.klassen=cell.offset(i,1).getValue();
answer.lehrer.raum=cell.offset(i, 2).getValue();
answer.lehrer.slots = new Array();
for (var k=0;k<range.getLastColumn()-3;k++) {
answer.lehrer.slots[k]=cell.offset(i,k+3).getValue();
}
/*
for (var j=0;j<range.getLastColumn()-1;j++) {
answer.slot[j]=cell.offset(i, j+1).getValue();
}
*/
var content = e.parameters.prefix + '(' +JSON.stringify(answer) + ')';
return ContentService.createTextOutput(content).setMimeType(ContentService.MimeType.JAVASCRIPT);
}
/*
Termin löschen
Aufruf mit cmd=del JSon Parameter und "prefix=?" Parameter z.B.so
https://script.google.com/macros/s/<geheim>/dev?json={"lehrer":"1","col":"3","benutzer":"eon"}&cmd=del&prefix=?
Als Rückgabe gib mit einer Nachricht (msg)
*/
function delData(e) {
sheet = ss.getSheetByName("DATA");
var answer = new Object();
answer.msg = "Termin konnte nichtgelöschen werden!";
answer.success=false;
var cell = sheet.getRange('a1');
var range= ss.getRangeByName("bereich2");
var i = json.lehrer;
cell.offset(i, json.col).setValue("");
answer.msg = "Termin gelöscht für "+json.lehrer;
answer.success=true;
var content = e.parameters.prefix + '(' +JSON.stringify(answer) + ')';
return ContentService.createTextOutput(content).setMimeType(ContentService.MimeType.JAVASCRIPT);
}
//http://www.google.sc/support/forum/p/apps-script/thread?tid=345591f349a25cb4&hl=en
function setUp() {
ScriptProperties.setProperty('active', SpreadsheetApp.getActiveSpreadsheet().getId());
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment