Seitenanzeige im Fotoalbum begonnen zu implementieren --> Blättern fe…

…hlt noch
StefanPenndorf · Nov 4, 2013 · 7776133 · 7776133
1 parent a50034c
commit 7776133
Show file tree

Hide file tree

Showing 14 changed files with 164 additions and 25 deletions.
diff --git a/app/assets/stylesheets/main.less b/app/assets/stylesheets/main.less
@@ -2,6 +2,7 @@
 @default-color: #EE3F00;
 @left-bar-width: 150px;
 @total-width: 1280px;
+@thumbnail-size: 160px;
 
 body, label, h1, h2, h3, input {
     color: @default-color;
@@ -75,29 +76,47 @@ body, label, h1, h2, h3, input {
 
 #foto-blaetterer {
     padding-left: 160px;
-    padding-top: 20px;
+    padding-top:   20px;
 }
 
 #foto-blaetterer p {
-    display:block;
-    margin-left: auto;
+    display:      block;
+    margin-left:  auto;
     margin-right: auto;
-    width:160px;
-    font-weight:bold;
+    width:        240px;
+    font-weight:  bold;
 }
 
 input[type="file"][id="bildDatei"] {
     width:auto;
 }
 
 img.foto {
-    display:block;
-    float:right;
-    max-width:620px;
-    max-height:620px;
+    display:     block;
+    float:       right;
+    max-width:   620px;
+    max-height:  620px;
+}
+
+#fotoalbum-seite{
+  div {
+    float:   left;
+    margin:  5px;
+    width:   @thumbnail-size;
+    height:  @thumbnail-size;
+    padding: 0;
+  }
+
+  img.foto {
+      float:                  none;
+      max-width:              @thumbnail-size;
+      max-height:             @thumbnail-size;
+      margin:                 auto;
+      -ms-interpolation-mode: nearest-neighbor;
+      image-rendering:        optimizeSpeed;
+  }
 }
 
-
 #footer {
     clear:      both;
     text-align: center;

diff --git a/app/controllers/FotoVorfuehrer.scala b/app/controllers/FotoVorfuehrer.scala
@@ -16,6 +16,7 @@ import model.AlleBilderGueltig
 import scala.concurrent.Await
 import scala.concurrent.duration.Duration
 import java.util.concurrent.TimeUnit
+import viewmodel.FotoalbumSeite
 
 /**
  *
@@ -34,7 +35,23 @@ class FotoVorfuehrer @Inject()(
     Ok(views.html.fotoalben(verwalter.alleFotoalben()))
   }
 
-  def fotoalbum(besitzerName: BenutzerName, fotoPosition: Long = 1): Action[AnyContent] =  StackAction{ implicit request =>
+  def fotoalbum(besitzerName: BenutzerName): Action[AnyContent] =  StackAction{ implicit request =>
+    val findeFotoSeite = scala.concurrent.Future {
+      gästeliste.findeGastMitName(besitzerName)
+    }.map {
+      case Some(besitzer) => besitzer.fotoalbum
+      case None => None
+    }
+
+    Async {
+      findeFotoSeite.map {
+        case Some(fotoalbum) => Ok(views.html.fotoalbumSeite(FotoalbumSeite(fotoalbum)))
+        case None => NotFound("Ungültiges Album")
+      }
+    }
+  }
+
+  def fotoalbumEinzelfoto(besitzerName: BenutzerName, fotoPosition: Long = 1): Action[AnyContent] =  StackAction{ implicit request =>
     val findFotoalbumTask = scala.concurrent.Future {
       gästeliste.findeGastMitName(besitzerName)
     }.map {

diff --git a/app/model/Fotoalbum.scala b/app/model/Fotoalbum.scala
@@ -45,6 +45,20 @@ case class Fotoalbum(
     fotoMitPosition(prevPos).map( _=> prevPos)
   }
 
+  def alleFotos: Seq[model.Foto] = {
+    DB.withConnection { implicit connection =>
+      SQL(
+        """
+            SELECT id,besitzer,foto,position FROM fotos f
+            WHERE f.besitzer = {besitzerId}
+            LIMIT 45
+        """
+      ).on(
+        'besitzerId -> besitzer.id
+      ).as(Foto.simple +)
+    }
+  }
+
 }
 
 object Fotoalbum {

diff --git a/app/viewmodel/FotoalbumSeite.scala b/app/viewmodel/FotoalbumSeite.scala
@@ -0,0 +1,16 @@
+package viewmodel
+
+import model.Benutzer
+
+/**
+ *
+ * @author Stefan Penndorf <stefan@cyphoria.net>
+ */
+case class FotoalbumSeite(besitzer: Benutzer,
+                          fotos: Seq[model.Foto])
+
+object FotoalbumSeite {
+  def apply(album: model.Fotoalbum) = {
+    new FotoalbumSeite(album.besitzer, album.alleFotos)
+  }
+}
diff --git a/app/views/foto.scala.html b/app/views/foto.scala.html
@@ -11,13 +11,15 @@
 <div id="foto-blaetterer">
     <p>
         @album.vorhergehendePosition(foto).map { pos =>
-            <a id="vorhergehendesBild" href="@routes.FotoVorfuehrer.fotoalbum(album.besitzer.name, pos)">&lt;&lt;&lt; Zur&uuml;ck</a>
+            <a id="vorhergehendesBild" href="@routes.FotoVorfuehrer.fotoalbumEinzelfoto(album.besitzer.name, pos)">&lt;&lt;&lt; Zur&uuml;ck</a>
         }.getOrElse {
             &lt;&lt;&lt; Zur&uuml;ck
         }
+        &nbsp;|&nbsp;
+            <a id="uebersicht" href="@routes.FotoVorfuehrer.fotoalbum(album.besitzer.name)">Übersicht</a>
         &nbsp;|&nbsp;
         @album.naechstePosition(foto).map { pos =>
-            <a id="naechstesBild" href="@routes.FotoVorfuehrer.fotoalbum(album.besitzer.name, pos)">Weiter &gt;&gt;&gt;</a>
+            <a id="naechstesBild" href="@routes.FotoVorfuehrer.fotoalbumEinzelfoto(album.besitzer.name, pos)">Weiter &gt;&gt;&gt;</a>
         }.getOrElse {
             Weiter &gt;&gt;&gt;
         }

diff --git a/app/views/fotoalben.scala.html b/app/views/fotoalben.scala.html
@@ -43,7 +43,7 @@ <h3>Fotoalben</h3>
 
         <ul id="fotoalben">
             @for(fotoalbum<-fotoalben) {
-                <li><a href="@routes.FotoVorfuehrer.fotoalbum(fotoalbum.besitzer.name, 1)">@fotoalbum.besitzer.name.vorname (@fotoalbum.anzahlFotos Bilder)</a></li>
+                <li><a href="@routes.FotoVorfuehrer.fotoalbum(fotoalbum.besitzer.name)">@fotoalbum.besitzer.name.vorname (@fotoalbum.anzahlFotos Bilder)</a></li>
             }
         </ul>
     </div>

diff --git a/app/views/fotoalbumSeite.scala.html b/app/views/fotoalbumSeite.scala.html
@@ -0,0 +1,20 @@
+@(fotoalbumSeite: viewmodel.FotoalbumSeite)
+
+@import helper._
+@import helper.twitterBootstrap._
+
+@heading = {
+Fotoalbum von @fotoalbumSeite.besitzer.name.vorname
+}
+
+@main(heading=heading.toString) {
+<div id="fotoalbum-seite">
+    @for(foto <- fotoalbumSeite.fotos) {
+        <div>
+            <a href="@routes.FotoVorfuehrer.fotoalbumEinzelfoto(fotoalbumSeite.besitzer.name, foto.position)">
+                <img class="foto" src="@routes.FotoVorfuehrer.foto(foto.id.get)">
+            </a>
+        </div>
+    }
+</div>
+}
diff --git a/app/views/viparea.scala.html b/app/views/viparea.scala.html
@@ -15,23 +15,19 @@
     <p>
         Zunächst erstmal: <strong>VIELEN VIELEN DANK!!!</strong>
     </p>
-
     <p>
         Es war ein wunderschöner Tag für uns und wir hatten sehr viel Spaß mit euch! Und natürlich auch nochmal vielen
         Dank für die tollen Geschenke! Ihr werdet auch noch Post von uns bekommen, aber ich befürchte, dass dauert noch
         einbisschen...
     </p>
-
     <p>
-        Wir haben es endlich geschafft: die <a href="@routes.FotoVorfuehrer.fotoalbum(model.BenutzerName("Stefan","Penndorf"), 1)">Fotos von unserer Hochzeit</a> sind online! Ursprünglich wollten wir sie in
+        Wir haben es endlich geschafft: die <a href="@routes.FotoVorfuehrer.fotoalbumEinzelfoto(model.BenutzerName("Stefan","Penndorf"), 1)">Fotos von unserer Hochzeit</a> sind online! Ursprünglich wollten wir sie in
         Originalqualität hochladen aber dafür waren sie dann doch zu groß. Wenn ihr gern bestimmte Bilder im Original
         haben möchtet, gebt einfach Bescheid – dann brennen wir sie euch auf CD. Viel Spaß beim anschauen :)
     </p>
-
     <p>
         Wir würden uns sehr freuen, wenn ihr <a href="@routes.FotoVorfuehrer.fotoalben">eure Bilder auch hochladen</a> würdet!
     </p>
-
     <p>
         Ganz liebe Grüße<br/>
         Steffi & Stefan

diff --git a/conf/routes b/conf/routes
@@ -22,8 +22,9 @@ GET   /impressum                  controllers.Application.impressum
 GET   /viparea                                        controllers.VipArea.viparea
 GET   /fotoalben                                      @controllers.FotoVorfuehrer.fotoalben
 POST  /fotoalben                                      @controllers.FotoVorfuehrer.hochladen
-GET   /fotoalbum/:besitzer                            @controllers.FotoVorfuehrer.fotoalbum(besitzer: model.BenutzerName, fotoPosition: Long = 1)
-GET   /fotoalbum/:besitzer/$fotoPosition<[0-9]+>      @controllers.FotoVorfuehrer.fotoalbum(besitzer: model.BenutzerName, fotoPosition: Long)
+GET   /fotoalbum/:besitzer                            @controllers.FotoVorfuehrer.fotoalbum(besitzer: model.BenutzerName)
+GET   /fotoalbum/:besitzer/foto                            @controllers.FotoVorfuehrer.fotoalbumEinzelfoto(besitzer: model.BenutzerName, fotoPosition: Long = 1)
+GET   /fotoalbum/:besitzer/foto/$fotoPosition<[0-9]+>      @controllers.FotoVorfuehrer.fotoalbumEinzelfoto(besitzer: model.BenutzerName, fotoPosition: Long)
 GET   /foto/:id                                       @controllers.FotoVorfuehrer.foto(id: Long)
 
 # ADMIN Area

diff --git a/test/net/cyphoria/weddingapp/functional/FotoVorfuehrerControllerTest.scala b/test/net/cyphoria/weddingapp/functional/FotoVorfuehrerControllerTest.scala
@@ -58,12 +58,23 @@ class FotoVorfuehrerControllerTest extends Specification with MockFactory {
       contentAsBytes(result) must beEqualTo(PNG_IMAGE_CONTENT)
     }
 
-    "die Fotoseite mit dem ersten Foto im Album anzeigen" in laufenderAnwendungMitScenario("einemGastMitEinemFoto") {
+    "die erste Seite vom Fotoalbum anzeigen" in laufenderAnwendungMitScenario("einemGastMitDreiFotos") {
       val result = route(FakeRequest(GET, "/fotoalbum/Kerstin.Albert").withLoggedIn(config)(einGast.id.get)).get
 
       status(result) must equalTo(OK)
       contentAsString(result) must contain("Fotoalbum von Kerstin")
       contentAsString(result) must contain("src=\"/foto/1\"")
+      contentAsString(result) must contain("src=\"/foto/2\"")
+      contentAsString(result) must contain("src=\"/foto/3\"")
+    }
+
+
+    "die Fotoseite mit dem ersten Foto im Album anzeigen" in laufenderAnwendungMitScenario("einemGastMitEinemFoto") {
+      val result = route(FakeRequest(GET, "/fotoalbum/Kerstin.Albert/foto").withLoggedIn(config)(einGast.id.get)).get
+
+      status(result) must equalTo(OK)
+      contentAsString(result) must contain("Fotoalbum von Kerstin")
+      contentAsString(result) must contain("src=\"/foto/1\"")
 
     }
 

diff --git a/test/net/cyphoria/weddingapp/model/FotoalbumTest.scala b/test/net/cyphoria/weddingapp/model/FotoalbumTest.scala
@@ -54,6 +54,14 @@ class FotoalbumTest extends Specification {
       einGast.fotoalbum.get.vorhergehendePosition(zweitesFoto) must beSome(1)
     }
 
+    "ein Foto bereitstellen koennen" in DatenbankMit("einemGastMitEinemFoto") {
+      einGast.fotoalbum.get.alleFotos must beEqualTo(Seq(erstesFoto))
+    }
+
+    "alle Fotos in richtiger Reihenfolge bereitstellen koennen" in DatenbankMit("einemGastMitDreiFotos") {
+      einGast.fotoalbum.get.alleFotos must beEqualTo(Seq(erstesFoto, zweitesFoto, drittesFoto))
+    }
+
   }
 
   val verwalter = new PersistenterFotoalbenVerwalter()

diff --git a/test/net/cyphoria/weddingapp/specification/FotoalbumSchritte.scala b/test/net/cyphoria/weddingapp/specification/FotoalbumSchritte.scala
@@ -31,8 +31,9 @@ class FotoalbumSchritte extends Schritte with ScalaDsl with DE with Browser {
     Seq(bild1, bild2, bild3).foreach({cp => fotoalben upload cp; fotoalben go()})
   }
 
-  Angenommen("""^Kerstin ruft ihr Fotoalbum auf$"""){ () =>
+  Angenommen("""^Kerstin ruft das erste Foto auf$"""){ () =>
     fotoalben oeffneAlbumVon "Kerstin"
+    fotoalben waehleFoto 1
   }
 
   Wenn("""^sie ein Bild hochlädt$"""){ () =>
@@ -47,6 +48,10 @@ class FotoalbumSchritte extends Schritte with ScalaDsl with DE with Browser {
     fotoalben vorhergehendesBild()
   }
 
+  Wenn("""sie ihr Fotoalbum aufruft"""){ () =>
+    fotoalben oeffneAlbumVon "Kerstin"
+  }
+
   Dann("""^wird ein Fotoalbum für sie erstellt$"""){ () =>
     fotoalben oeffneAlbumVon "Kerstin"
   }
@@ -59,4 +64,8 @@ class FotoalbumSchritte extends Schritte with ScalaDsl with DE with Browser {
     fotoalben zeigtBild bild2
   }
 
+  Dann("""^kann sie die erste Seite ihres Fotoalbums mit den drei Bildern sehen$"""){ () =>
+    fotoalben zeigtSeiteMit(anzahlBilder = 3)
+  }
+
 }
diff --git a/test/net/cyphoria/weddingapp/specification/seiten/FotoalbenSeite.scala b/test/net/cyphoria/weddingapp/specification/seiten/FotoalbenSeite.scala
@@ -20,6 +20,8 @@ import net.cyphoria.weddingapp.imagecompare.FileDownloader
  * @author Stefan Penndorf <stefan@cyphoria.net>
  */
 class FotoalbenSeite extends FluentPage with ShouldMatchers with ImageCompareMatchers {
+
+
   var bildDatei: FluentWebElement = null
   var starteHochladen: FluentWebElement = null
 
@@ -54,6 +56,7 @@ class FotoalbenSeite extends FluentPage with ShouldMatchers with ImageCompareMat
   }
 
   private def aktuellesBild: BufferedImage = {
+    await().atMost(3, TimeUnit.SECONDS).until("img").areDisplayed()
     val imageSrc = $("img").first().getAttribute("src")
     imageSrc should include("foto")
 
@@ -67,13 +70,30 @@ class FotoalbenSeite extends FluentPage with ShouldMatchers with ImageCompareMat
   }
 
   def naechstesBild() = {
+    await().atMost(3, TimeUnit.SECONDS).until("#naechstesBild").isPresent
     $("#naechstesBild").first.click
   }
 
   def vorhergehendesBild() = {
+    await().atMost(3, TimeUnit.SECONDS).until("#vorhergehendesBild").isPresent
     $("#vorhergehendesBild").first.click
   }
 
+  def waehleFoto(i: Int) = {
+    $("img").get(i-1).click()
+  }
+
+  def zeigtSeiteMit(anzahlBilder: Int) = {
+    await().atMost(10, TimeUnit.SECONDS).until(new Predicate[WebDriver] {
+      def apply(p1: WebDriver): Boolean = {
+        val heading: String = $("h1").getText
+        heading != null && heading.contains("Fotoalbum von")
+      }
+    })
+
+    await().atMost(3, TimeUnit.SECONDS).until("img").hasSize(anzahlBilder)
+  }
+
 
   override def getUrl: String = "/fotoalben"
 

diff --git a/test/resources/net/cyphoria/weddingapp/specification/fotoalbum.feature b/test/resources/net/cyphoria/weddingapp/specification/fotoalbum.feature
@@ -15,13 +15,19 @@ Die Gäste können Fotoalben anschauen und selbst Bilder in ein Fotoalbum hochla
 
   Szenario: Vorblättern im Fotoalbum
     Angenommen Kerstin hat drei Bilder hochgeladen
-    Und        Kerstin ruft ihr Fotoalbum auf
+    Und        Kerstin ruft das erste Foto auf
     Wenn       sie ein Bild weiter blättert
     Dann       kann sie das zweite Foto anschauen
 
   Szenario: Zurückblättern im Fotoalbum
     Angenommen Kerstin hat drei Bilder hochgeladen
-    Und        Kerstin ruft ihr Fotoalbum auf
+    Und        Kerstin ruft das erste Foto auf
     Wenn       sie ein Bild weiter blättert
     Und        sie ein Bild zurück blättert
     Dann       kann sie das erste Foto anschauen
+
+  Szenario: Seiten im Fotoalbum anzeigen
+    Angenommen Kerstin hat drei Bilder hochgeladen
+    Wenn       sie ihr Fotoalbum aufruft
+    Dann       kann sie die erste Seite ihres Fotoalbums mit den drei Bildern sehen
+