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 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 create a Clova skill in Java
I tried to make a login function in Java
I tried to implement Enigma
I tried to verify yum-cron
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 to develop a web application from a month and a half of programming learning history
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 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 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 make a group function (bulletin board) with Rails
[iOS] I tried to make a processing application like Instagram with Swift
I want to write a unit test!
I tried to solve AOJ's Binary Search
I tried to make a Web API that connects to DB with Quarkus
I made a virtual currency arbitrage bot and tried to make money
I tried time-saving management learning with Studyplus.
I tried to implement the Iterator pattern
I tried playing with BottomNavigationView a little ①
I tried to summarize the Stream API
I tried to make a talk application in Java using AI "A3RT"
I tried to build AdoptOpenjdk 11 on CentOS 7
I made a new Java deployment tool
I tried to use Selenium like JQuery
I tried to touch JavaScript Part.2 Object-oriented
I tried embedding a formula in Javadoc
I tried to make a simple game with Javafx ① "Let's find happiness game" (unfinished)
[Java] I tried to connect using a connection pool with Servlet (tomcat) & MySQL & Java
I tried to automatically generate a class to convert from a data class to a Bundle with APT
[Android] I tried to make a material list screen with ListView + Bottom Sheet
I tried to clone a web application full of bugs with Spring Boot
[Azure] I tried to create a Java application for free-Web App creation- [Beginner]
[Small story] I tried to make the java ArrayList a little more convenient
I did Java to make (a == 1 && a == 2 && a == 3) always true
[Ruby] I want to do a method jump!
I tried hitting a Java method from ABCL
I tried to chew C # (basic of encapsulation)
I wanted to make (a == 1 && a == 2 && a == 3) true in Java