ballot page now looks good

public/static/script.js

@@ -1,10 +1,21 @@
 htmx.onLoad(function(content) {
-    var sortables = content.querySelectorAll(".sortable");
+    var sortable = content.querySelector(".sortable");
-    for (var i = 0; i < sortables.length; i++) {
+    if(sortable != null) {
-      var sortable = sortables[i];
       new Sortable(sortable, {
           animation: 150,
-          ghostClass: 'blue-background-class'
+          ghostClass: 'blue-background-class',
+          group: {
+            name: 'shared'
+          }
+      });
+    }
+    sortable = content.querySelector(".sortable-from")
+    if(sortable != null) {
+      new Sortable(sortable, {
+          animation: 150,
+          ghostClass: 'blue-background-class',
+          group: 'shared',
+          sort: false
       });
     }
 })

public/static/style.css

@@ -1,25 +1,21 @@
-body
+body {
-{
     display: flex;
     flex-direction: column;
     align-items: center;
 }
 
-#inputs, .options
+#inputs, .options {
-{
     display: flex;
     flex-direction: column;
     max-width: 400px;
     gap: 10px;
 }
 
-.options
+.options {
-{
     padding: 10px
 }
 
-#permenant-input
+#permenant-input {
-{
     display: flex;
     flex-direction: column;
 }
@@ -29,3 +25,25 @@ body
   display: flex;
   background-color: white;
 }
+
+.draggable-options {
+  width: 12em;
+  min-height: 70px;
+}
+
+.draggable-options > div > * {
+  text-align: center;
+}
+
+#drag-boxes-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  width: 100%;
+  justify-content: space-around;
+  justify-items: space-between;
+}
+
+#ballot-submit {
+  margin-top: 10px;
+}

src/Main.hs

@@ -76,8 +76,6 @@ server = createPage
   :<|> getPollForBallot
   :<|> serveDirectoryWith ((defaultWebAppSettings "public"))
 
-
-
 getPollForBallot :: P.PollId -> AppM (L.Html ())
 getPollForBallot pollId = do
   db <- Rd.asks db
@@ -85,9 +83,15 @@ getPollForBallot pollId = do
   fullPage $ do
       My.maybe (pure ()) (h3_ . toHtml) (P.title createInfo)
       h3_ . toHtml . P.question $ createInfo
-      with form_  [hxPost_ ""] $ do
+      with div_ [id_ "drag-boxes-container"] $ do
-        with div_ [classes_ ["sortable", "options", "child-borders", "border-primary", "background-primary"]] . mconcat . map toFormInput . LN.toList . P.options $ createInfo
+        div_ $ do
-        input_ [type_ "submit", classes_ ["paper-btn", "btn-primary"], value_ "submit"]
+          "drag from here"
+          with div_ [classes_ ["draggable-options","sortable-from", "options", "child-borders", "border-primary", "background-primary"]] . mconcat . map toFormInput . LN.toList . P.options $ createInfo
+        with form_  [hxPost_ "", id_ "drag-into-vote"] $ do
+          div_$ do
+            "to here in order of preference"
+            with div_ [classes_ ["draggable-options", "sortable", "options", "child-borders", "border-primary", "background-primary"]] ""
+      input_ [id_ "ballot-submit", type_ "submit", classes_ ["paper-btn", "btn-primary"], value_ "submit", form_ "drag-into-vote"]
   where
     toFormInput :: T.Text -> L.Html ()
     toFormInput option = with div_ [classes_ []] $ input_ [type_ "hidden", value_ option, name_ "options"] <> toHtml option
@@ -151,6 +155,7 @@ tlsSettings = WTLS.tlsSettings "/etc/letsencrypt/live/rankedchoice.net/cert.pem"
 warpSettings :: W.Settings
 warpSettings = W.setPort 443 W.defaultSettings
 
+examplePoll :: P.CreatePollInfo
 examplePoll = P.CreatePollInfo {
   title = Nothing,
   question = "what's your favorite color?",
@@ -163,7 +168,7 @@ main = do
   opts <- S.getArgs
   -- let gen = R.globalStdGen
   -- pollId <- P.PollId <$> R.uniformWord64 gen
-  -- _ <- liftIO $ Ac.update (db env) (DB.CreatePoll examplePoll (pollId))
+  _ <- liftIO $ Ac.update (db env) (DB.CreatePoll examplePoll (P.PollId 7))
   pollids <- liftIO . Ac.query (db env) $ DB.GetPollIds
   print pollids
   let application = serve api . hoistServer api (runWithEnv env) $ server