I tried to develop a man-hour management tool

What i did

We have developed a web application that manages man-hours. Language: Java (Spring), JavaScript

procedure

  1. Create a project (register the project code at this time)
  2. By entering the project code registered in 1., transition to the project you want to add / edit / view
  3. Add task (task name, man-hours, start date, end date, person in charge, etc.)
  4. Task browsing (what kind of task the person in charge completed in a certain period, how much man-hours, how much man-hours each person in charge of the project spends, etc.)

screen

Project code input screen スクリーンショット 2020-05-30 13.53.52.png

Task addition (and modification) screen スクリーンショット 2020-05-30 13.54.28.png

Task viewing screen スクリーンショット 2020-05-30 13.53.05.png

Clogged

Cooperation between JavaScript and Thymeleaf?

As I wrote in Previous article, for example, in JavaScript

target.html('<a th:href="@{/hello}">sample</a>');

Even if I wrote, the a tag did not work.

solution

<script type="text/javascript" th:inline="javascript">
    const link = /*[[@{/hello}]]*/'';
    target.html('<a href="' + link + '">sample</a>');
</script>

I solved it by writing. In this way, I struggled with the fact that Thymeleaf's `th:` cannot be used in JavaScript.

The problem of not being able to write the `form``` tag inside the `table``` tag

For example

<table>
    <tr>
        <th>#</th>
        <th>name</th>
        <th>button</th>
    </tr>
    <tr>
        <form>
            <td>1</td>
            <td><input type="text"/></td>
            <td><input type="submit"></td>
        </form>
    </tr>
    <tr>
        <form>
            <td>2</td>
            <td><input type="text" /></td>
            <td><input type="submit"></td>
        </form>
    </tr>
</table>

If it's an image, スクリーンショット 2020-05-30 14.21.26.png

This is the case. Looking at this with Chrome's developer tools, ... スクリーンショット 2020-05-30 14.27.43.png

Strange. .. .. `` `form``` tag, don't close it there. .. ..

solution

  1. Add id attribute to `` `form``` tag
  2. Enter the id given in 1. in the form attribute of the input tag.

By doing this, you can send the value value of input corresponding to the id of the `` form``` tag. By the way, it seems that the ``` form``` tag can be written anywhere above or below the `input``` tag.

In the above example

<table>
    <tr>
        <th>#</th>
        <th>name</th>
        <th>button</th>
    </tr>
    <tr>
        <form id="form_01"></form>
        <td>1</td>
        <td><input type="text" form="form_01" /></td>
        <td><input type="submit" form="form_01"></td>
    </tr>
    <tr>
        <form id="form_02"></form>
        <td>2</td>
        <td><input type="text" form="form_02" /></td>
        <td><input type="submit" form="form_02"></td>
    </tr>
</table>

Looking at the developer tools

スクリーンショット 2020-05-30 14.32.57.png

It should look like this! Probably this will work.

that's all. Thank you for reading to the end.

reference

form tags cannot be nested & how to deal with them How to write HTML5 FORM and INPUT separately

Recommended Posts

I tried to develop a man-hour management tool
I tried to develop a DUO3.0 study website.
I tried to develop a website to record expenses.
I tried to develop a ramen shop sharing website.
I want to develop a web application!
java I tried to break a simple block
I tried to create a LINE clone app
I tried to develop an application in 2 languages
I tried to implement a server using Netty
I tried to break a block with java (1)
I tried to decorate the simple calendar a little
I tried to create a Clova skill in Java
I tried to make a login function in Java
I tried to verify yum-cron
I tried to create a java8 development environment with Chocolatey
I tried adding a separator line to TabLayout on Android
I tried to modernize a Java EE application with OpenShift.
[Rails] I tried to create a mini app with FullCalendar
I tried using Hotwire to make Rails 6.1 scaffold a SPA
I tried to convert a string to a LocalDate type in Java
I tried to implement a buggy web application in Kotlin
I tried to make a client of RESAS-API in Java
I tried to create a padrino development environment with Docker
I tried upgrading from CentOS 6.5 to CentOS 7 with the upgrade tool
I tried to develop a web application from a month and a half of programming learning history
I tried to chew C # (indexer)
I tried a little digdag docker.run_options
I tried to summarize iOS 14 support
I tried to interact with Java
I tried to explain the method
I tried Java's micro-benchmark tool JMH
I tried to summarize Java learning (1)
I tried to understand nil guard
I tried to summarize Java 8 now
I tried to chew C # (polymorphism: polymorphism)
I tried to explain Active Hash
I made a package.xml generation tool.
I tried to create a simple map app in Android Studio
I tried to illuminate the Christmas tree in a life game
I tried to write code like a type declaration in Ruby
I tried to create a Spring MVC development environment on Mac
[Unity] I tried to make a native plug-in UniNWPathMonitor using NWPathMonitor
I tried to build a simple application using Dockder + Rails Scaffold
[Java] I tried to make a maze by the digging method ♪
I tried to generate a C language program source from cURL
I made a tool to output the difference of CSV file
I tried to build a laravel operating environment while remembering Docker
I tried to make a group function (bulletin board) with Rails
I tried to make a parent class of a value object in Ruby
I tried to make a simple face recognition Android application using OpenCV
I tried a calendar problem in Ruby
I tried to summarize the methods used
I want to write a nice build.gradle
I tried to introduce CircleCI 2.0 to Rails app
I tried migrating Processing to VS Code
I tried using Java's diagnostic tool Arthas
I tried to summarize Java lambda expressions
[Rails] I tried to implement a transaction that combines multiple DB processes
I tried to get started with WebAssembly
[iOS] I tried to make a processing application like Instagram with Swift
I want to write a unit test!