Replies: 4 comments 10 replies
-
|
The reason is that you are using this outside of the route. You can send component NavbarWidget:
name: string
lang: string
`template`:
nim:
# declare accept language
let acceptLanguage = self.lang.val
tDiv(class="bg-base-100 text-base-content sticky top-0 z-30 flex h-16 w-full justify-center bg-opacity-90 backdrop-blur transition-shadow duration-100 [transform:translate3d(0,0,0)]"):
tNav(class="navbar w-full"):
tDiv(class="flex flex-1 md:gap-1 lg:gap-2"):
tSpan(class="tooltip tooltip-bottom before:text-xs before:content-[attr(data-tip)]", "data-tip"=translate("Menu")): # got error using translate()
tLable("for"="drawer", class="btn btn-square btn-ghost drawer-button"):
tI(class="fa-sharp fa-solid fa-bars")
tDiv(class="hidden w-full max-w-sm lg:flex"):
tLabel(class="searchbox relative mx-3 w-full"):
tI(class="fa-solid fa-magnifying-glass")
serve "127.0.0.1", 5000:
get "/":
{.gcsafe.}:
return buildHtml:
# and send acceptLanguage to component
NavbarWidget("Hello", acceptLanguage) |
Beta Was this translation helpful? Give feedback.
-
|
cool, it works, but I do have two small questions.
|
Beta Was this translation helpful? Give feedback.
-
|
Beta Was this translation helpful? Give feedback.
-
|
for following example, how does htmx send request which can change model Language:
code: string
serve("0.0.0.0", 5000):
# Public Main Page
get "/":
{.gcsafe.}:
echo acceptLanguage # Error: undeclared identifier: 'acceptLanguage'
return mainPage("APP_Name")
post "/[lang:Language:json]":
echo lang.code
return mainPage("APP_Name", lang.code)
# User Page
get "/{title:string}":
{.gcsafe.}:
return userPage(title)how to write the endpoint in happyX, so the it can re-render new language from htmx code below? <button hx-post="/" hx-target="body" hx-vals='{"lang": "ru"}'>
Change Language
</button>
|
Beta Was this translation helpful? Give feedback.
-
|
thanks for the help, I am trying to get the Bonus working, but there is some difficulty since I am using htmx's hx-vals, <div hx-get="/example" hx-vals='{"myVal": "My Value"}'>I can not get the get the single quote string into final html, please see the example code below
# Import HappyX
import
happyx
import
index
model Language:
code: string
# Serve at http://127.0.0.1:5000
serve("127.0.0.1", 5000):
get "/":
echo inCookies
return mainPage("Demo")
post "/[lang:Language:json]":
outCookies.add(setCookie("userLanguage", lang.code, secure = true, httpOnly = true))
return "OK"
import happyx
# Header
proc header(title: string): TagRef =
return buildHtml:
tHead:
tMeta(charset = "utf-8")
tMeta(name="viewport", content="width=device-width, initial-scale=1")
tTitle: { title }
# Htmx , hyperscript, extensions
tScript(src = "https://unpkg.com/[email protected]")
tScript(src = "https://unpkg.com/[email protected]")
tScript(src = "https://unpkg.com/htmx.org/dist/ext/ws.js")
# font-awesome, daisyUI and tailwind from CDN
tLink( href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.2/css/all.css", rel="stylesheet") # find icons from https://fontawesome.com/search
tLink( href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.min.css", rel="stylesheet", type="text/css")
tScript(src = "https://cdn.tailwindcss.com")
proc mainPage*(title: string): TagRef =
return buildHtml:
tHtml("data-theme" = "light"):
{header(title)}
tBody():
tDiv(class="bg-base-100 drawer"):
tInput(id="drawer", type="checkbox", class="drawer-toggle")
tDiv(class="drawer-content"):
tButton("hx-post"="/", "hx-target"="body", "hx-vals"=" "): # I could not get this hx-vals string work here
"Set Language" |
Beta Was this translation helpful? Give feedback.
-
import json
...
tButton("hx-post"="/", "hx-target"="body", "hx-vals"= $(%*{"myVal": "My Value"})): |
Beta Was this translation helpful? Give feedback.
-
proc mainPage*(title: string): TagRef =
return buildHtml:
tHtml("data-theme" = "light"):
{header(title)}
tBody():
tDiv(class="bg-base-100 drawer"):
tInput(id="drawer", type="checkbox", class="drawer-toggle")
tDiv(class="drawer-content"):
tButton("hx-post"="/", "hx-target"="body", "hx-vals"= $(%*{"lang": "RU"})):
"Set Language"
|
Beta Was this translation helpful? Give feedback.
-
|
hm, try use it with tButton("hx-post"="/", "hx-target"="body", "hx-vals"= escapeJson $(%*{"lang": "RU"})): |
Beta Was this translation helpful? Give feedback.
-
|
still not working proc mainPage*(title: string): TagRef =
return buildHtml:
tHtml("data-theme" = "light"):
{header(title)}
tBody():
tDiv(class="bg-base-100 drawer"):
tInput(id="drawer", type="checkbox", class="drawer-toggle")
tDiv(class="drawer-content"):
tButton("hx-post"="/", "hx-target"="body", "hx-vals"= escapeJson $(%*{"lang": "RU"})):
"Set Language"
|
Beta Was this translation helpful? Give feedback.
-
|
I have also tried with hyperscript, it can post json to server, but the
# Import HappyX
import
happyx
import
index
model Language:
code: string
# Serve at http://127.0.0.1:5000
serve("127.0.0.1", 5000):
get "/":
echo inCookies
return mainPage("{'lang': 'ru'}")
post "/[lang:Language:json]":
echo lang
outCookies.add(setCookie("userLanguage", lang.code, secure = true, httpOnly = true))
return "OK"
import happyx
import json
# Header
proc header(title: string): TagRef =
return buildHtml:
tHead:
tMeta(charset = "utf-8")
tMeta(name="viewport", content="width=device-width, initial-scale=1")
tTitle: { title }
# Htmx , hyperscript, extensions
tScript(src = "https://unpkg.com/[email protected]")
tScript(src = "https://unpkg.com/[email protected]")
tScript(src = "https://unpkg.com/htmx.org/dist/ext/ws.js")
# font-awesome, daisyUI and tailwind from CDN
tLink( href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.2/css/all.css", rel="stylesheet") # find icons from https://fontawesome.com/search
tLink( href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.min.css", rel="stylesheet", type="text/css")
tScript(src = "https://cdn.tailwindcss.com")
proc mainPage*(title: string): TagRef =
return buildHtml:
tHtml("data-theme" = "light"):
{header(title)}
tBody():
tDiv(class="bg-base-100 drawer"):
tInput(id="drawer", type="checkbox", class="drawer-toggle")
tDiv(class="drawer-content"):
tButton("_"="on click sendPostRequest()" ): #"hx-post"="/", "hx-target"="body", "hx-vals"= ' ' getStr(%*{"lang": "RU"})
"Set Language"
tScript(type="text/hyperscript"):
"""
def sendPostRequest()
fetch '/' {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({"lang": "ru"})
}
then put it into myDiv
"""
tDiv(id="myDiv") |
Beta Was this translation helpful? Give feedback.
-
|
change this model Language:
code: stringto this model Language:
lang: stringbecause you send |
Beta Was this translation helpful? Give feedback.
-
|
Now I have a working example, later I will try the dropdown menu component approach, please let me know if my code can be improved, thx! main.nim # Import HappyX
import
happyx
import
index
model Language:
lang: string
# Serve at http://127.0.0.1:5000
serve("127.0.0.1", 5000):
get "/":
echo inCookies
let renderLanguage =
# inCookies is StringTableRef
if inCookies.hasKey("userLanguage"):
inCookies["userLanguage"]
else:
acceptLanguage
{.gcsafe.}:
return mainPage("APP_NAME", renderLanguage)
post "/[la:Language:json]":
echo la
outCookies.add(setCookie("userLanguage", la.lang, secure = true, httpOnly = true))
return "OK"index.nim import happyx
import json
const DEFAULT_LANG = "en"
translatable:
"Language":
"ru" -> "Язык"
"zh" -> "语言"
# Header
proc header(title: string): TagRef =
return buildHtml:
tHead:
tMeta(charset = "utf-8")
tMeta(name="viewport", content="width=device-width, initial-scale=1")
tTitle: { title }
# Htmx , hyperscript, extensions
tScript(src = "https://unpkg.com/[email protected]")
tScript(src = "https://unpkg.com/[email protected]")
tScript(src = "https://unpkg.com/htmx.org/dist/ext/ws.js")
# font-awesome, daisyUI and tailwind from CDN
tLink( href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.2/css/all.css", rel="stylesheet") # find icons from https://fontawesome.com/search
tLink( href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.min.css", rel="stylesheet", type="text/css")
tScript(src = "https://cdn.tailwindcss.com")
proc mainPage*(title: string, acceptLanguage: string = DEFAULT_LANG ): TagRef =
return buildHtml:
tHtml("data-theme" = "light"):
{header(title)}
tBody():
tDiv(class="bg-base-100 drawer"):
tInput(id="drawer", type="checkbox", class="drawer-toggle")
tDiv(class="drawer-content"):
tDiv(id="CurrentLang"):
{translate "Language"}
tButton("_"="on click sendPostRequest('en')" ):
"English"
tButton("_"="on click sendPostRequest('ru')" ):
"Russian"
tButton("_"="on click sendPostRequest('zh')" ):
"中文"
tScript(type="text/hyperscript"):
"""
def sendPostRequest(l)
fetch '/' {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({"lang": l})
}
then call location.reload()
"""Running |
Beta Was this translation helpful? Give feedback.
-
translatable: # ru - Russian # ja - Japanese # zh - Chinese "Menu": "zh" -> "菜单" "ja" -> "メニュー" "ru" -> "Меню" component NavbarWidget: name: string `template`: tDiv(class="bg-base-100 text-base-content sticky top-0 z-30 flex h-16 w-full justify-center bg-opacity-90 backdrop-blur transition-shadow duration-100 [transform:translate3d(0,0,0)]"): tNav(class="navbar w-full"): tDiv(class="flex flex-1 md:gap-1 lg:gap-2"): tSpan(class="tooltip tooltip-bottom before:text-xs before:content-[attr(data-tip)]", "data-tip"=translate("Menu")): # got error using translate() tLable("for"="drawer", class="btn btn-square btn-ghost drawer-button"): tI(class="fa-sharp fa-solid fa-bars") tDiv(class="hidden w-full max-w-sm lg:flex"): tLabel(class="searchbox relative mx-3 w-full"): tI(class="fa-solid fa-magnifying-glass") tDiv(class="flex-0"): LanguageMenu()Beta Was this translation helpful? Give feedback.
All reactions