efim/Learning-HTMX
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: repeating dynamic testimonial section

Browse Source
This commit is contained in:
efim 2023-06-29 16:56:36 +00:00
parent 951d364380
commit 657d7c7407
4 changed files with 40 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
13-testimonials-grid-section/src/main/java/testimonialsgrid/JTestimonial.java
View File

@ -1,40 +0,0 @@
package testimonialsgrid;
public class JTestimonial {
private String author;
private String text;
private int age;
// Constructor
public JTestimonial(String author, String text, int age) {
this.author = author;
this.text = text;
this.age = age;
}
// Getters
public String getAuthor() {
return author;
}
public String getText() {
return text;
}
public int getAge() {
return age;
}
// Setters
public void setAuthor(String author) {
this.author = author;
}
public void setText(String text) {
this.text = text;
}
public void setAge(int age) {
this.age = age;
}
}

23
13-testimonials-grid-section/src/main/resources/templates/index.html
View File

@ -32,27 +32,36 @@
</style> </style>
</head> </head>
<body > <body >
<div class="py-20 px-7 space-y-7 text-white bg-light-grayish-blue"> <div class="py-20 px-7 space-y-7 h-screen text-white bg-light-grayish-blue">
<section <section
class="py-7 px-10 space-y-4 rounded-xl bg-moderate-violet first:bg-[url('../public/images/bg-pattern-quotation.svg')] bg-no-repeat bg-[right_2rem_top] drop-shadow" th:each="testimonial : ${testimonials}"
th:classappend="${testimonial.additionalClasses}"
class="py-7 px-10 space-y-4 rounded-xl first:bg-[url('../public/images/bg-pattern-quotation.svg')] bg-no-repeat bg-[right_2rem_top] drop-shadow bg-moderate-violet"
> >
<div class="flex items-center"> <div class="flex items-center">
<img <img
alt="Avatar image" alt="Avatar image"
src="../../../../public/images/image-daniel.jpg" src="../../../../public/images/image-daniel.jpg"
th:src="${testimonial.avatarUrl}"
class="mr-5 w-10 h-10 rounded-full border-2 border-gray-400" class="mr-5 w-10 h-10 rounded-full border-2 border-gray-400"
/> />
<div class="grow"> <div class="grow">
<h1>Daniel Clifford</h1> <h1
th:text="${testimonial.author}"
>Daniel Clifford</h1>
<p class="text-sm opacity-50">Verified Graduate</p> <p class="text-sm opacity-50">Verified Graduate</p>
</div> </div>
</div> </div>
<h2 class="text-2xl"> <h2 class="text-2xl"
th:text="${testimonial.header}"
>
I received a job offer mid-course, and the subjects I learned were I received a job offer mid-course, and the subjects I learned were
current, if not more so, in the company I joined. I honestly feel I current, if not more so, in the company I joined. I honestly feel I
got every penny’s worth. got every penny’s worth.
</h2> </h2>
<p class="opacity-[70%] pb-2"> <p class="opacity-[70%] pb-2"
th:text="${testimonial.text}"
>
“ I was an EMT for many years before I joined the bootcamp. I’ve been “ I was an EMT for many years before I joined the bootcamp. I’ve been
looking to make a transition and have heard some people who had an looking to make a transition and have heard some people who had an
amazing experience here. I signed up for the free intro course and amazing experience here. I signed up for the free intro course and
@ -64,6 +73,7 @@
</section> </section>
<section <section
th:remove="all"
class="py-7 px-10 space-y-4 rounded-xl bg-very-dark-grayish-blue first:bg-[url('../public/images/bg-pattern-quotation.svg')] bg-no-repeat bg-[right_2rem_top] drop-shadow" class="py-7 px-10 space-y-4 rounded-xl bg-very-dark-grayish-blue first:bg-[url('../public/images/bg-pattern-quotation.svg')] bg-no-repeat bg-[right_2rem_top] drop-shadow"
> >
<div class="flex items-center"> <div class="flex items-center">
@ -87,6 +97,7 @@
</p> </p>
</section> </section>
<section <section
th:remove="all"
class="py-7 px-10 space-y-4 rounded-xl bg-white text-very-dark-blackish-blue first:bg-[url('../public/images/bg-pattern-quotation.svg')] bg-no-repeat bg-[right_2rem_top] drop-shadow" class="py-7 px-10 space-y-4 rounded-xl bg-white text-very-dark-blackish-blue first:bg-[url('../public/images/bg-pattern-quotation.svg')] bg-no-repeat bg-[right_2rem_top] drop-shadow"
> >
<div class="flex items-center"> <div class="flex items-center">
@ -107,6 +118,7 @@
</p> </p>
</section> </section>
<section <section
th:remove="all"
class="py-7 px-10 space-y-4 rounded-xl bg-very-dark-blackish-blue text-white first:bg-[url('../public/images/bg-pattern-quotation.svg')] bg-no-repeat bg-[right_2rem_top] drop-shadow" class="py-7 px-10 space-y-4 rounded-xl bg-very-dark-blackish-blue text-white first:bg-[url('../public/images/bg-pattern-quotation.svg')] bg-no-repeat bg-[right_2rem_top] drop-shadow"
> >
<div class="flex items-center"> <div class="flex items-center">
@ -136,6 +148,7 @@
</section> </section>
<section <section
th:remove="all"
class="py-7 px-10 space-y-4 rounded-xl bg-white text-very-dark-blackish-blue first:bg-[url('../public/images/bg-pattern-quotation.svg')] bg-no-repeat bg-[right_2rem_top] drop-shadow" class="py-7 px-10 space-y-4 rounded-xl bg-white text-very-dark-blackish-blue first:bg-[url('../public/images/bg-pattern-quotation.svg')] bg-no-repeat bg-[right_2rem_top] drop-shadow"
> >
<div class="flex items-center"> <div class="flex items-center">

58
13-testimonials-grid-section/src/main/scala/testimonialsgrid/Main.scala
View File

@ -6,6 +6,7 @@ import cask.main.Routes
import org.thymeleaf.context.Context import org.thymeleaf.context.Context
import org.thymeleaf.templateresolver.ClassLoaderTemplateResolver import org.thymeleaf.templateresolver.ClassLoaderTemplateResolver
import org.thymeleaf.TemplateEngine import org.thymeleaf.TemplateEngine
import scala.beans.BeanProperty
import scala.jdk.CollectionConverters._ import scala.jdk.CollectionConverters._
@ -45,51 +46,34 @@ object Main {
def index() = { def index() = {
val context = new Context() val context = new Context()
import scala.beans.BeanProperty
final case class Testimonial( final case class Testimonial(
@BeanProperty var avatarUrl: String,
@BeanProperty var author: String, @BeanProperty var author: String,
@BeanProperty var header: String,
@BeanProperty var text: String, @BeanProperty var text: String,
@BeanProperty var age: Int @BeanProperty var age: Int,
@BeanProperty var additionalClasses: String
) )
class CompatTestimonial {
@BeanProperty var author: String = _
@BeanProperty var text: String = _
@BeanProperty var age: Int = _
// Auxiliary constructor
def this(author: String, text: String, age: Int) = {
this() // Call to the primary constructor
this.author = author
this.text = text
this.age = age
}
}
val yo = new CompatTestimonial("Leopold", "Miawu", 188)
// val yo = Testimonial("Leopold", "Miawu", 188)
// let's experiment. ugh
class Person(
@BeanProperty var firstName: String,
@BeanProperty var lastName: String,
@BeanProperty var age: Int
) {
override def toString: String =
return String.format("%s, %s, %d", firstName, lastName, age)
}
val p = new Person("Efim", "Nefedov", 31)
println(p)
// println(p.getFirstName)
val ugh = new JTestimonial("Hell", "lala", 1234)
context.setVariable("justString", "oh why oh why")
context.setVariable("oneTestimonial", ugh)
context.setVariable( context.setVariable(
"testimonials", "testimonials",
List( List(
new JTestimonial("Leopold", "Miawu", 91), new Testimonial(
new JTestimonial("Aragorn", "And my sword!", 55) "public/images/image-patrick.jpg",
"Leopold",
" Odio facilisis mauris sit amet massa vitae tortor condimentum lacinia quis vel eros donec ac odio tempor orci dapibus ultrices. ",
" Nibh sed pulvinar proin gravida hendrerit? Massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada proin libero nunc, consequat interdum varius sit amet, mattis vulputate enim nulla aliquet porttitor lacus! ",
91,
"!bg-red-500"
),
new Testimonial(
"public/images/image-jonathan.jpg",
"Aragorn",
" Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum! ",
" Egestas fringilla phasellus faucibus scelerisque eleifend! Dignissim enim, sit amet venenatis urna cursus eget nunc scelerisque viverra mauris, in aliquam sem fringilla ut morbi tincidunt augue interdum velit euismod in! ",
55,
"!bg-blue-500"
)
).asJava ).asJava
) )
val result = templateEngine.process("index", context) val result = templateEngine.process("index", context)