In the last section we successfully handled the add/delete/copy functionality for large use cases

In this section we plan to address the setup of large use case functionality, namely:

Click the Set button to pop up the small use case (interface) list + the data layer implementation related to the interface list on the left.

First open p_cases.html, find the Settings button, and add onclick to it:

I’ll call it show_small(), which means when you click on it, show the list of small use cases, and don’t forget to pass in the ID of the large use case, so you know whose list of small use cases you want to show.

Then we’ll write the base div container for the left list, which is hidden by default and appears when clicked.

<div id="left_div" style="background-color: white; border: 1px solid black; z-index: 998; display: none; width:48%; height:100%; position:absolute; right:100%; top:0px; Overflow -y: visible"> </div>Copy the code

Note the style setting here:

; position:absolute; right:100%;Copy the code

This part right here, it’s fixed, and it’s 100 percent from the right edge, 100 percent from the right edge, so it looks something like this, like it’s hidden on the left side of the screen that we can’t see.

Then, when we click, not only do we change the div’s display property to display, but we also slide it into the view of the screen, which is 100 to 48 percent from the right edge, 48 percent of its own width.

It goes like this:

Then we will now write the show_small() function:

Well, the logic here is to give you a minute:

First, when we click on the Settings button for big case A, the div slides out, which goes if.

Then we click on the Settings for big case B, and we animate the div that quickly goes back to the left side of the screen, and then quickly slides back, changing the list of small use cases to big case B, else.

Here we also learned about jquery’s new method:.css() changes the style property directly, and then.animate is the property that changes the distance to the right edge of the drawing.

The source code is as follows:

<script>
    function show_small(case_id) {

        if(document.getElementById('left_div').style.display == 'none'){
            $("#left_div").css("display","block");
            $("#left_div").animate({right:'52%'},'fast');

        }else{
            $("#left_div").css("display","none");
            $("#left_div").animate({right:'100%'},'fast');
            $("#left_div").css("display","block");
            $("#left_div").animate({right:'52%'},'fast');
        }

    }
</script>
Copy the code

Refresh the page to see what it looks like:

Looks like it slipped out. Of course, the specific internal display effect needs to be written sentence by sentence. Here we will design the display of the small use case list:

It’s not as simple as the big use case list, which is presented with data as soon as it hits the page.

Instead, the user requests a list of small use cases in real time as they click on different Settings buttons, which are then displayed on the div through JS actions.

This section of js is equivalent to a refresh function, just a local div refresh, not the whole page refresh.

But the specific effect we can first write two dead in HTML, the effect is adjusted, we use JS to achieve, and finally delete the two small use case interface HTML code for display.

In the big left div, we have three buttons, and then we have a div that actually holds the list of small use cases, which we will show later with the JS control refresh. Let’s start with a few small use-case entities in this small div, designed to show the effect:

Let’s use this method for the time being. For clicking effect and adjusting position up and down, we can add it later.

So get rid of the three demos, go write js, and create this function that refreshes the list of small use cases

Then this inside we use JS implementation, is the need to get small use case data from the background. So write it like this:

The case_id is the id of the big use case we passed along. The background returns all its small use case data according to this ID. Then we accept the RET, parse it, empty the small div, and replace it with the new one.

The idea is clear, so let’s implement it

Forgot we were going to show a headline copy, just to let people know which big use case I’m opening…

Add the copy paragraph at the bottom that places the ID and name.

Then control the display in JS:

Of course, we notice that we don’t have Case_name in our show_small function, so we need to pass in Case_name at the beginning.

These three red lines, please make sure you don’t make mistakes.

Then we refresh the page to see what it looks like:

When we click on the Settings button for different large use cases, we will see the animation effect and the data above will also change:

Ok, let’s go back to the main line, since we want to get the data of these small use cases from the background, we need to construct the small use case table in the database first.

Let’s think about what fields this little use case contains.

Id, you don’t have to worry about it automatically

Case_id: id of the owning large case

Name, a simple name or description of the small use case

Index, the current sequence number, affects our subsequent execution order

Api_method: request method

Api_url, request URL

Api_host, request the host

Api_header, request header

Api_body_method, request body type

Api_body, request body

Get_path, extract the return value – path method code

Get_zz, extract the return value – regular method code

Assert_zz, assertion return value – regular method code

Assert_qz, assertion return value – full text search whether or not the method code exists

Assert-path, an assertion that returns value-path code

All right, that’s all we need for now. We have many other fields like common request header/variable/check algorithm, etc.

Ok, space, the content of this article is over, next class we will continue to implement ~