// smtp palvelimet.... // 7.4.2015 added ending state // 8.4.2015 changed SMTP_server to sähköposti_palvelin for clarity that it is not 'just' SMTP server // 30.8.2018 Teksit lyhemmiksi, jotta mahtuu pienempään näyttöön // TODO: optio jolla valitaan näytetäänkö TCP yhteydenmuodostus/lopetus var text = ""; var protokollaTila = -1; var hosts = { "h1": "Minä", "h2": "MyEmailServer", "h3": "KaveriEmailServer", "h4": "Kaveri" }; var synArray = new Array("Avataanko yhteys?", "Avataan yhteys, ok?", "OK!"); var finArray = new Array("Suljetaanpa yhteys", "Suljetaan yhteys", "Okei!", "Ookoo!"); var mailArray = new Array("SMTP kommunikaatio", "POP3 tai IMAP kommunikaatio", "Sähköposti email-clientilla"); var webmailArray = new Array("HTTP kommunikaatio", "Sähköposti selaimella"); $(document).ready(function() { alusta(); piirra(); $('a').click(function(event) { var tila = this.id; switch (tila) { case "mailclient": switch (protokollaTila) { case -1: text = "title: Sähköpostin välitys - Mail client"; $('#webmail').fadeOut(500); $('#mailclient').fadeOut(500); $('#mailclient').fadeIn(500, function() { $('#mailclient').html('Seuraava viesti'); }); text = text.concat("\nNote right of " + hosts.h1 + ": Lähetät sähköpostin"); protokollaTila += 1; break; case 0: piirra_nuoli("h1", "h2", mailArray[0]); protokollaTila += 1; break; case 1: piirra_nuoli("h2", "h3", mailArray[0]); protokollaTila += 1; break; case 2: text = text.concat("\nNote left of " + hosts.h4 + ": Avaa sähköpostiohjelman"); protokollaTila += 1; break; case 3: piirra_nuoli("h4", "h3", mailArray[1]); protokollaTila += 1; break; case 4: piirra_nuoli("h3", "h4", mailArray[2]); protokollaTila += 1; break; case 5: text = text.concat("\nNote left of " + hosts.h4 + ": Ei enää viestejä"); text = text.concat("\nNote left of " + hosts.h4 + ": Aloita alusta"); protokollaTila += 1; break; case 6: alusta(); break; } break; case "webmail": switch (protokollaTila) { case -1: text = "title: Sähköpostin välitys - Webmail"; $('#mailclient').fadeOut(500); $('#webmail').fadeOut(500); $('#webmail').fadeIn(500, function() { $('#webmail').html('Seuraava viesti'); }); protokollaTila += 1; break; case 0: piirra_nuoli("h1", "h2", webmailArray[0]); protokollaTila += 1; break; case 1: text = text.concat("\nNote right of " + hosts.h1 + ": Lähetät sähköpostin"); protokollaTila += 1; break; case 2: piirra_nuoli("h2", "h3", mailArray[0]); protokollaTila += 1; break; case 3: text = text.concat("\nNote left of " + hosts.h4 + ": Kirjautuu Webmailiin"); piirra_nuoli("h4", "h3", webmailArray[0]); protokollaTila += 1; break; case 4: piirra_nuoli("h3", "h4", webmailArray[1]); protokollaTila += 1; break; case 5: text = text.concat("\nNote left of " + hosts.h4 + ": Ei enää viestejä"); text = text.concat("\nNote left of " + hosts.h4 + ": Aloita alusta"); protokollaTila += 1; break; case 6: alusta(); break; } break; case "aa": alusta(); break; default: break; } // switch piirra(); }); }); function piirra_nuoli(h1, h2, viesti) { text = text.concat("\n" + hosts[h1] + "->" + hosts[h2] + ": "); text = text.concat(viesti); } function alusta() { text = "title: Sähköpostin viestit"; protokollaTila = -1; kuvia = 0; $('#mailclient').fadeIn(500, function() { $('#mailclient').html('Mail client'); }); $('#webmail').fadeIn(500, function() { $('#webmail').html('Webmail'); }); } function piirra() { $('#diagram').html(''); var diagram = Diagram.parse(text); diagram.drawSVG("diagram", { //theme: 'hand' //theme: 'simple' theme: $('.theme').val() }); }
<a id="webmail" href="javascript:void(0);">Webmail</a> <a id="mailclient" href="javascript:void(0);">Mail client</a> <a id="aa" href="javascript:void(0);">Aloita alusta</a> Theme: <select class="theme" style="margin-left:0.1cm;"> <option value="simple" selected>Simple</option> <option value="hand">Hand drawn</option> </select> <div id="diagram"></div>
a { background-color: #FFFFCC; width: 100px; font-size: 1em; border: 2px solid black; border-radius: 5px; margin-left: 0.1cm; }